为什么选择 Cloudflare Pages？

Cloudflare Pages 是部署静态网站的绝佳选择，特别是对于 Astro 博客：

  • 🌍 全球 CDN - 200+ 边缘节点
  • ⚡ 极速访问 - 毫秒级响应时间
  • 💰 完全免费 - 无限带宽和构建
  • 🔒 自动 HTTPS - 免费 SSL 证书
  • 🚀 一键部署 - 连接 Git 自动部署

准备工作

1. 项目结构检查

确保你的 Astro 项目具有以下结构：

my-astro-blog/
├── src/
│   ├── pages/
│   ├── content/
│   └── layouts/
├── public/
├── astro.config.mjs
└── package.json

2. 构建测试

本地测试构建是否成功：

npm run build

部署方法一：GitHub 连接（推荐）

步骤 1: 推送到 GitHub

# 初始化 Git 仓库
git init
git add .
git commit -m "🎉 初始化 Astro 博客"

# 推送到 GitHub
git remote add origin https://github.com/yourusername/my-astro-blog.git
git branch -M main
git push -u origin main

步骤 2: Cloudflare Pages 配置

  1. 登录 Cloudflare Dashboard
  2. 转到 Pages → Create a project
  3. 选择 Connect to Git
  4. 选择你的 GitHub 仓库

步骤 3: 构建设置

Framework preset: Astro
Build command: npm run build
Build output directory: dist
Root directory: /
Node.js version: 18

步骤 4: 环境变量（可选）

如果需要，可以设置环境变量：

NODE_VERSION=18
PUBLIC_SITE_URL=https://your-blog.pages.dev

部署方法二：Wrangler CLI

安装 Wrangler

npm install -g wrangler

登录并部署

# 登录 Cloudflare
wrangler login

# 构建项目
npm run build

# 创建项目并部署
wrangler pages project create my-astro-blog
wrangler pages deploy dist --project-name=my-astro-blog

自动化部署配置

GitHub Actions 工作流

创建 .github/workflows/deploy.yml：

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@v4
      
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build
      run: npm run build
      
    - name: Deploy to Cloudflare Pages
      uses: cloudflare/pages-action@v1
      with:
        apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        projectName: my-astro-blog
        directory: dist
        wranglerVersion: '3'

域名配置

使用自定义域名

# 添加自定义域名
wrangler pages domain add yourdomain.com --project-name=my-astro-blog

DNS 设置

在你的域名提供商处设置：

类型: CNAME
名称: www (或 @)
值: my-astro-blog.pages.dev

性能优化

1. 图片优化

// astro.config.mjs
export default defineConfig({
  image: {
    domains: ['images.unsplash.com'],
  },
});

2. 启用 sitemap

import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://your-blog.pages.dev',
  integrations: [sitemap()]
});

3. RSS 订阅

// src/pages/rss.xml.js
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('blog');
  return rss({
    title: '我的博客',
    description: '分享技术与生活',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      pubDate: post.data.pubDate,
      description: post.data.description,
      link: `/blog/${post.slug}/`,
    })),
  });
}

监控和分析

Cloudflare Analytics

部署后，你可以在 Cloudflare Dashboard 中查看：

  • 📊 访问统计
  • 🌍 地理分布
  • ⚡ 性能指标
  • 🔒 安全事件

常见问题

Q: 构建失败怎么办？

A: 检查以下几点：

  1. Node.js 版本是否正确
  2. 依赖是否完整安装
  3. 构建命令是否正确

Q: 部署后页面显示 404？

A: 确认：

  1. 构建输出目录是 dist
  2. 首页文件是 index.html
  3. 路由配置是否正确

Q: 如何设置重定向？

创建 public/_redirects 文件：

/old-path /new-path 301
/blog/* /posts/:splat 301

结论

Cloudflare Pages + Astro 是构建现代博客的完美组合：

  • ✅ 部署简单快捷
  • ✅ 性能表现卓越
  • ✅ 成本几乎为零
  • ✅ 维护工作量极少

现在就开始构建你的 Astro 博客，享受现代 JAMstack 的强大威力吧！

有问题吗？欢迎在评论区讨论！🚀