使用 Cloudflare 或 Pages 部署静态网站

创建于2022-06-28

2022年8月3日更新

预计阅读9分钟

全文约2.6k字

【超详细】使用 Cloudflare Workers 或者 Pages 甚至不必购买自己的域名部署静态网站。

总述

先来说一下传统的网站如何部署：首先购买域名和服务器，在服务器上安装对应的 HTTP 服务软件，将网页上传至服务器，部署成功。

但是这样会有一个弊端，即需要购买服务器（和域名）以及配置服务器，对于仅是测试用途或自身喜好来说可能一时热情并不抵得上开销，于是能否将网页部署至非自己的服务器上呢，此时 Cloudflare Workers 或者 Pages 就派上用场了，使用 Cloudflare Workers 或者 Pages 甚至不必购买自己的域名即可部署静态网站（传统 HTML 或者 Hexo 等等都是可以的）。

Cloudflare Workers 并不只有部署静态网站的功能，其他更多功能请参见 Cloudflare Workers 官方文档。

Cloudflare Workers 方案

基本原理是本地构建然后再上传到 KV 存储，适合跳转比较多或者规则（比如限制某些UA访问或某些IP访问）比较多的情况；一般不能自动化（可以借助 Github Actions 自动构建和推送）；最大项目大小为 1GB （KV存储限制）。

如果使用 Cloudflare Workers 部署则需要：

已经注册好的 Cloudflare 账号；
在你的电脑上安装 nodejs （版本应该是不限，测试 node 12 以上版本均可），并安装 Wrangler （下面会讲到如何安装）；
已经渲染好的网站成品（如果是需要渲染（如 Hexo 等）的通常是在public或dist文件夹下）；

Cloudflare Pages 方案

也可以部署到 Cloudflare Pages ，相对来说会简单一些而且自动化方案会多一些，能够直接在 cloudflare 上进行构建。

原理很简单，把 blog 源码全部上传到 Github 或者 Gitlab 仓库（私有仓库也可以）中，然后在 Cloudflare 上进行设置并让 Cloudflare 构建和发布。

配置 Wrangler

全局安装

打开终端，输入如下命令安装 Wrangler ：

1	npm i @cloudflare/wrangler -g

初始化

进入 hexo/hugo 或者空的文件夹都可以，在该文件夹下打开终端，初始化 Wrangler ，其中<site-name>可以随便输入一个项目名称或站点名称：

1 2	wrangler init --site <site-name> # 例如 wrangler init --site testproj

此时应有返回：

Creating project called `workers-site`...
Done! New project created /home/testuser/hexo-blog-demo/workers-site
Successfully scaffolded workers site
Succesfully created a `wrangler.toml`

并且根目录中多了一个文件夹和一个配置文件：

1 2	drwxr-xr-x 1 TestUser 0 1月 19 23:18 workers-site/ -rw-r--r-- 1 TestUser 204 1月 19 23:18 wrangler.toml

至此即为初始化成功。

hexo

打开配置文件：

name = "testproj"
type = "webpack"
route = ''
zone_id = ''
usage_model = ''
compatibility_flags = []
workers_dev = true
site = {bucket = "",entry-point = "workers-site"}
compatibility_date = "2022-01-19"

其中我们只需要关心以下几个参数：

TOML 配置文件格式要求只能使用 UTF-8 编码，且大小写敏感。
出于稳定考虑也不要乱动原有的空格和缩进格式。

# Zone ID：打开 Cloudflare 后台，点进你想用的域名，
# 右侧API下的ZoneID填入即可，中文版叫“区域ID”。
zone_id = ''

# site下的bucket填入你本地输出的文件路径，支持相对路径
# 例如Hexo默认就可以填写“./public”。
site = {bucket = "./public",entry-point = "workers-site"}

然后用 hexo 进行一次渲染：

1	hexo cl&&hexo g

并确保hexo项目根目录下有public文件夹且该文件夹中有已经渲染好的HTML文件。

传统 html 文件或其他 node 项目

打开配置文件：

name = "aria-ng"
type = "webpack"
route = ''
zone_id = ''
usage_model = ''
compatibility_flags = []
workers_dev = true
site = {bucket = "",entry-point = "workers-site"}
compatibility_date = "2022-01-19"

其中我们只需要关心以下几个参数：

TOML 配置文件格式要求只能使用 UTF-8 编码，且大小写敏感。
出于稳定考虑也不要乱动原有的空格和缩进格式。

