从WordPress迁移博客到Hexo

发布于：2015-05-23

为什么迁移？

实际上，迁移博客的决定大半年前，大概 2014 年 7 月份就已经决定了。当时考虑到托管在 Github 上面的静态博客有这么几种优势：

采用 Markdown 方式书写，可采用任何自己喜欢的编辑器，含有代码块，书写方便，甚至以后写数学公式也可以采用 TeX 语法。当然，WordPress 也可以，不过总觉得安装插件不太直接。
Github Pages 免费，可以节省每年 200 大洋的虚拟主机费用，且托管在 Github 很放心。
静态页面速度快，不过这个现在体现不出来了，国内访问 Github Pages 网速慢。
不得不说我受到了流行趋势的影响，看到很多人采用了这种方式，我就想尝试下。

大致就是以上几点原因使我最终决定迁移博客到 Github Pages。

选择静态博客系统

一开始，我先听说的 Jekyll，在尝试时，发现要安装自己不熟悉的工具，因为它是 Ruby 写成的，而且我当时用的 Windows 系统，最终闲它麻烦而放弃。然后就搜索了一些其他的静态博客，发现各种语言写的都有，最后发现了 Hexo 这个用 NodeJS 写的，而且是一个台湾人写的，发现已有不少人在用。当时自己也有学习一些 NodeJS 的知识，想着用了 Hexo 也可以顺便学习下别人怎么写的，于是就这样决定选择 Hexo 了。

有点后悔选择 Hexo 了

我感觉 Hexo 有几点不足，纯属个人拙见。

主题质量低

我查看了所有的主题，发现大部分简直就是半成品，质量太低了，只有几个还可以。似乎缺乏用心的，且有设计能力的人来写 Hexo 主题。刚开始时，主题都只给主题源码的 Github 链接，没有截图，所以选择成本很高，有些链接失效了也没人管理。当然，Hexo 几乎只有一个人在管理所有的事情，所以很难忙得过来的，得多人协作。

早期代码组织乱

我只读了一些 2.8.* 时代的代码，感觉读懂代码好吃力，打断点调试都得同时打开很多个文件。读了一两个星期，才弄懂了一点点，当然这和我水平低也有很大关系。不过还是学到好多小的知识的，到 3.* 时代发现代码进行了大的重构，已经放弃阅读了。

其他 N 多小问题

只针对 2.8.3 版本，3.0.0 以后不太了解

不支持一篇文章多个分类目录，我在 WordPress 用到了一篇文章多个分类目录，结果 Hexo 不支持，我不得不把所有文章都变成一个分类目录。有人解释说可以使用标签，但是我认为分类属于相对固定的，而标签术语文章的几个核心关键词。另外，前端一些文章经常同时涉及到 CSS 和 JavaScript，这就决定一篇文章属于两个分类目录是很合理的，总不能都概括为前端吧。
Markdown 代码块必须使用四个空格缩进语法，用 '`' 就不行，这还得自己写脚本转换已有的文章。
使用 highlightjs 的 theme 时，需要修改 CSS，去掉 'hljs-'，不知道为什么 Hexo 默认这样选择，且没法配置。
分类目录list_categories()没法控制汉字排序，而且没法像 WordPress 方便获取一个目录列表，然后自己定制排序。
README.md 文件的渲染和删除，现在好像可以配置路径来过滤了。
文章更新日期当成创建日期，结果首页文章顺序发生了变化，需要自己手动日期。

写一个 Hexo 主题

一开始规划时，什么 Off-Canvas、响应式、社交网站链接、自定义字体、动画效果、兼容到IE8等都整上去，后来实际做时，发现每个都要花不少时间。而且很长时间没有写过什么 CSS，导致水平下降，写起来不熟练啊。

做有关设计方面的决定时，内心很纠结，比如超链接四种状态下的颜色选择、标题或内容的颜色、侧边栏的布局等，每次写主题时感觉这些好难做决定。主题的大致颜色是参考的原来的主题配色，网站整体布局参考了其他人的，而且这种布局不少见。每写一个主题，都被自己渣一样的设计能力虐心，也越来越倾向于不要这些布局了，就文章列表就行了。

另外，花时间的还有要了解 Hexo 写主题的一些 Helpers，主题的代码结构等，幸好是参考官网的一款主题，自己从头开始写更麻烦了。

虽然每次写博客主题时，感觉特别虐心，不过当渐渐完成之时，都会感觉比上一个主题有进步。另外，写博客主题必然要写文章的 CSS 样式，文章在很多网站都会呈现，写好这个很关键，要注意很多细节或者说临界情况。

将 WordPress 的内容迁移到 Hexo

首先可以按照官网文档来操作，不过之后还有一些工作要做：

所有的超链接确保正确，包括图片、DEMO 等的链接；
代码块高亮，以前用的 WordPress 一个插件，然后自己用 Node 写个脚本替换下或者使用 Sublime 自带的正则替换功能；
修复在转 Markdown 时的错误，确实有一些要自己调整，主要是加粗、列表；
有发现了不少文章中的错别字，顺便修正了；
DEMO文件、图片文件、附件等目录要放到所采用主题的source目录下；

部署到 Github 及配置自定义域名

Github Pages 分两种：User or organization site 和 Project site。我见到的很多人的博客都是前一种，而且前一种设置及配置自定义域名比较简便，跟着官方的文档和帮助说明就可以了。但是，有一个问题，所有其他项目的 Github Pages 页面的域名也会都跳转到你博客的域名下面，成为一个目录，如：

http://username.github.io/someproject

跳转到

http://www.yourblogdomain.com/someproject

这不是我想要的结果，我不希望博客域名影响到 Github 上面的项目链接。所以，我只好采用后一种：Project site，这种设置起来也难一点儿，主要是配置自定义域名。

设置步骤（我是采用 DNSPod 来解析域名）：

为自己的博客创建一个 Repository，并创建gh-pages分支；
在 DNS 服务商处配置自己的 DNS，需要添加一条 A 记录和一条 CNAME 记录：

添加 A 记录，查找你 Github 子域名地址的静态 IP 地址：

    $ nslookup alex1990.github.io
    Server:		211.162.96.1
    Address:	211.162.96.1#53

    Non-authoritative answer:
    alex1990.github.io	canonical name = github.map.fastly.net.
    Name:	github.map.fastly.net
    Address: 103.245.222.133

A 记录主机记录字段选择@，记录值（填写IP地址的地方）填写使用nslookup查找到的地址，此处为：103.245.222.133。

添加 CNAME 记录，是为了能解析www域名。主机记录字段选择www，记录值填写自己的 Github 域名，此处为alex1990.github.io。

在 Repository 根目录下创建一个文件CNAME，其内容www.xiaocaoge.com，带www时，Github 会将xiaocaoge.com 跳到 www.xiaocaoge.com，可根据自己需要选择带或不带，将创建的文件 Push 到 Github 上面，等待几分钟以便 Github 刷新域名的跳转。

另外要注意的是，如果先前建立过 User Pages，则所有的 Project Pages 域名仍然跳转，此时需要更新所有项目的gh-pages分支，即提交来刷新缓存。如果还不行，可尝试下面措施：

清理浏览器缓存
chrome://net-internals#dns 点击clear host cache

在实际的配置过程中，我花了两个晚上，看了十几个网页的教程，试了 N 多次，看了一篇文章 Custom Domain With Github Pages 才尝试成功。