把 Hugo 网站从 Vercel 搬到 Cloudflare Pages
目次
起因 #
本 Hugo 网站原本使用 Vercel 构建,但是它只获取 Git 源代码仓库的前十次提交1,多数文章的更新时间会出错,变成最新提交的时间。于是我就改用支持克隆整个仓库的 Cloudflare Pages。本站的 RSS 订阅文件消耗流量大,搬到无限流量的 Cloudflare Pages 也比较合适。本文发布时本站已搬到 Cloudflare Pages 超过一个月,一切正常。
搬迁的主要步骤包括:写重定向配置文件、解决 Cloudflare Pages 导致的问题、创建 Cloudflare Pages 应用、删除 Vercel 项目。
重定向配置 #
Cloudflare Pages 的重定向配置写法和 Vercel 不一样。参考 Redirects · Cloudflare Pages docs 写一份。
|
|
|
|
在根目录创建 404 页面 #
本 Hugo 多语言网站的 defaultContentLanguageInSubdir = "true"
配置导致构建网站后根目录没有 404.html 文件,/en/
和 /zh-cn/
才有。此时 Cloudflare 认为网站是单页应用,用户访问 /non-existent-page/
这样的路径网页就会跳转到 /
并且返回 200 状态码。这是错误的行为,所以要让 Hugo 构建后根目录有 404.html。解决方法请看 Create Top-Level 404 Page for a Multilingual Hugo Site,我目前使用了自己写的 404 页面。
去掉缓存规则 #
之前在 Cloudflare 设置了缓存 RSS 文件,现在不需要这些规则了,删除之。
自定义样式使用 SCSS 格式 #
Cloudflare 会缓存 custom.css
,改用 SCSS 格式就不会出问题。
创建应用 #
使用以下配置创建 Cloudflare Pages 应用,然后配置域名。
Build settings | |
---|---|
Framework preset | None |
Build command | git fetch --unshallow && hugo |
Build output directory | public |
Environment variables | |
---|---|
HUGO_VERSION | 0.99.1 |
具体操作请看教程:
Cloudflare Pages 的缺点 #
- 重定向不支持正则表达式
- 一个仓库只能导入一次
- 不支持配置文件
重定向例子 #
- https://cyrusyip.org/index.xml
- https://cyrusyip.org/zh-cn/post/index.xml
- https://cyrusyip.org/about
- https://cyrusyip.org/subscribe
- https://cyrusyip.org/donate
- https://cyrusyip.org/post/2020/10/02/ubuntu-compile-goldendict/
- https://cyrusyip.org/post/2020/11/01/use-fcitx5-in-rstudio-on-kubuntu20.10/
- https://cyrusyip.org/tags
- https://cyrusyip.org/tags/life
- https://cyrusyip.org/categories
Configuring a Build | Vercel Docs: When you make a deployment, Vercel builds your project. During this time, Vercel performs a “shallow clone” on your Git repository using the command
git clone --depth=10 (...)
and fetches ten levels of git commit history. This means that only the latest ten commits are pulled and not the entire repository history. ↩︎