2015-07-28

使用Hexo搭建Github静态博客

环境：

1. Windows XP
2. Git

步骤：

1. 安装Node.js
2. 安装Hexo
3. 创建博客(初始化Hexo)
4. 创建文章本地调试
5. 配置Github
6. 远程发布
7. 支持sitemap和feed
8. 支持百度统计
9. 支持图片
10. 支持Swiftype站内搜索
11. 参考资源

安装Node.js

下载并安装，https://nodejs.org/

安装Hexo

通过命令 npm install -g hexo 安装

D:\git\hexo>npm install -g hexo

npm WARN optional dep failed, continuing fsevents@0.3.6
npm WARN optional dep failed, continuing fsevents@0.3.6
-


> dtrace-provider@0.5.0 install C:\Users\stevenxu\AppData\Roaming\npm\node_modules\hexo\node_modules\bunyan\node_modules\dtrace-provider
> node scripts/install.js

C:\Users\stevenxu\AppData\Roaming\npm\hexo -> C:\Users\stevenxu\AppData\Roaming\npm\node_modules\hexo\bin\hexo
hexo@3.1.1 C:\Users\stevenxu\AppData\Roaming\npm\node_modules\hexo
├── pretty-hrtime@1.0.0
├── hexo-front-matter@0.2.2
├── abbrev@1.0.7
├── titlecase@1.0.2
├── archy@1.0.0
├── text-table@0.2.0
├── tildify@1.1.0 (os-homedir@1.0.1)
├── strip-indent@1.0.1 (get-stdin@4.0.1)
├── hexo-i18n@0.2.1 (sprintf-js@1.0.3)
├── chalk@1.1.0 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── bluebird@2.9.34
├── minimatch@2.0.10 (brace-expansion@1.1.0)
├── through2@1.1.1 (xtend@4.0.0, readable-stream@1.1.13)
├── swig-extras@0.0.1 (markdown@0.5.0)
├── hexo-fs@0.1.3 (escape-string-regexp@1.0.3, graceful-fs@3.0.8, chokidar@0.12.6)
├── js-yaml@3.3.1 (esprima@2.2.0, argparse@1.0.2)
├── nunjucks@1.3.4 (optimist@0.6.1, chokidar@0.12.6)
├── warehouse@1.0.2 (graceful-fs@3.0.8, cuid@1.2.5, JSONStream@0.10.0)
├── cheerio@0.19.0 (entities@1.1.1, dom-serializer@0.1.0, css-select@1.0.0, htmlparser2@3.8.3)
├── bunyan@1.4.0 (safe-json-stringify@1.0.3, dtrace-provider@0.5.0, mv@2.1.1)

├── hexo-cli@0.1.7 (minimist@1.1.2)
├── moment-timezone@0.3.1
├── moment@2.10.3
├── hexo-util@0.1.7 (ent@2.2.0, highlight.js@8.6.0)
├── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.24)
└── lodash@3.10.0

D:\git\hexo>

创建博客(初始化hexo)

创建博客站点的本地目录，然后在文件夹下执行命令：

$ hexo init

[info] Copying data
[info] You are almost done! Don’t forget to run npm install before you start b
logging with Hexo!

Hexo会自动在目标文件夹下建立网站所需要的文件。然后按照提示，安装node_modules，执行如下命令：

$ hexo install

创建文章本地调试

预览本地调试模式，执行如下命令：

$ hexo server

[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

关键命令简介：

hexo n     #创建新的文章
hexo g     #重新生成站点
hexo s     #启动本地服务
hexo d     #发布到github

创建文章

$ hexo new "使用Hexo搭建Github静态博客"

在Hexo工作文件夹下source_posts发现新创建的md文件使用Hexo搭建Github静态博客.md 。

配置Github

部署到Github需要修改配置文件_config.yml文件，在Hexo工作目录之下：

# Deployment
## Docs: http://hexo.io/docs/deployment.html

deploy:
    type: git
    repository: git@github.com:<Your Github Username>/<Your github.io url>
    branch: master

注意，当前type为git，而不是github

测试Github是否好用

ssh -T git@github.com

远程发布

远程部署到Github，通过执行如下命令：

$ hexi deploy

Troubleshooting
出现错误：Error: spawn git ENOENT
解决方案：
http://blog.csdn.net/rainloving/article/details/46595559

使用github出现：fatal: unable to access: Failed connect to github.com:8080: No error
解决方案：
http://www.zhihu.com/question/26954892

使用github出现：ssh:connect to host github.com port 22: Bad file number
解决方案：
http://www.xnbing.org/?p=759
http://blog.csdn.net/temotemo/article/details/7641883

支持sitemap和feed

首先安装sitemap和feed插件

$ npm install hexo-generator-sitemap
$ npm install hexo-generator-feed

修改配置，在文件 _config.yml 增加以下内容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20

#sitemap
sitemap:
    path: sitemap.xml

在 themes\landscape_config.yml 中添加：

menu:
    Home: /
    Archives: /archives
    Sitemap: /sitemap.xml
rss: /atom.xml

支持百度统计

在 http://tongji.baidu.com 注册帐号，添加网站，生成统计功能的 JS 代码。

在 themes\landscape_config.yml 中新添加一行：

baidu_tongji: true

在 themes\landscape\layout_partial\head.ejs 中head的结束标签之前新添加一行代码

<%- partial('baidu_tongji') %>

在 themes\landscape\layout_partial 中新创建一个文件 baidu_tongji.ejs 并添加如下内容：

<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
    <百度统计的 JS 代码>
</script>
<% } %>

添加统计，参考：
http://ibruce.info/2013/11/22/hexo-your-blog/
http://www.cnblogs.com/zhcncn/p/4097881.html

支持图片

在source目录下创建images目录，然后将图片放在其中。
在文章中引用本地图片的语法例如：

![这是一张图片](/images/2005_TuoZhanXunLian.jpg)

支持swiftype站内搜索

在 http://siftype.com 注册一个帐号，按着网站引导流程就可以了。
安装 install code 代码到hexo，添加到 themes\landscape\layout_partial\after-footer.ejs，类似添加百度统计的代码。
然后回到swiftype网站对 install code 进行确认。通过会在下方弹出一条消息：

Installation successfully activated

添加robots.txt

http://blog.lmintlcx.com/post/blog-with-hexo.html

支持多说评论

首先，在多说官网 http://www.duoshuo.com 激活账户，并添加网站配置；
其次，参考多说官网的Hexo配置指南进行配置，http://dev.duoshuo.com/threads/541d3b2b40b5abcd2e4df0e9
针对landscap theme就是两步：
第一步在Hexo根目录下的配置文件 _config.yml 中添加多说配置项

duoshuo_shortname: 你站点的short_name

第二步修改themes\landscape\layout_partial\article.ejs模板，用多说推荐的代码替换之前的Disqus代码。
将

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

改为

<% if (!index && post.comments && 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:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0] 
       || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
  <!-- 多说公共JS代码 end -->
</section>
<% } %>

参考资源

http://blog.lmintlcx.com/post/blog-with-hexo.html
https://github.com/bruce-sha
http://zipperary.com/2013/05/28/hexo-guide-2/
http://zipperary.com/2013/05/29/hexo-guide-3/
http://zipperary.com/2013/05/30/hexo-guide-4/
http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/
http://www.cnblogs.com/zhcncn/p/4097881.html
http://blog.moyizhou.cn/web/search-engine-for-static-pages/
http://www.jerryfu.net/post/search-engine-for-hexo-with-swiftype.html

On The Open Way

自信人生二百年，会当水击三千里！