hexo添加_hexo创建个人博客（附加插入音乐、分享、评论、标签页、搜索）

你是不是见多了各种大v的个人博客，是不是也想拥有这样的一个个人博客，(静静的装B！)看这里，就对了。一步一步教你创建自己的博客。

现在用的比较多的就是hexo(快速、简洁且高效的博客框架)，支持markDown，有丰富的插件和主题

1、安装环境

安装git 和 Node.js,git就不用多说了，如果连git都不会装，请出去把门关上。

Node.js 的安装可以使用两种方法：

1、点击前面链接直接下载安装即可

2、通过终端命令行：

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

之后重启终端，如果还找不到nvm命令可尝试重启电脑

接着执行

$ nvm install 4

即可安装完成

以上两个条件已具备的话，即可开始安装hexo博客框架

$ npm install -g hexo-cli

执行完成后hexo就安装成功了，第一步结束，环境配置完毕可以开始创建自己的博客了

2、github上创建仓库

github帐号的创建我也不再次赘述了。下面说一下仓库的创建，名字前面部分可以自己随便起。后面部分统一为github.io ，其他的均不需设置。如下图：

屏幕快照 2016-05-09 下午5.36.45.png

3、博客的创建

3.1初始化

cd /Desktop //cd到你的桌面执行：(init 后面的就是你的名字，当然你也可以随便起，不影响的，仅仅是创建一个文件夹)

$ hexo init nanshanyi.github.io

桌面会生成一个文件夹nanshanyi.github.io

3.2基础配置

打开_config.yml文件进行基础配置(可以使用sublime或者atom来打开，都是很很强大的代码编辑器，可安装各种插件，前端开发必备)

title: 南山亿的技术博客 //博客名字

subtitle: 积少成多 //小标题可以写自己喜欢的话

description: //博客描述

author: 南山忆 //作者名字

language: zh-Hans //语言(此处为简体中文)

url: //自己购买的域名网址(没有可不写)

theme： //主题的名字

deploy:

type: git //使用git发布

repo: https://github.com/nanshanyi/nanshanyi.github.io.git //刚刚创建的github仓库的地址

3.3安装主题

博客要想炫酷漂亮，一款合适的主题必不可少，hexo本身就提供了50种主题 可以预览查看，选择一款自己喜欢的主题

点击图片即可预览，看到此主题的效果，点击蓝色主题名即可进入此主题的github仓库，一般主题作者都写有使用方法。

屏幕快照 2016-05-09 下午6.00.09.png

cd 到nanshanyi.github.io文件下

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

这里使用的是一款简约漂亮的主题，使用的人挺多的。之后就可以在nanshanyi.github.io/themes目录下看到nex(以下next均为主题名，路径中为主题文件夹名。使用的主题不同只要把next换成相应的名字即可)主题。这个主题有三种布局展示形式，可自行挑选主题的详细配置请看这里

3.4创建博客文章与发布

在nanshanyi.github.io 目录下终端命令：

$ hexo new '文件名' //会在source/_posts创建一个文件名.md文件

这就可以使用markdown编辑器开始写自己的博客了(上面提到有工具)

---

title: new//博客标题

date: 2016-05-10 10:47:49 //创建时间

tags: //分类标签

---

这里写正文(上面的---是必要的)

本地查看效果预览

$ hexo s

浏览器打开https://localhost:4000 即可查看效果

发布到 github：

$ hexo clean && hexo g && hexo d //发布到 github

发布到 github 后可以使用 http://nanshanyi.github.io 访问(请使用你自己的网址)

3.5博客中插入图片,音乐

基本分为两种办法

(1)放在本地文件

首先在nanshanyi.github.io目录下确认 _config.yml 中有 post_asset_folder:true 。

在 hexo 目录，执行

$ npm install https://github.com/CodeFalling/hexo-asset-image --save

之后再使用 hexo new 'new' 创建新博客的时候，会在source/_posts里面创建.md文件的同时生成一个相同的名字的文件夹。把该文章中需要使用的图片放在该文件夹下即可。

使用的时候


例如：

！[ ] (new/text.jpg)

(2)放在七牛上，需要先注册，上传图片生成链接，直接在文章中使用链接即可。

(3)插入音乐

可以使用网易云音乐，搜索想要的歌曲，点击歌曲名字进入播放器页面，点击生成外链播放器；复制代码，直接粘贴到博文中即可。这样会显示一个网易的播放器，可以把

//其中的width=298 height=52 均改为0就看不到了，依然可以播放音乐

屏幕快照 2016-05-10 下午2.01.52.png

屏幕快照 2016-05-10 下午1.56.58.png

4、集成多说评论，分享

申请多说帐号,打开页面点击我要安装注册帐号

屏幕快照 2016-05-10 上午10.38.15.png

在themes/next目录下打开 _config.yml，设置

duoshuo_shortname: nanshanyi //上面多说域名中填的内容

需要分享的打开duoshuo_share: true 即可，支持分享到微博、QQ空间、微信

然后打开themes\landscape\layout_partial\article.ejs文件

把以下代码

Please enable JavaScript to view the comments powered by Disqus.

替换为

var duoshuoQuery = {short_name:''};

(function() {

var ds = document.createElement('script');

ds.type = 'text/javascript';ds.async = true;

ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';

ds.charset = 'UTF-8';

(document.getElementsByTagName('head')[0]

|| document.getElementsByTagName('body')[0]).appendChild(ds);

})();

然后你hexo s ,打开http://localhost:4000/ 打开文章看一下，评论和分享已经静静的躺在那了

屏幕快照 2016-05-10 下午3.36.43.png

5、添加标签页

在nanshanyi.github.io文件目录下执行

$ hexo new page tags //会在nanshanyi.github.io/source下创建tags文件夹内部是一个index.md和index文件夹

修改nanshanyi.github.io/themes/next/_config.yml

menu:

home: / //主页

#categories: /categories //分类

archives: /archives //归档

tags: /tags //标签(添加此行即可)

about: /about //关于

#commonweal: /404.html

首页菜单就会有便签项，点击即可进入标签页。

6、添加搜索功能

next支持Swiftype 、微搜索和Local Search

(1)Swiftype (收费的没有免费版，进可以使用15天)是为网站和移动应用提供内部搜索的工具，点击进入Swiftype注册页面 ，注册之后需要填写自己的博客的网址

然后选择

屏幕快照 2016-05-10 下午9.07.45.png

选择 install Search

屏幕快照 2016-05-10 下午9.10.01.png

途中的即为swiftype_key

修改nanshanyi.github.io/themes/next/_config.yml中的

swiftype_key:上面红圈中的内容

点击 resume Configuration 选择 search field edit

屏幕快照 2016-05-10 下午9.49.27.png

save

发布即可看到效果

屏幕快照 2016-05-10 下午9.54.34.png

(2)添加本地搜索

安装 hexo-generator-search，在nanshanyi.github.io目录下执行以下命令：

$ npm install hexo-generator-search --save

在nanshanyi.github.io/themes/next/_config.yml添加

search:

path: search.xml

field: post

发布即可看到效果，和上面的 swiftType 效果差不多，就不再粘图片了。