使用 Hexo 搭建 GitHub Pages

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 helphexo 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 即可。

我现在用到的插件有 UtilLocal ImageDeploymentFeed,安装命令:

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

模版有单独的配置文件 themes/light/_config.yml。在这里可以添加页面、链接,比如 About、RSS,还可以设置 AddThis 以便分享、传播。

需要注意的是 Light 默认使用的是 Facebook 的评论,会与 Hexo 里内置的 DISQUS 冲突,导致两者都无法正常显示。鉴于墙的存在,建议把 themes/light/_config.yml 中的 Facebook 相关的设置注释掉,而且 DISQUS 更好用。

更多参考 Hexo Themes

GitHub Pages

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

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

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

    1
    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 PagesHexo 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.imblog.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 --> 可以将前面部分生成摘要,否则默认显示全文;

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