使用Cloudflare Pages部署静态网站
文章目录
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哈希值不一致。