⏱️ 2 分钟阅读

部署指南:GitHub + Cloudflare Pages

手把手教你将 VCATBLOG 部署到 Cloudflare Pages,实现自动化 CI/CD。

🎯 部署流程概览

VCATBLOG 使用 GitHub Actions 构建,自动部署到 Cloudflare Pages。整个流程完全自动化:

Push 到 main → GitHub Actions 构建 → 部署到 Cloudflare Pages

📋 准备工作

1. Fork 或克隆项目

将项目仓库 Fork 到你的 GitHub 账号下。

2. 获取 Cloudflare API Token

  1. 登录 Cloudflare Dashboard
  2. 进入 My Profile → API Tokens
  3. 创建 Token,选择 Cloudflare Pages 权限
  4. 记下 Token 和 Account ID

3. 配置 GitHub Secrets

在仓库的 Settings → Secrets and variables → Actions 中添加:

Secret 名称说明
CLOUDFLARE_API_TOKENCloudflare API Token
CLOUDFLARE_ACCOUNT_IDCloudflare Account ID

⚙️ GitHub Actions 配置

项目已包含 .github/workflows/deploy.yml,推送到 main 分支即自动触发:

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: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name=vcatblog

🌐 自定义域名

  1. 在 Cloudflare Pages 项目中进入 Custom Domains
  2. 添加你的域名
  3. 按提示配置 DNS 记录

📝 日常写作流程

# 1. 创建新文章
# 在 src/content/blog/ 下创建 new-post.md

# 2. 本地预览
npm run dev

# 3. 推送到 GitHub
git add .
git commit -m "feat: new post"
git push

# 4. 自动部署完成!

🔧 高级配置

修改站点信息

编辑 astro.config.mjs:

export default defineConfig({
  site: 'https://your-domain.com',  // 你的域名
  // ...
});

配置评论系统

编辑 src/components/Comments.astro,替换 Giscus 配置:

repo: 'your-username/your-repo',
repoId: 'your-repo-id',
category: 'Announcements',
categoryId: 'your-category-id',

配置搜索

Pagefind 在构建时自动索引,无需额外配置。部署后搜索功能自动可用。


部署完成后,每次推送代码都会自动构建和部署。享受自动化带来的便利吧! 🚀

💬 评论