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

1、安装环境

$ curl  | sh

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

$ nvm install 4

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

$ npm install -g hexo-cli

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

2、github上创建仓库

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

3、博客的创建

3.1初始化

cd /Desktop  //cd到你的桌面执行：（init 后面的就是你的名字，当然你也可以随便起，不影响的，仅仅是创建一个文件夹）
$ hexo init nanshanyi.github.io

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

3.2基础配置

title: 南山亿的技术博客   //博客名字
subtitle: 积少成多    //小标题可以写自己喜欢的话
description:          //博客描述
author: 南山忆     //作者名字
language: zh-Hans   //语言（此处为简体中文）
url:  //自己购买的域名网址（没有可不写）
theme：   //主题的名字
deploy: 
type: git //使用git发布
repo:  //刚刚创建的github仓库的地址

3.3安装主题

cd 到nanshanyi.github.io文件下
$ git clone  themes/next

3.4创建博客文章与发布

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

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

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

---
title: new//博客标题
date: 2016-05-10 10:47:49 //创建时间
tags:  //分类标签
---
　　这里写正文（上面的---是必要的）

本地查看效果预览

$ hexo s

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

3.5博客中插入图片,音乐

基本分为两种办法
（1）放在本地文件
首先在nanshanyi.github.io目录下确认 _config.yml 中有 post_asset_folder:true 。
在 hexo 目录，执行

$ npm install  --save

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

![“图片描述”（可以不写）](/文件夹名/你的图片名字.JPG)
例如：
！[ ] (new/text.jpg)

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 
//其中的width=298 height=52 均改为0就看不到了，依然可以播放音乐

4、集成多说评论，分享

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

  duoshuo_shortname:  nanshanyi //上面多说域名中填的内容
  需要分享的打开duoshuo_share: true 即可，支持分享到微博、QQ空间、微信

然后打开themes\landscape\layout_partial\article.ejs文件
把以下代码

  <% if (!index &&  && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a  powered by Disqus.</a></noscript>
    </div>
  </section>
  <% } %>

替换为

<% if (!index &&  && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + 
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

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、添加搜索功能

选择 install Search

swiftype_key:上面红圈中的内容

点击 resume Configuration 选择 search field edit

save
发布即可看到效果

$ npm install hexo-generator-search --save

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

search: 
      path: search.xml
      field: post

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