Cloudflare Pages 静态部署完全指南

为什么选 Cloudflare Pages

• 免费额度：无限站点、每月 500 次构建
• 全球 CDN：300+ 节点
• 自动 HTTPS：内置 SSL 证书
• 自定义域名：免费绑定
• 预览部署：每个分支独立 URL

方式一：Wrangler CLI

npm install -g wrangler
wrangler login

# 部署
npx wrangler pages deploy dist --project-name=my-blog

适合手动部署和小项目。

方式二：GitHub 集成

在 Cloudflare Dashboard 中连接 GitHub 仓库，配置：

• 构建命令：npm run build
• 输出目录：dist
• 分支：main（生产）/ preview（预览）

每次 push 自动构建部署。

方式三：GitHub Actions

# .github/workflows/deploy.yml
name: Deploy to Cloudflare Pages
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npm run build
      - run: npx wrangler pages deploy dist --project-name=my-blog
        env:
          CLOUDFLARE_API_TOKEN: '${{ secrets.CF_API_TOKEN }}'

方式四：CI + 通知

# 构建成功后
npx wrangler pages deploy dist \
  --project-name=fisherhub-blog \
  --commit-dirty=true

# 获取部署 URL
DEPLOY_URL=$(npx wrangler pages deployment list \
  --project-name=fisherhub-blog | head -1)

echo "✅ Deployed to: $DEPLOY_URL"

自定义域名

1. 域名 DNS 托管到 Cloudflare
2. Pages → Custom domains → 添加 blog.fisherhub.cn
3. Cloudflare 自动配置 CNAME 和 SSL

整个过程不需要手动配置 Nginx 或申请证书——Cloudflare 全自动。