虽然在 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 的模板改的。
美观的模板有不少,但要找到既好看又符合功能需求的就比较困难了。\
比如我的要求是:
- 简洁风格;
- 支持翻页;
- 支持类别(category)展示;
- 支持响应式布局优先;
- 支持标签(tag)优先;
- 单栏布局优先;
- 方便自定义修改。
尝试了多个主题之后,最终决定使用这款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