如何将自己的网站 (Hexo) 免费部署到 Cloudflare Pages

在建立个人博客或网站时，部署是一个绕不开的话题。市面上有诸多选择（如 GitHub Pages, Vercel, Netlify）。今天我想分享一下，为什么以及如何将我们的静态博客（比如本站正在使用的 Hexo）部署到 Cloudflare Pages。

为什么选择 Cloudflare Pages？

Cloudflare 作为全球顶级的 CDN 厂商，其推出的 Pages 服务有很多令人心动的优势：

1. 自带全球 CDN 加速：访问速度极快，国内访问的稳定性通常也比 GitHub Pages 更好。
2. 完全免费：每个月提供海量免费请求次数，对于个人网站来说绰绰有余。
3. 自动化部署：可以和 GitHub 无缝集成，只要 push 代码就会自动触发构建发布。
4. 免费 SSL 证书：并且可以轻松绑定自己的自定义域名。

准备工作

在开始之前，你需要准备以下内容：

1. 本地已经搭建好并且能正常本地运行的 Hexo 博客项目。
2. 一个 GitHub 账号，并将你的 Hexo 项目代码推送（Push）到了一个仓库（Repository）中。
3. 一个 Cloudflare 账号。

注意：Hexo 项目在上传到 GitHub 时，不要上传生成的 public 文件夹和 node_modules 文件夹。如果你不知道怎么做，请在你的项目根目录确保有一个正确的 .gitignore 文件。

部署步骤详解

首步：在 Cloudflare 创建 Pages 项目

1. 登录到 Cloudflare Dashboard。
2. 在左侧菜单中找到并点击 “Workers & Pages”，然后点击 “创建应用程序 (Create application)”。
   
3. 在新页面中，选择 “Pages” 标签页。
   
4. 点击 “连接到 Git (Connect to Git)”。
   

第二步：连接你的 GitHub 仓库

1. 按照屏幕提示，授权 Cloudflare 访问你的 GitHub 账号。
2. 在仓库列表中，选择你刚刚推送 Hexo 代码的那个博客对应的 GitHub 仓库。
   
3. 点击 “开始设置 (Begin setup)”。

第三步：配置构建命令与环境变量（关键）

在这个页面，你需要告诉 Cloudflare 如何”编译”你的网站代码。以下是 Hexo 项目的推荐配置：

• 项目名称 (Project name)：默认会使用你的仓库名，你可以自定义。
• 生产分支 (Production branch)：通常是 main 或 master，以你仓库实际的主分支为准。
• 框架预设 (Framework preset)：拉到最后，选择 “无 (None)”。
• 构建命令 (Build command)：输入 npm run build （如果你的 package.json 中配置了 build 命令）或是 npx hexo generate。
• 构建输出目录 (Build output directory)：输入 public （这是 Hexo 默认生成静态文件的文件夹）。
  

注意：如果你在其他教程中看到需要配置 NODE_VERSION 环境变量去指定 Node.js 版本，请注意现在的 Cloudflare Pages 中没有 NODE_VERSION 这个环境变量。现在的构建环境默认会使用较新的 Node.js 版本，因此你完全可以忽略环境变量的配置。

第四步：保存并部署

确认无误后，点击下方的 “保存并部署 (Save and Deploy)”。

Cloudflare 会开始克隆你的代码、安装依赖 (npm install)，然后运行你配置的构建命令，最后将输出的 public 文件夹部署到边缘网络。

视安装依赖的速度，整个过程通常只需要 1-2 分钟。只要日志最后提示构建成功（Success），你的网站就已经上线了！Cloudflare 会提供给你一个类似 xxx.pages.dev 的免费二级域名，你可以直接点击访问。

进阶：绑定自己的域名 (Custom Domain)

如果你已经拥有一个自己买的域名（比如我的 OPC 网站域名），你可以轻松将它绑定到刚才部署的 Pages：

1. 在你的 Pages 项目详情页面，找到 “自定义域 (Custom domains)” 选项卡。
2. 点击 “设置自定义域 (Set up a custom domain)”。
3. 输入你的域名（例如 blog.yourdomain.com）。
4. 如果你的域名 DNS 已经托管在 Cloudflare，它会自动帮你把记录添加好；如果在其他服务商，它会提示你添加对应的 CNAME 记录。
5. 配置完成后等待几分钟，Cloudflare 还会自动为你签发并配置好免费的 SSL 证书 (HTTPS)。

总结

至此，只要你以后在本地写完文章，执行：

git add .
git commit -m "add new post"
git push

Cloudflare Pages 就会捕捉到更新并在云端自动构建你的网站，整个发布流程如丝般顺滑。快去试试吧！