从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
wordpress-migration-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静态网站。