hexo搭建静态博客以及优化

首先，这不是一篇详尽的完整的教程，只是记录大致的hexo建站流程以及自己折腾的过程。因为网上关于hexo的教程已经太多，一搜一大把。但是我还是推荐英文尚可的直接阅读hexo作者的文档，因为很多教程也只是一知半解，还是看作者文档来的比较彻底。另外，hexo源代码开源，实在不行还可以去hexo的github去提issue。

折腾的成果就是你现在看到的这个博客，所以这里本身就是一个demo。^_^

p.s. hexo作者据说是台湾的一名在校学生…… T_T 努力吧少年……

建站流程

1. 安装node.js以及git

2. 安装hexo

$ npm install -g hexo

3. 部署github pages

3.1 github建立repo

以下二选一。

  • 建立一个 username.github.com 的repo，username为你的github用户名，每个用户只能有一个这样的repo，则直接发布到master分支即可。
  • 建立一个项目repo，发布的branch是gh-pages.

自定义域名

如果你用自定义域名的话，github pages需要你建立一个名称为CNAME的文件，里面放入你的域名地址。如我的CNAME文件.

因为每次deploy的时候hexo都会重新生成文件，所以直接加在github是不好使的，这个文件需要放在 hexo folder/source文件夹根目录下。

3.2 hexo配置deploy信息：

修改在blog根目录下的_config.yml，添加repo地址：

deploy:
  type: github
  repository: https://github.com/[username]/[reponame].git

References:
[1] github pages help
[2] hexo Deployment Docs
[3] 想用BAE的可以看这篇：在BAE上使用hexo搭建博客

4. hexo基本操作

  • 新建博客

    $ hexo init <folder>

在该目录下就建立了你的hexo blog.

  • 新建文章

    $ hexo init <title>

会在source/_post新建一个名为 title.md 的文章，用喜欢的编辑器打开就可以用markdown语法写文章了。

  • server

    $ hexo server

就可以在 localhost:4000/ 查看你的博客。

  • generate & deploy

    $ hexo generate
$ hexo deploy

或者（以下这俩效果是完全一样的）

$ hexo generate --deploy
$ hexo deploy --generate

折腾

插件 plugins

  • rss生成 hexo-generator-feed
  • sitemap hexo-generator-sitemap

添加插件的基本操作是：

$ npm install <plugin-name> --save
$ npm update

然后修改blog根目录下的_config.yml，添加：

plugins:
- plugin-name

插件部分详见：https://github.com/tommy351/hexo/wiki/Plugins

组件 widgets

  • 关于 about me [1]
  • 日历 calendar [2]
  • 返回页面顶部 Scrolltop [2]
  • 微博秀 weibo show [3]

其他调整

  • 去掉addthis和Disqus
  • 添加多说 [1]
  • 添加百度统计 [1] 和Google Analytics
    原先一直用GA然后现在两个都用是打算对比一下。。
  • 自动附上博客文章源码的github地址
  • 添加social icons
  • 样式微调
  • 字体微调 [1]

优化调整参考了：
[1] jim-liu的优化版light theme
[2] 净土howiefh
[3] 微博开放平台

其他

源代码管理

由于我用的github pages所以发布是会发布到gh-pages分支，而我用这个博客repo的master分支管理整个博客的源代码。这样就可以轻松的实现不同电脑的同步了。
本博客的源代码：https://github.com/wileam/code/

发布显示更多

在你觉得适合的位置插入

<!-- more -->

就会将之前的部分生成摘要。点击”阅读全文“才会看到全文。

YAML

hexo文章的头部文件是用YAML来写的，比如文章要同时标记多个tags，就需要用

tags: [tag1, tag2]

或者

tags:
- tag1
- tag2

这样的语法来写，详见YAML的wikipedia.

ejs和stylus

hexo是用的ejs和stylus。同样如果习惯用LESS之类也可以装相应的plugins.

ejs是embedded javascript，从js文件中抽取出html结构，使代码结构清晰简洁易读。(其实我还不太明白所以没怎么改ejs……)
文档存备用：https://code.google.com/p/embeddedjavascript/w/list

stylus是和less/sass类似的一个css processor，比原生的css更简洁一些。
同样文档存备用：http://learnboost.github.io/stylus/

markdown

参见markdown syntax，或者我之前的博客，markdown语法

疑似bug

如果更新了css文件，那么需要把public的css文件删除，然后

$ hexo deploy --generate

这样才会重新生成新的文件。我试了好几次都是这样，不知道是不是bug……

本文源码：https://github.com/wileam/code/blob/master/source/_posts/build-a-hexo-blog-and-optimize.md