Featured image of post 从Wordpress迁移到Hugo简要记录

从Wordpress迁移到Hugo简要记录

今天我终于下定决心要把自己这运行了12年的Wordpress博客迁移到Hugo,即便规模很小,但将一个运行了超过十年的PHP博客迁移到纯静态写作框架绝对不算方便的事。那么我现在来讲讲在这么麻烦的情况下还要迁移的理由,以及这个过程的记录。(足足牺牲了一个周末呢!)

这个小博客是2010年年底建成的,那时候的我还是个连网站DNS都弄不明白的小白初中生。结合当时的流行度、易用性以及出现问题寻找答案的方便程度,Wordpress无疑是建站最优解,而这一用就是12年。

当前我的Wordpress博客是托管在维基主机的香港虚拟主机里的,综合性能都很不错,且价格极为便宜(90元/3年),但由于虚拟主机共享IP的特性,这台位于香港的虚机时不时会因为受到攻击而离线,稳定性一般。除此之外就是Wordpress作为老牌PHP+MySql框架的最大局限性:臃肿、缓慢,即便我的虚拟主机提供商使用LiteSpeed作为Http服务器,可以结合LiteSpeed Cache这种高性能缓存插件提速,且我也使用了对象存储和CDN加速图片加载,但实际的网页加载速度仍不尽人意。

诚然,时至今日Wordpress依旧是是一个优秀的建站工具:入门门槛低、扩展性强、主题多(不然我也不会用这么久),但兴许是年纪越大越只喜欢纯粹的原因,迁移为静态博客的想法越来越占主导——直到今天我正式决定迁移并将新的Hugo站点上线。

先前的失败尝试

Ghost

实际上这不是我第一次打算迁移为其他博客框架的尝试,数年前Ghost流行时我就跟风尝试过,但是它并不是如Hexo、Hugo等框架一样的静态网站生成器(Static Site Generator, SSG),而是和Wordpress差不多的动态博客框架,只不过它是基于Node.JS和SQL的,而且确实比Wordpress轻快。但是这就有了一个更大的问题:如果博客使用NodeJS环境的话,我还必须额外使用一台VPS作为服务端,完全不如Wordpress方便,加之我对NodeJS完全不熟悉,所以就没有使用下去,甚至都没有动过迁移数据的念头。

好在我先前的决定是正确的,Ghost的操作至今被不少使用者所诟病,如至今都没有搜索功能、原有插件系统下线、主题开发体验糟糕……等等,可以看这篇文章:Why I don’t like the Ghost blogging platform anymore (nehalist.io)了解详细。

Hexo

Hexo至今都非常流行,使用Next主题的使用github.io二级域名的博客随处可见。我一度曾很想迁移到Hexo,但是要从Wordpress这种PHP博客框架迁移到Hexo这样的静态网站生成器并非易事——尤其是习惯上,受限于当时对Markdown语法的熟悉程度和水平、时间限制,迁移的想法一直没能实现,或者说因为嫌每次写文章都要自己创建.md格式文件的纯手动操作太麻烦而放弃。

下定决心

语法简单的Markdown非常适合用于写博客,键盘长时间不离手确实有助于思绪的连贯性,而非强烈依赖鼠标修改版式打算思考,用起来非常顺手。我也因此购买了正版的Typora,但若使用Wordpress配合该软件写博客的话就显得十分麻烦,不如直接使用Wordpress网页后台的古腾堡编辑器。

其二,Hugo、Hexo这类框架可以直接使用Git托管到Github仓库内,再使用Vercel或Netlify等服务发布,对于个人博客而言就算是免费且速度相当不错。

最重要的是,Wordpress的速度,特别是网页后台的速度一直在挑战我的耐性。直到今天我终于决定要迁移成纯静态博客了。

准备迁移

整理已有文件