# Zone ID：打开 Cloudflare 后台，点进你想用的域名，
# 右侧API下的ZoneID填入即可，中文版叫“区域ID”。
zone_id = ''

# site下的bucket填入你本地输出的文件路径，支持相对路径
# 例如aria-ng的默认编译输出目录就是“./dist”。
site = {bucket = "./dist",entry-point = "workers-site"}

然后用 hexo 进行一次渲染：

1	hexo cl&&hexo g

并确保刚才填入的bucket目录下有已经渲染好的HTML文件即可。

获取 API Token

打开 Cloudflare 控制台的 API 令牌页面，点击“创建令牌”，使用“编辑 Cloudflare Workers”模板，账户资源选择当前账户，区域资源选择刚才用过ZoneID的域名，其他均保持默认，查看摘要后选择创建令牌，记下该 API 令牌并将其存放在安全的地方，该令牌不会再显示第二次，不要多项目混用同一令牌，也建议不要使用全局API，应“一项目一令牌”。

获得令牌后最好使用 Cloudflare 提供的令牌测试命令测试一下 Token 是否正常运行，正确运行的情况下应有This API Token is valid and active字样返回。

在终端中运行如下命令并按提示输入刚才获得的令牌即可配置完成：

1	wrangler config

出现Successfully configured返回即为成功。

如果出现不能认证的问题，请检查以下是否有使用代理或者存在全局广告屏蔽（如AdGuard等），若遇到错误请先将这些禁用后再试一下。

预览

1	wrangler preview --watch

此时会自动打开浏览器并生成预览，没什么问题就可以下一步了。

发布

1	wrangler publish

出现以下返回值即为成功，访问新出现的地址即可：

1 2	Successfully published your script to https://testproj.xxx.workers.dev

刚部署好的几分钟内可能并不能打开上面的地址，如果打不开就先等几分钟。

可以访问之后再创建自定义域之类的就很简单了，这里就不再赘述了。

最后贴一个示例站点：hexo-cfw-demo 。

注意

Cloudflare 会计算请求量并以此来计费，免费版的 Cloudflare Workers 仅提供每天100,000次请求。要注意的是，不是一次 PV 算一次请求，若一个页面上有很多外挂 css 、js 、图片等资源则每请求一项计算请求一次。

例如本页加载一次至少有 70 次请求，则被访问一次额度就减少70，总额度就是每天只能被访问100,000/70=1428次，超出后可能产生高额账单或被停止服务。

通过 Cloudflare Pages 部署

该方法更适合部署纯静态网站，其本身也支持一些框架，但并不包含Hexo。

这里只是以 Hexo 为例，具体 Cloudflare Pages 支持构建的框架请查看 Cloudflare 官方文档。

本地设置

使用 Pages 构建本地基本不用设置什么，能够正常渲染和使用即可。

确认可以正常渲染并预览无误后在 Github 创建仓库（Private私有仓库或Public公共仓库均可），并将整个项目上传到该仓库。

Pages 设置

请使用新版 Cloudflare 控制台。

这一节包含一些图片，但是在无图模式下也不影响操作和阅读。

打开 Cloudflare 控制台，左侧找到 Pages ，右侧点击“创建项目”；

选择连接到Git；

连接到 Github 或者 Gitlab ，这里以 Github 为例；

然后会跳转到 Github 认证（选择个人或组织账号）界面；

接下来是权限选择界面，建议只选择项目仓库；

选择刚才选择的仓库；

设置构建：其中“项目名称”与默认域名有关；生产分支选默认的即可；

构建设置中提供了一些预设的框架构建模板，如果里面没有找到你的框架则需要在下面的“构建命令”中填写你的构建命令，例如 hexo 就是hexo g；

构建输出目录填写最后构建完成后输出的目录即可。

如果你的项目需要额外的环境变量或你的 Node 版本不是 Cloudflare 默认提供的版本（Node 12），则需要在下方创建环境变量，~~修改Node版本的环境变量为NODE_VERSION=16~~，修改Node版本的环境变量为NODE_VERSION=16.13.2（举例，实际版本以实际情况自行修改，一定要是三段式的写法，如16.13.2）。

如果修改环境变量后并没有实质性更改 Node 版本，也可以通过在.npmrc文件中写入版本号做到更改默认 Node 版本。具体操作方法是在.npmrc文件末尾添加一行use-node-version=16.13.2（举例，实际版本以实际情况自行修改）即可。
也可以把版本号写入.node-version文件中，格式为 Unix(LF) 换行格式的只写有版本号的文件，内容为node -v的输出内容，如v12.18.1。