白嫖 CloudFlare 服务之 Pages

CloudFlare Pages 与 CloudFlare Workers 类似，都属于无服务器计算平台。Workers 更适合作为云函数使用，而 Pages 则更适合作为静态网站使用。

CloudFlare Pages 可以和 GitHub 仓库绑定，当 GitHub 仓库有更新时，CloudFlare Pages 会自动部署，非常适合做静态网站的部署。此外， Pages 也支持自定义构建命令，可以灵活利用。

CloudFlare Pages 构建后的静态站点会分发到 CloudFlare 全球的节点上，在世界各地都可以快速访问。

绑定 GitHub 并构建部署

打开 CloudFlare 仪表盘，点击左侧的“计算 (Workers)”——“Workers 和 Pages”，选择“创建”——“Pages”——“导入现有 Git 存储库”。

选择 GitHub 仓库，并选择分支。

填入构建命令或选择构建框架，然后点击“保存并部署”。

配置比较一目了然，可以选择Jekyll、Vue等预设，也可以自定义命令、构建输出目录（也就是静态站点的根目录）、环境变量等。

绑定自定义域名

跟随指示，会自动添加 CNAME 记录到 CloudFlare 的 DNS 中（要求该域名在你的 CloudFlare 账户下），随后就可以用自己的域名访问该 Pages 站点。

案例

案例1. 纯 JS + HTML + CS 网站：个人主页

GitHub仓库：Davidasx/homepage

该项目为纯 JS + HTML + CSS 静态页面，无需构建即可直接部署到CloudFlare Pages上。

站点：https://davidx.top

案例2. 基于 Jekyll 的静态博客

框架预设选择 Jekyll 即可。本博客在构建时遇到了一些环境问题，设置环境变量BUNDLE_WITHOUT为""后，构建成功。

此外，部分功能只有在 Jekyll 环境为 production 时才生效，可以通过设置环境变量JEKYLL_ENV为production来实现。

站点：https://blog-zh.davidx.top

案例3. 自定义构建命令：AyuScript-Site

GitHub仓库：AyuScript/AyuScript-Site

AyuScript-Site 是 AyuScript 的发布页面，该页面上包含了脚本的下载链接。我为了能够在 AyuScript-Site 上始终提供最新版本的脚本，使用了自定义构建命令。

思路：

• 绑定仓库 AyuScript-Client ，这样 AyuScript-Client 的更新会自动触发构建
• 使用’yarn’构建 AyuScript-Client
• 从 GitHub 上拉取 AyuScript-Site 的静态文件
• 将构建的脚本复制到 AyuScript-Site 的静态文件中
• 部署到 CloudFlare Pages

此外 AyuScript-Client 的构建命令中使用了 protoc ，需要手动安装。

使用 Bash 实现（CloudFlare Pages 构建时会先自动运行yarn install，无需将其手动写入构建命令中）：

curl -OL https://github.com/protocolbuffers/protobuf/releases/download/v31.1/protoc-31.1-linux-x86_64.zip
unzip -o protoc-31.1-linux-x86_64.zip -d protoc
export PATH="$PWD/protoc/bin:$PATH"
yarn run proto:generate
yarn run build
git clone https://github.com/AyuScript/AyuScript-Site
cp dist/ayuscript.user.js AyuScript-Site/assets

输出目录AyuScript-Site，即为包含最新版本脚本的发布页面。

站点：https://ayuscript.cc

CloudFlare Pages 和 GitHub Pages 的对比

CloudFlare Pages 与 GitHub Pages 都是免费的静态网站托管服务，但 CloudFlare Pages 有以下优势：

• 节点覆盖全球，速度更快
• 部署更简单，无需编写 Workflow 文件等
• 限制较少，私密的 GitHub 仓库也可以绑定，且不消耗 GitHub Actions 免费时长
• 自定义域名绑定方便，DNS记录自动添加，无需手动配置。

而在自定义方面，基于 GitHub Actions 的 GitHub Pages 似乎更胜一筹，可以实现更复杂的自动化流程。

此外，CloudFlare Pages 每个账号每天总计只能使用十万次请求（所有 Workers/Pages 共享），而 GitHub Pages 则没有这个限制。