1. 前言

这个博客迁移到Cloudflare的Pages已经有一段时间了,Pages在本月从Beta状态切换为Release,可以稳定使用了。这里记录一下部署经历,为以后的部署提供参考。

2. 自建 vs Github Pages vs Cloudflare Pages

这里以搭建静态博客网站为例,三者对比如下:

类别 自建 Github Pages Cloudflare Pages
所需资源 域名、VPS/Web主机 Github账号 Cloudflare账号、Github账号、域名(可选)
优点 可高度定制化 免费二级域名,自带HTTPS,高知名度 免费二级域名、CDN+边缘加速、自动管理TLS证书
缺点 有技术门槛,需要自行优化VPS、网络、配置HTTPS 不可自定义域名,国内访问速度慢,容易被墙 属于应用托管,高度依赖平台

静态网站只需要一个网页服务器供访问即可,博客重点应该放在内容产出上。对于笔者而言,因为想要使用自己的域名,同时具备TLS 1.3、HTTP2支持,还有更快的网络访问速度,所以在优先级上:Cloudflare Pages > 自建 > Github Pages。。

之前的方案是自建+Cloudflare CDN加速,即:

用户 -> Cloudflare CDN缓存 -> 用户服务器

无论如何优化,都无法避免CDN服务到用户服务器的延迟,不同地区访问的延迟还是会存在比较大的差异。Cloudflare Pages提供了另一种玩法,将用户的动态前端应用直接部署在边缘网络上,即:

用户 -> Cloudflare边缘节点

理论上是最优的方案了。

3. 部署Cloudflare Pages

Pages的部署流程是:关联Github账号、配置构建参数、自动拉取构建并部署。

自定义域名需要从已托管的域名中选择。

3.1 创建项目

可关联多个Github账号,创建项目时会拉取选中的Github账号中的所有项目供选择,项目创建成功时会生成一个二级域名供访问。

3.2 项目配置

  • 选择框架:选择使用的前端框架,如vue、hugo等,还有许多可选的框架
  • 构建命令:生成Release版本静态网页的命令,使用hugo时只需填写hugo
  • 输出目录:构建命令生成的网页所在目录,hugo默认使用当前目录下的public子目录
  • 根目录:运行构建命令的项目根目录
  • 环境变量:构建时使用的环境变量,如HUGO_VERSION,可指定使用的hugo版本

3.3 自动化构建与部署

Pages会监控项目变动,默认使用master作为生产分支。每当有新的提交产生时,便会自动拉取项目变更,构建生产版本并执行部署,每次构建都会产生一个三级域名。

所有分支上的提交都会产生构建,免费版本的Pages存在500次/月的构建限制,因此需要注意不要产生大量的提交。

3.4 自定义域名

自定义域名仅限于已经在Cloudflare上托管的域名,配置成功后会自动生成边缘证书和CNAME解析。

3.5 禁用Auto Minify

静态博客框架自动构建生成的JS、CSS、HTML等资源启用完整性校验时,需要禁用速度 -> 优化 -> Auto Minify中的设置,避免网页报错:

Failed to find a valid digest in the 'integrity' attribute for ...

这种错误是Cloudflare压缩静态资源,导致浏览器校验文件时发现SHA-256哈希值不一致。