使用 Hexo 搭建 GitHub Pages

(Updated: )
, , ,

2009 年 Zigzag 就教了我怎么用 GitHub Pages 写博客 —— 使用 Markdown 撰写、转成 HTML、发布到 GitHub。当时觉得很酷，可后来一直没写 … 现在他去天堂写代码已经快满 4 年了，为了避免被我对不起的 Zig 带走，上周末终于搭起自己的博客 iwill.im。

看到我订阅的博客多半是用 Octopress 搭建的，所以认定这是个高大上。但是貌似是 XCode 升级到 5.1.1 导致 Ruby 的一些东西不正常了，一直安装失败，GitHub Pages 推荐的 Jekyll 也一样。折腾大半天，非 Ruby Fan 实在无法坚持了，装 B 不成、最终选了 Hexo [hekso] - A fast, simple & powerful blog framework, powered by Node.js，与前者的使用很相似。不熟悉 JavaScript 也没关系，只要不改皮肤基本不会碰到 JavaScript。

安装 Node.js & NPM

首先建议安装 Homebrew - The missing package manager for OS X。感觉叫 missing 的都是极品，比如 TextMate - The missing editor for Mac OS X。

1
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

安装 Node.js - 服务端的 JavaScript，以及 npm - Node Packaged Modules。npm 是前者的 Package Manager，会随 Node.js 一同安装。

1
brew install node

Hexo

1
2
3
4
npm install hexo -g # 安装 Hexo
hexo init iwill.im && cd iwill.im # 初始化 Workspace，名字随意
hexo generate # 从 Markdown 生成静态文件，初始化时会生成一个 Hello World
hexo server # 启动本地 Server

可以访问 http://localhost:4000/ 查看效果，修改 Markdown 无需重新 Server。

Hexo Workspace 的 目录结构 如下，其中 _config.yml 是 配置文件：

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

建议随时备份 Hexo Workspace，GitLab、GitHub 或者 Dropbox，这有 Hexo 的 .gitignore。

Hexo 的命令也很简单，可以通过 hexo help、hexo help command 查看帮助，下面是最常用的几个命令：

1
2
3
4
hexo n [draft] "blog-title" [-s "file-name"] # n - new，新建博客/草稿
hexo p "blog-title" # p - publish，发布草稿
hexo s -d # s - server、-d - draft，启动本地 Server，并预览草稿
hexo d -g # d - deploy、-g - generate，从 Markdown 生成静态文件，然后发布到 GitHub Pages

更多参考 Hexo Documentation。

Hexo 插件

Hexo 天生支持 DISQUS 的评论功能，在 _config.yml 中设置 disqus_shortname 即可。

我现在用到的插件有 Util、Local Image、Deployment、Feed，安装命令：

1
2
3
4
npm install hexo-util --save
npm install hexo-local-image --save
npm install hexo-deployer-git --save
npm install hexo-generator-feed --save

更多参考 Hexo Plugins。

Hexo 皮肤

Hexo 的 皮肤不多 现在已经很多了，我用的是 Light Cactus - Dark，非常简洁，内置另外 White、Light 和 Classic 三款配色也都很美观，还有数十款代码高亮可选。

皮肤有单独的配置文件 themes/cactus/_config.yml，可以添加页面、链接，例如 About、RSS，并且还可以展示 GitHub 项目、Disqus 评论等，更多功能详见 Features。

更多参考 Hexo Themes。

GitHub Pages

现在本地的博客已经搭建起来了，下一步是发布到 GitHub。

  1. 在 GitHub 上 创建一个 repo，格式是 username.github.io。

  2. 打开 Hexo 配置文件 _config.yml，设置博客 url 和 deploy 相关参数：

    1
    2
    3
    4
    url: http://iwill.github.io/
    deploy:
      type: git
      repo: https://github.com/iwill/iwill.github.io.git

  3. 安装 hexo-deployer-git：

    1
    npm install hexo-deployer-git --save

  4. 发布静态文件到 GitHub：

    1
    hexo d

    访问 https://github.com/iwill/iwill.github.io 可以看见刚刚发布上去的静态文件，访问 http://iwill.github.io 就可以看见博客了！

更多参考 GitHub Pages、Hexo Deployment。

使用个性域名

没有域名可以去 https://domai.nr/ 找一个注册，之后做如下设置：

  1. Hexo 的配置文件中的 url 设置为完整的博客地址，如 http://iwill.im/。

  2. 在 Hexo Workspace 的 Source 目录下创建名为 CNAME 的文本文件、写入域名，如 iwill.im。

  3. 然后执行 hexo d -g 将上面设置发布到 GitHub Pages 上。

  4. 在域名服务后台设置域名跳转，注意二级域名 (如 iwill.im) 和三级域名 (如 www.iwill.im、blog.iwill.im) 的设置有所不同，需仔细阅读下面说明进行设置、校验：
    https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages#subdomains
    https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages#apex-domains
    这是我的设置：
    image

写博客

在文章中插入 <!-- more --> 可以将前面部分生成摘要，否则默认显示全文；

到这才发现，写博客才是最困难的 …