从WordPress迁移博客到Hexo

为什么迁移?

实际上,迁移博客的决定大半年前,大概 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 来解析域名):

  1. 为自己的博客创建一个 Repository,并创建gh-pages分支;

  2. 在 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

  1. 在 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 才尝试成功。