使用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哈希值不一致。