静态文件总得找个地方放, 还得让全世界都能访问.

部署平台: Cloudflare Pages

选 Cloudflare Pages 而不是其他平台, 原因有三:

1. 全球 CDN: Cloudflare 有遍布全球的边缘节点, 无论访客在哪, 都能从最近的节点加载页面
2. 零配置 HTTPS: 自动签发和续期 SSL 证书, 不需要手动处理
3. 免费额度够用: 对于个人博客来说, 带宽和构建次数完全够用

配置很简单, 在 Cloudflare Pages 控制台创建一个项目, 关联 GitHub 仓库. 构建命令和输出目录在 GitHub Actions 里控制, 不需要在控制台配.

有个坑: Cloudflare Pages 默认分配的域名是 <project>.pages.dev, 项目名一旦确定就不能改. 想换只能删掉重建. 我那会儿随便打了个名字, 后来想改发现不行, 只能留着.

CI/CD 流程

完整的部署流程由 GitHub Actions 管理:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [master]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "0.164.0"
          extended: true

      - uses: actions/setup-node@v4
        with:
          node-version: 24
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Patch theme for Hugo compatibility
        run: bash scripts/patch-theme.sh

      - name: Build
        run: npm run build

      - name: Deploy to Cloudflare Pages
        run: npx wrangler pages deploy public --project-name=time-friend
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

触发条件是 push 到 master 分支. 也支持手动触发 (workflow_dispatch), 方便在不改代码的情况下重新部署.

流程中有一个 theme patch 步骤:

bash scripts/patch-theme.sh

这个脚本处理旧主题在新版 Hugo 下的兼容问题:

#!/bin/bash
find themes/hugo-brewm/layouts -type f -exec perl -i -pe'
s/site\.Language\.Locale/site.LanguageCode/g;
s/\.Language\.Locale/\.Language\.LanguageCode/g;
s/site\.Language\.Label/site.Language.LanguageName/g;
s/\.Language\.Label/\.Language\.LanguageName/g;
' {} +

简单说就是把被 Hugo 废弃的 .Locale 和 .Label 替换为新的 .LanguageCode 和 .LanguageName. 不跑这个脚本, 旧主题在新版 Hugo 下会报错.

环境变量管理

Cloudflare 的 API Token 和 Account ID 存在 GitHub Secrets 里:

CLOUDFLARE_API_TOKEN: 有 Pages 部署权限的 API token
CLOUDFLARE_ACCOUNT_ID: Cloudflare 账户 ID

这两个值在 GitHub 仓库的 Settings > Secrets and variables > Actions 里配置. CI 运行时自动注入环境变量, 不会出现在日志里.

第一次配完记得手动跑一次 workflow 验证. 别问我怎么知道的, 我那次 token 权限没给对, 部署失败了一下午.

域名配置

域名 time-friend.com 的 DNS 由 Cloudflare 托管. 配置几条记录:

• A 记录指向 Cloudflare Pages 的负载均衡 IP
• CNAME 记录的 www 指向 time-friend.pages.dev

Cloudflare Pages 会自动处理域名映射, 在项目设置里绑定自定义域名即可. HTTPS 证书自动签发, 不需要手动续期.

重定向

static/_redirects 文件处理 URL 重定向:

/archive/*  /zh/archive/:splat  301

老版本的 URL 结构是 /archive/xxx, 改成双语版后中文文章在 /zh/archive/xxx. 这个重定向确保老的站外链接和搜索引擎索引还能用.

性能考虑

Cloudflare 的全球 CDN 是性能的关键. 静态文件缓存在边缘节点, 用户从最近的节点获取内容, 延迟大幅降低.

缓存策略通过 Workbox 在客户端层面控制. CDN 层面不需要额外配置, Cloudflare Pages 会自动设置合适的缓存头. HTML 文件不做长时间缓存, 确保内容更新后能尽快生效. 静态资源 (JS, CSS, 图片) 有较长的缓存时间.

整个部署流程从 push 到上线大约两分钟. 构建占十秒左右, 其余时间花在依赖安装和 wrangler 部署上.

文章链接：