终于也走到这一步🎉
去年就尝试迁移了,但一直没搞定 URL ,无法做到迁移前后的 URL 保持一致,也就只能作罢。今年本来还想趁着原先的主机到期前迁移的,结果一不小心拖延到又自动续费 3 年。恰好最近在另一个项目中也用了 Hugo 建站,对 Hugo 也更了解了一些,想来与其再鸽三年不如早点迁移吧。
这次的方案没有使用大家常用的 GitHub Pages,而是用了 Cloudflare Pages。他可以自动构建,就算是免费的账户也能发布到全球的 CDN,虽然国内访问速度不快,不过也不会比之前更慢了😄。而最主要的原因是 Cloudflare 提供的页面规则,可以让旧的 URL 重定向到新的地址,下面会详细说到。
这次迁移最关键的是 URL 的部分,实际上也就是之前 WordPress 欠下的债,当年的 SEO 法则里有一条是 HTML 静态页面更容易受到 Google 之类的青睐,所以 URL 后缀我加上了 .html ,然而现在这种在 Hugo 看来就是个 Ugly URLs。
迁移的教程网上很多了,官方也给出了 Hugo 迁移指南 ,这里只说说最关键的部分,为了保证 URL 像现在看到的效果一样,按照 Hugo URL 管理 ,只要在 config.toml 里加上
[permalinks]
posts = '/:year/:month/:filename'
官方文档里提到,开启 uglyurls = true 就可以给 URL 增加 .html 后缀。但这样做有个很大的问题,现在的大多数主题都是不开启 uglyurls = true 的,如果开启了会导致主题自带的一些页面失效,要全部加上 .html 才可以,比如 tags/xxx/ 要改成 tags/xxx.html。如果要改主题,虽然也是可以,但这就太兴师动众了,还是希望尽量少改动。而且已经被叫 Ugly 了,再继续使用心里也难受。所以最终方案里我还是选择让 Cloudflare 帮我解决这个问题。
最终我在 Cloudflare 里新建了一条页面规则,如果 URL 匹配 shawphy.com/20*.html,则重定向到 /20$1/。这里其实有个小的投机取巧,因为我的所有博客内容都是 2000 年以后写的,所以肯定是 20 开头,而 $1 则匹配 * 里的内容。就这样实现了 /2021/08/xxx.html 重定向至 /2021/08/xxx/ 。 至于 3000 以后就不管啦🤣
这样,就算迁移完成了🎉
至于评论。。。也只能再说了。。。
Update 2021-8-21:
有趣的是,我发现 Cloudflare Pages 文档的 Route matching 里提到:
If an HTML file is found with a matching path to the current route requested, Pages will serve it. Pages will also redirect HTML pages to their extension-less counterparts: for instance,
/contact.htmlwill be redirected to/contact, and/about/index.htmlwill be redirected to/about/.
于是乎就不再需要页面规则,而是直接使用 uglyurls = true ,部署后的页面也能各项正常访问。换而言之,最后的最后,我让 Hugo 先丑化 URL,然后再让 Cloudflare 再自动美化了一下🤣
Update 2021-8-28
当我把原来的文章从 Wordpress 导出之后才发现,原来我的担心完全是多余的。导出的md文件自带 url 的 frontmatter 字段,确保导出前后的 url 一致。但是我之后新开的文章每篇都要自己设置url我又觉得麻烦,尤其是 url 里还要设置日期。与此同时,导出的文件名都是非常规整的 2021-08-18-migrate-from-wordpress-to-hugo.md 这样,我觉得看起来很舒服,一眼就知道我这篇博客什么时候写的,还方便按照时间排序。如果这样的话就不能用前文的方式设置永久链接了,因为 filename 里额外包含了日期信息。搜索一番发现,可以这样设置。
[frontmatter]
date = [":filename", ":default", ":fileModTime"]
[permalinks]
posts = "/:year/:month/:slug"
其中第一段是让从文件名里解析日期,这样就会让日期剩余部分自动变成 :slug,以本文为例,:slug 部分变为 migrate-from-wordpress-to-hugo,然后再用后面的方式设置永久链接即可。当然还是要 uglyurls = true 的。
最后还有个小问题,虽然估计已经没什么人还在订阅我的博客了,但是我还是希望原先的 rss 订阅地址保持不变。我的 rss 订阅地址是 https://shawphy.com/feed ,但是 Hugo 里默认是 index.xml,并且无论我怎么设置都要多个 xml 的后缀,变成 https://shawphy.com/feed.xml 索性用 Cloudflare 的 Redirects 功能拉倒。在 static 文件夹下建了一个 _redirects 的文件,内容为 /feed /index.xml 301,这就算搞定了。