• 大杂烩 , BLOG , WORDPRESS

从 WordPress 迁移到 Hugo

#WordPress , #Hugo , #主题 , #Weblogs.us , #Markdown

虽然在 Weblogs.us 驻留了很久，但不免还是担心万一有一天停止提供这么好的服务了，要如何快速迁移网站。
而且最近几年用静态网站写 blog 的风潮越来越流行，总想着可以尝试一把。

最开始是考察了最流行基于 Ruby 的 Jekyll 和 Octopress，然后是基于 Python 的 Pelican 和基于 node.js 的 Hexo。
选择很多，主题也很丰富，然而实在不喜欢脚本语言折腾安装部署环境的操作。
就算已经安装了环境，还要考虑更换电脑之后如何重新配置，或者做绿色便携改造。
而且站点生成效率也是重要的考量因素。

因此最后决定尝试基于 Golang 的 Hugo。
只是没想到一趟折腾下来的坑也不少，这里做个记录，方便有需求者少走弯路。

  • 安装 Hugo

在 Hugo 的 Github 发布页面直接下载安装包或自己编译就行。

  • 导出和转换 WordPress 的内容

如果你运气够好，可以安装直接导入的插件：wordpress-to-hugo-exporter 。
然后从 WordPress 的管理面板 Tool 菜单中直接导出可以用于 Hugo 的内容。

或者也可以用 JekyllToHugo 加 ConvertToHugo 的组合搞定。

然而悲剧的是，Weblogs.us 可以安装以上插件，却在导出时报权限不足：failed to open dir: Permission denied
推测与 Weblogs.us 的服务器设置有关，不想麻烦服务方帮忙，于是只能另想办法。

最终还是用 WordPress 自带的导出功能，导出所有内容的 XML 文件。
然后结合 Python 脚本 Exitwp 转换为 Jekyll 适用的内容。
注意，Exitwp 我是在 Ubuntu 下安装使用的，具体参考作者的文档。
如果遇到解析出错的情况，比如我遇到无法正确处理包含以下内容的部分：
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="http://pubsubhubbub.superfeedr.com"/>
直接删除再试就可以了。

  • 折腾 Markdown 内容

Markdown 格式默认不支持硬换行特性，也就是说，如果你在 WordPress 写文章时喜欢用换行而不是段落，那么转换为 Markdown 格式后虽然保留了换行，但转换为 HTML 展现出来的是不换行的结果，原来的换行之间替换为了空格，原来的多行内容挤在了一行。（之前有过吐槽）

虽然可以用 Pandoc 批量转换，但Pandoc 在转换为 Markdown 格式时会在下划线前增加反斜线。
而导出的 WordPress XML 中包含有文章的 slug 地址，像我就在 slug 中统一使用下划线代替空格分隔单词和词组拼音。
于是，这就导致转换后的 slug 地址不正确。
只好祭出 sed 做批量调整，在包含有指定字符串的一行中将下划线替换为短横线连字号：

sed -i "/slug:/s/_/-/g" *.markdown
sed -i "/link:/s/_/-/g" *.markdown

然后再写个 shell 脚本搞定 Pandoc 批量转换：

FILES=*.markdown
for f in $FILES
do
  filename="${f%.*}"
  `pandoc -s -f markdown+hard_line_breaks $f -t markdown -o $filename.markdown`
done

转换完之后，发现 Pandoc 将 Jekyll 导入文件头部的 YAML 格式部分的 --- 替换成了 ...，这会导致 Hugo 解析出错。
于是再用 sed 改回来：

sed -i "s/^...$/---/g" *.markdown
  • 选择 Hugo 模板

Hugo 官方站点有少量模板演示，不少是从 Jekyll 的模板改的。
美观的模板有不少，但要找到既好看又符合功能需求的就比较困难了。

比如我的要求是：

  1. 简洁风格；
  2. 支持翻页；
  3. 支持类别（category）展示；
  4. 支持响应式布局优先；
  5. 支持标签（tag）优先；
  6. 单栏布局优先；
  7. 方便自定义修改。

尝试了多个主题之后，最终决定使用这款Hello Programmer。
默认支持类别、标签、翻页，单栏布局。
使用的主页图片和 favicon 则需要自己绘制。

  • 发布到 Github Pages

因为一切以偷懒为目标，所以为了减少麻烦，申请的是用户或组织模式的 Github Pages。
操作步骤参考官方文档就成。

然而，因为主题中引用了 Font Awesome 字体，在默认限制 icon font 跨域访问的 Firefox 下会报错：
已阻止交叉源请求：同源策略不允许读取...上的远程资源。可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

最省事的方法，就是将网络字体下载下来，合并在主题中，同时更改 CSS 中相应的地址为本地相对地址。

一切就绪之后，用 Hugo 命令生成静态网页。
像这个 blog 有1000多篇文章，900多个标签，15个类别，生成的静态网站体积也有好几十 MB…
说实话，体积这么大，小文件又多，提交、拉取和通过网盘同步备份还是挺不爽的。
好在有 Golang 加持，生成的效率超高，生成时间只有1、2秒左右。

最后，使用 Github Pages 的话，RSS 订阅地址也变成了 https://ioerr.github.io/index.xml