手把手教你使用免费Cloudflare Pages部署静态网站

今天阿影介绍下如何使用免费的 Cloudflare Pages 构建一个静态网站，计算资源是免费的、域名解析是免费的、SSL证书也是免费的，什么都免费。

1：将阿里云域名管理权转移到 Cloudflare DNS

我的域名在阿里云，我将 NS 管理器转移给 Cloudflare DNS，如下图：

域名 ayym.net。

2：创建key和token

在 Cloudflare 上创建 key 和 token，路径是左边菜单“管理账户=>账户 API 令牌”，创建的 token 应用范围就是 Cloudflare Workers（等会解释它），应用的域名是我的域名 ayym.net。

然后拷贝出 token，并设置为环境变量：

echo 'export CLOUDFLARE_ACCOUNT_ID=""' >> ~/.bashrc
echo 'export CLOUDFLARE_API_TOKEN=""' >> ~/.bashrc

source ~/.bashrc

3：Workers 和 Pages

现在介绍下 Cloudflare Workers 和 Pages，Workers 是 Cloudflare 的 serverless 平台，不需要管理基础设施，就可以在 Workers 上部署、构建、扩展应用。

而 Cloudflare Pages 是 Cloudflare 的一个全栈托管平台，偏前端一些，可以利用 Workers 的能力开发和部署动态应用。

在本文使用 Cloudflare Wrangler 官方工具部署 Cloudflare Pages 应用，先安装和配置：

# 升级 node
nvm install node
nvm use node

# 安装
npm install wrangler --save-dev

# 查看版本
npx wrangler -v

wrangler 工作的时候会读取环境变量中的 Cloudflare token。

4：构建 Cloudflare Pages

使用 wrangler 创建一个站点，使用 main 线上环境：

npx wrangler pages project create "my-blog" --production-branch=main

构建好以后，就会生成一个内部域名 my-blog-djd.pages.dev。

部署静态文件：

npx wrangler pages deploy ./dist --project-name="my-blog"

在本文中，dist/index.html 就一个文件，而且是阿影手动编辑的。

然后去 Workers 和 Pages 控制台看一看，如下图：

域名和部署相关细节都有，你现在使用也能访问。

5：自定义域

在Workers 和 Pages 控制台下构建一个自定义域，而且给你自动配置了 SSL 证书

6：配置域名指向

现在去 Cloudflare DNS 配置域名指向就可以了：

是不是非常简单，实际上不安装 wrangler 照样可以构建服务。