使用 Gitea + Drone CI 自动部署 Hexo 静态网站到 Cloudflare Pages

前段时间使用 Hexo 重建了个人博客。我之前一直使用 VSCode 在本地写博客，用 git 推送到 GitHub 存档，每次推送的之后都由 GitHub Actions 自动构建 Hexo 静态网站然后发布到 Cloudflare Pages。
现在已经把大部分项目迁移到自家服务器托管的 Gitea 仓库上，虽然暂时还没有自身集成的 CI，但可以很轻松地集成 Drone CI 来代替 GitHub Action。

这篇指南将带你从零开始创建一个由 Hexo 框架搭建的静态网站，通过提交到 Gitea 存储库来触发 Webhook，引导 Drone CI 构建网站静态资源以及自动发布到 Cloudflare Pages。

初始化 Hexo 网站项目

Hexo 是一个用 Node.js 编写的博客框架，支持多种主题皮肤，下面我们直接创建一个初始站点，不加任何修改。

$ npx hexo init blog
$ cd blog

初始化本地 Git 仓库

$ git init
$ git checkout -b main

创建 .gitignore 方便 git 提交文件时忽略掉 Node.js 在本地安装的模块目录和 hexo 产生的临时文件。

$ tee .gitignore <<-'EOF'
yarn.lock
package-lock.json
node_modules/
db.json
public/
EOF

继续提交代码，推送到 Gitea。

$ git add .
$ git commit -m "first commit"
$ git remote add origin git@gitea.com:john/blog.git
$ git push -u origin main

创建一个 CloudFlare Pages 项目

注册或者登录一个 CloudFlare 账户，进入 CloudFlare Pages 服务，点击 Create a Project - Direct Upload 创建一个空的 Pages 托管项目。你可以自定义项目名称，稍后我们会在 Drone CI 当中使用这个项目名称作为文件上传目标。

编写 Drone CI 流水线

Drone CI 的自动化作业流程存放在 git 项目根目录的 .drone.yml 文件中，部分参数的意义如下：

1. kind 表示本文是一个 CI 流水线，type 指示下列任务会在 Docker 容器中完成，name 定义了作业名称。
2. 流水线分为编译 hexo 静态网站和使用 wrangler 工具上传网站两部分。
3. 首先执行 node.js 模块安装，hexo 网站编译。编译好的 hexo 静态资源存放于当前目录下的 public
4. 使用 wrangler 上传网站文件夹 public，这里要准备 Cloudflare Pages 的 API 密钥。其中的 --project-name=blog 定义你在 CloudFlare 上创建的 Pages 项目名称。

---
kind: pipeline
type: docker
name: default

steps:
- name: hexo
  image: node:18
  commands:
  - npm install
  - npm run build

- name: publish-blog
  image: node:18
  commands:
    - npx wrangler pages publish public/ --project-name=blog
  environment:
    CLOUDFLARE_ACCOUNT_ID:
      from_secret: CLOUDFLARE_ACCOUNT_ID
    CLOUDFLARE_API_TOKEN:
      from_secret: CLOUDFLARE_API_TOKEN
  depends_on: [hexo]

你可以暂时将上面的 .drone.yml 全文保存到你的项目目录下，提交到 Git 仓库。

$ git add .drone.yml
$ git commit -m "Add .drone.yml"
$ git push

获取 CloudFlare Pages API 访问令牌

登录 CloudFlare 账户，依次打开 API Token - Create Token - Create Custom Token

• 在 Token name 处填写一个令牌名称
• 在 Permission 设置令牌权限为 Account - CloudFlare Pages - Edit

保存生成的令牌到稍后备用。

在 Drone CI 中添加令牌

Drone CI 提供了一个加密存储机密数据的机制。依次打开 Drone CI - 你的项目名称 - Setting - Secrets，填写并保存下面两个机密字段。

• CLOUDFLARE_ACCOUNT_ID: 你的 CloudFlare 账户 ID
• CLOUDFLARE_API_TOKEN: 在刚才的步骤中保存的CloudFlare Pages API 访问令牌
  

开始部署

前面的准备工作已经完成了 99%，最后你只需要在本地的 git 仓库推送代码来触发这个工作流程。

git add .
git commit -m "第一篇博客 Hello World"
git push

如果在最后看到 ✨ Deployment complete! 说明我们的网站已经部署成功啦，打开旁边的链接即可预览。