第一步是整理已有的文章,因为Wordpress是有自己的后台的,(批量)管理分类和标签都比较方便,因此在其后台完成这些工作比迁移后续修改方便一些,顺便还能看看哪些文章可以直接删除掉。先前就提到过,我的这个博客是初中的时候就建起来的,这12年来的流水账并不少,有很多文章我现在回头整理翻看的时候简直头皮发麻,尴尬得都能挖个地道回国了——而且这么多年来我还一直任由那些内容公开在互联网上——总之,虚拟主机这边做好了全站备份后直接在Wordpress后台里面把看着尴尬的内容全删了,200多篇博客直接降到了不足50篇,也算是变相减轻迁移工作量吧。(乐。

使用迁移工具并整理

文章初步整理好后可以进行第二步,使用迁移工具进行导出。安装并使用wordpress-to-hugo-exporter这个插件,可以将自己的Wordpress网站内容(博客文章和页面文章)导出为带有Front Matter元数据的Markdown文档。

但是这个导出工具并不是非常好用,即便是导出好后,部分文章仍然残留有大量的HTML标签,不能直接交给Hugo使用。这时候就要进行第三步,检查并更正导出好的Markdown文件。

我在清理、替换HTML标签的时候直接使用的是Visual Studio Code内置的跨文件正则表达式查找替换工具。使用VSCode打开导出得到的文件夹,使用快捷键CTRL + SHIFT + H并打开正则表达式开关进行查找替换。这时候你可能需要复习一下正则表达式语法,根据自己的情况删除替换HTML标签。

比如我在这次迁移过程中最常用的莫过于将<img>标签转换为Markdown,可以查询<img.*?src="($1)".*?>($2)</img>并替代为![$2]($1),同理最常见的<a>标签也可以用类似办法清除,除此之外还有代码高亮使用到的部分<pre>标签,也要根据情况替换为代码块```或引用代码格式``

由于每个人的博文都不尽相同,加之我自己的正则表达式语法水平极其有限,建议迁移时自行依照实际情况并参考语法慢慢替换,而且最后还是需要一篇一篇地检查是否有遗漏。检查时可以考虑使用Markdown工具的所见即所得模式查看排版后的效果,可以直观地看到语法是否还有问题。

整理的过程确实比较痛苦,但为了迁移到静态网站,这一切还是值得的。

安装和配置

一切都准备得差不多后可以先在本地电脑里安装Hugo框架了,直接参考官方文档更实在:Quick Start | Hugo (gohugo.io)

接着再把导出好的文章放到指定位置:文章放进content/post里、页面文章放进content/page里,并根据自己安装的主题的文档进行相关配置、完善网站的config文件。

部署

Hugo这类静态网站生成器的一大优势就是可以近乎一键部署。把整个博客作为一个私有仓库上传到Github进行托管,然后使用Netlify或Vercel之类的服务直接进行部署即可。

需要注意的是,Vercel部署Hugo时默认给的版本很低,可能会在部署时出错,可以在部署页面添加一个环境变量HUGO_VERSION,值填写当前最新版的版本号,如0.91.2

部署完成后,崭新版本的古董博客终于上线了!

——哦对了…这时候我们还没有配置评论,因为这种生成器是不可能自带评论系统的,需要借助其他的评论框架。

评论迁移和使用

我的Wordpress在删除文章之前有2000多条评论,即便是现在删除得只剩下不到50篇时也有500多条,如果直接舍弃了还是非常可惜的。考虑到通用性,直接使用Disqus无疑是最优解。

Disqus本身就是支持Wordpress的,在Wordpress上安装插件,直接在后台将所有评论导入进Disqus即可完成评论的迁移,接下来只需要在Hugo处启用Disqus评论即可,非常方便。

需要提醒的是,Disqus无法直接在中国大陆使用,应该考虑用SukkaW/DisqusJS这个项目替代,且对Disqus的API进行反向代理(通常各种国人写的主题都会考虑到这些,并直接集成该项目)。

收工上线🎉

经过一天的努力,终于算是把所有的工作都做完可以上线了,在本地和线上都测试通过后,修改DNS配置指向新的CNAME等待解析,新的基于Hugo的博客终于重新上线啦!

果然纯静态就是快呢~

comments powered by Disqus
Built with Hugo
主题 StackJimmy 设计