我是来吹 Cloudflare Pages 的

迁移博客到 Cloudflare Pages

薅羊毛,就要薅到底

Cloudflare 介绍页面

突然发现 Cloudflare 的新静态网页托管服务结束了内测,变得可用。考虑到现在站点是 Github Pages + Cloudflare CDN 搭建,于是干脆一不做二不休换成 Cloudflare Pages 算了。 没有中间商赚差价 我也不用粗暴的在每次 GitHub Actions 之后做一次缓存清除(以免 Cloudflare 缓存了旧的页面而没有及时更新)。

切换到 Cloudflare Pages 整体上很容易,在 Pages 页面点击那个大大的黄色的 Get Started 按钮,按照指引授权 GitHub 权限、选择构建使用的仓库、最后设置构建的命令就完成了迁移... 好吧,这是最简单的情况,适用于你的站点只需要最简单的命令即可构建时,例如下表中的框架:

框架构建命令输出目录
Angular (Angular CLI)ng builddist
Brunchbrunch build --productionpublic
Docusaurusnpm run buildbuild
Eleventyeleventy_site
Ember.jsember builddist
Gatsbygatsby buildpublic
GitBookgitbook build_book
Gridsomegridsome builddist
Hugohugopublic
Jekylljekyll build_site
Mkdocsmkdocs buildsite
Next.js (Static HTML Export)next build && next exportout
Nuxt.jsnuxt generatedist
Pelicanpelican $content [-s settings.py]output
React (create-react-app)npm run buildbuild
React Staticreact-static builddist
Slate./deploy.shbuild
Sveltenpm run buildpublic
Umiumi builddist
Vuenpm run buildpublic
VuePressvuepress build $directory$directory/.vuepress/dist

我想要运行自定义脚本!

那你就放一个自定义脚本在你的仓库里面呗。构建命令就是 ./build.sh, 记得加上 +x 权限。你的脚本任务就是把网页源代码变成站点的文件放到特定文件夹,在 Pages 设置里面你需要指定输出文件夹的路径。

相对于使用 GitHub Actions 部署有什么好处/坏处?

一方面 GitHub Actions 更快,Cloudflare Pages 的服务有时候会莫名其妙的卡几分钟到几十分钟在 正在初始化构建环境 阶段。但是 Cloudflare Pages 能优雅的处理 Pull Request 并且提供预览页面

总之 Cloudflare 家大业大,并且是专门做网络服务的,做网页托管 应该 不会太菜吧。

另外 Cloudflare 的那个 Proxy 对于他们自己托管的页面不好使,可以看 discord 聊天记录,但是之后会修。还有些别的可能的坑可以看看已知问题

关于网页跳转

虽然 CloudFlare Page 提供一定的跳转功能,但是这个跳转不能跨域名。于是想要做一个 www.yanqiyu.infoyanqiyu.info 的跳转就需要借助 Worker 来完成。新建一个 Worker 填入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const base = "https://yanqiyu.info"
const statusCode = 302
async function handleRequest(request) {
const url = new URL(request.url)
const { pathname, search } = url
const destinationURL = base + pathname + search
return Response.redirect(destinationURL, statusCode)
}

addEventListener("fetch",
async event => {
event.respondWith(handleRequest(event.request))
}
)
记得把 base 改成你的域名。然后设置 route 把你想要跳转的域名指向这个 Worker 就成了。