CloudFlare Pages 好像在2021年某月正式上线了，其速度比Github Pages（以及Github Pages + CloudFlare CDN）快了不少，至少在我把 huli.li 迁移过去后感觉是这样的。并且 CF 的 Pages 相比 Github 的 action 配置起来更加方便，还支持 React, Next.js, Nuxt.js, Vue, Hugo, JekyII 的部署预设。而且 DF Pages 可以部署私有仓库，这在 Github 还要Pro以上套餐。

配置CloudFlare Pages

点击链接快捷跳转至 CF Pages 或在控制面板左侧点击 Pages（注意不是点进域名后，是在域名列表的左侧边栏）。然后根据提示配置与 Github 或 Gitlab 的连接，登录后可以选择让 CF Pages 读取全部仓库（包括私有），或者手动选中想要让 CF Pages 读取的仓库。回到 Pages 首页点击蓝色的 Create a project 按钮来到新建一个项目，来到新建流程。

在新页面选中 Github/Gitlab 账号并选择需要构建的仓库，然后点击下一步 Begin Setup。（没看到你要的仓库，说明上一步可能你没有授权 CF Pages 可以读取的仓库）。

在新页面上方填好 Project name 和需要进行构建的分支，page页面默认的域名会被配置到<ProjectName>.pages.dev，不过后面可以配置自定义自己的域名。

在下方的构建设置中可以选择预设方案，也可以自定义构建配置，例如Vite.js， Build command 是 npm run build，输出目录就是 dist。Frame preset 预设可以空着，它只不过是可以帮助你自动填写构建配置。

这里的构建并不需要npm i，因为 CF Pages 会自动运行安装依赖的命令。并且 CF Pages 的构建环境预安装了 Java 8，Python 2.7，Node.js 12.18.0 等环境，可以在Language support and tools页面看到，并且 pip、npm 也预装在环境里，在刚才的链接页面下方也有写道。

继续点击下一步就可以保存并构建了。有一说一这个构建过程相比 Github Actions 来说真的是太慢了，主要就是在初始化环境那里，单一个环境配置就基本要花个两三分钟，对比图在下面。虽然比较满，但是访问速度快就行了，也不是不能接受。

构建完成就可以打开生成的域名来访问了，然后就可以在 Custom domains 页面配置自定义域名了，如果域名DNS也是在 CloudFlare 托管那么 CF 还可以直接自动配置（如果之前对应域名有 DNS 记录记得先删掉然后再自动配置，否则可能会出现问题，如果出现问题了删除自定义域名重新添加就好了）。

此时 Github 仓库对应的提交号旁边也会显示构建成功（下面图片里第一个是 Github Action 自动构建，第二、三个是代码检查，最后一个是 CF Pages 的构建）

可能出现的问题

我自己最开始配置 huli.li 时一直出现这个问题：

猜到可能是 Node.js 版本太低导致的（构建环境的才 12.18.0，我本地都16.13.1了），于是尝试在构建命令加上 npm i -g npm && npm i -g n && n stable && npm run build 升级 npm 和 Node.js，又提示权限不足没法安装，然后才找到刚才的 Language support and tools 文档，发现只要指定特定的环境变量 Environment variables 就可以预装指定版本的环境，按照文档配置好后就可以了。

其他小笔记

CF Pages 会在每次 Github 仓库有新提交时构建（不论任何分支），因此为了不频繁构建还是尽可能将多个 commits 一起 push 以避免频繁构建。（除非你暂停掉）。

CF Pages 也会保留所有成功构建的记录，成为预览 preview，url为 <构建UUID前8位>.<ProjectName>.pages.dev 并且也可以随时访问，Github 仓库构建记录也会展示出来，如果不希望这些 preview 被展示出来，需要在 设置->通用设置->访问策略（Settings -> General -> Access policy）配置谁可以访问，不过如果想使用这个需要建立 CloudFlare Team，其需要验证信用卡或 Paypal，即使免费版也需要验证，但是国区的 Paypal 也可以使用。

最后，欢迎各位 Fork 狐狸狸仓库用来测试，如果需要正常显示狐狸狸页面的天气和位置需要安装文档自行申请并替换 API Key。（记得给个Star~）