从WordPress迁移至Hugo全过程

我的这个小站已从WordPress迁移到了Hugo,虽然我也极喜欢WordPress这款程序,但这个博客主要记录一些文字而已,静态就足够。

转为Hugo之后,除了页面加载速度的提升,最大的好处莫过于不愁网站托管服务了。有不少支持开启静态网站托管的对象存储,还有Azure的Static Web Apps,这些服务免费的配额都足够中小网站使用。

另外,使用Markdown沉浸式写作,对于生产内容的效率也有提高。

导出内容为md文档

从WordPress转为Hugo,首先需要安装WordPress插件:WordPress to Hugo Exporter

使用该插件可以快速将文章、页面、分类和标签导出为md格式的文档,但一些内容细节还需要手动处理。我遇到的问题有:

  • 我的网站中有一些讲述HTML的内容,尖括号对会被Hugo当作HTML处理,因此需要手动将这些字符转为HTML实体;
  • 使用VSCode批量清除了type: post字段,因为我的主题用不上;
  • 带有符号(如冒号:)结尾的文字片段,Markdown的加粗语法需要在星号后面加一个空格;
  • 强迫症:img标签和超链接标签,如果带有Markdown语法不支持的特殊属性,则不会被转为Markdown语法,Hugo本身是可以渲染HTML的,但我还是使用正则表达式进行了批量转换;
  • 之前我一直没有设置过文章别名,因此写了一个脚本调用百度翻译API批量转换;

插件导出的分类保存在categories目录中,标签保存在tags目录中,文章保存在posts目录中。文章页面的分类和标签设置分别保存在categories和tags字段中。

Hugo内容结构

Hugo的content目录是用来存放分类、标签和文章等数据的。如果没有设置URL重写规则,生成静态文件时会按照content中的目录结构来生成。

默认结构为:

  • 分类:categories
  • 标签:tags
  • 文章:posts

WordPress默认的分类和标签列表页URL结构为:

https://www.beizigen.com/category/develop/
https://www.beizigen.com/tag/wordpress-functions/

所以需要修改分类和标签目录的名称,而文章页面的URL,我更倾向于以下格式:

/post/别名/

完整的content目录结构如下:

content
  category
    develop
	  _index.md
  tag
    wordpress-functions
	  _index.md
  post
    the-entire-process-of-migrating-from-wordpress-to-hugo
	  index.md
	  img.web   

由于修改了分类和标签的目录名称,文章中的categories和tags字段也要同时修改。Hugo的config.yaml文件中还要重新设置分类法名称:

taxonomies:
  category: category
  tag: tag

另外,可能还要修改主题中的categories和tags变量名。

URL处理

Hugo支持URL重写规则,在config.yaml中定义:

permalinks:
  categories: /category/:slug/
  tags: /tag/:slug/
  posts: /post/:slug

以上规则可以实现content目录中的结构和URL结构不必一致,但这样会导致一个问题:Hugo仍然会生成categories、tags和posts目录,三个目录中都会有一个index.xml文件,其中categories和tags目录还会有一个index.html,用于显示所有分类/标签。

因此,我修改了content的结构,参考之前的“Hugo内容结构”部分说明。

重新定义content目录结构可能比较麻烦,但这样的好处是可以得到统一的路径,访问如下页面也可以得到合理的内容:

https://www.beizigen.com/category/
https://www.beizigen.com/tag/

最终的config.yaml为:

canonifyURLs: true
taxonomies:
  category: category
  tag: tag
permalinks:
  post: /post/:slug/
  page: /page/:slug/
  category: /category/:slug/
  tag: /tag/:slug/

SEO处理

我的旧站文章URL格式为:postid.html,虽然Hugo支持开启“丑陋”的格式,以实现这种.html结尾的网址。但仔细想想,这个后缀似乎也是多余的,于是直接使用/post/别名/的形式。然后在Nginx设置了301重定向规则,例如:

rewrite ^/1.html(.*) https://www.beizigen.com/post/wdcp-v2-upgrade-v3-tutorial/ permanent;

还需将所有旧文章URL和新URL对写入txt,在百度搜索资源平台的网站改版功能中提交,这样可以降低对网站的SEO影响。

至于文章中的内链,我是编写脚本来批量替换的。

图片的安排

WordPress的文章图片默认保存在uploads目录中,以年月日的形式组织。现在,我认为直接将图片放在文章目录里更适合。

手动拷贝工作量会比较大,我是编写了一个脚本使用正则表达式来批量处理的。

文件的上传

生成的静态文件可以打包上传到主机,但以后更新了内容手动上传的话就比较麻烦了,可以使用rclone来自动同步,参考:使用Rclone增量上传Hugo静态网站