部署到 Cloudflare Pages

Cloudflare Pages 是 Cloudflare 提供的静态站点托管服务，基于强大的全球 CDN 网络，提供快速、安全的部署体验。

前置要求

在开始之前，请确保：

✅ 已在 GitHub / GitLab 上创建仓库并推送代码
✅ 拥有 Cloudflare 账号
✅ 项目已正确配置 package.json 中的 build 脚本

快速部署

步骤 1：创建项目

登录 Cloudflare Dashboard
进入 Workers & Pages 页面
点击 “Create application” → “Pages” → “Connect to Git”

TODO: 添加 Cloudflare Pages 创建项目界面截图

步骤 2：连接 Git 仓库

选择你的 Git 提供商（GitHub 或 GitLab）
授权 Cloudflare Pages 访问你的仓库
在仓库列表中选择 ShokaX 项目
点击 “Begin setup”

TODO: 添加选择仓库界面截图

步骤 3：配置构建设置

在 Set up builds and deployments 页面配置：

项目名称：

输入项目名称（如 my-blog）
这将成为你的默认域名：my-blog.pages.dev

构建配置：

配置项	值	说明
Production branch	`main`	生产分支（根据你的仓库调整）
Framework preset	`Astro`	自动检测并选择
Build command	`bun run build`	构建命令
Build output directory	`dist`	输出目录

TODO: 添加构建配置界面截图

步骤 4：配置环境变量（可选）

在 Environment variables 部分，可以添加构建时需要的环境变量：

变量名	值	说明
`NODE_VERSION`	`20`	Node.js 版本（如果需要）
`SITE_URL`	`https://yourdomain.com`	站点 URL

TODO: 添加环境变量配置界面截图

步骤 5：部署

检查配置无误后，点击 “Save and Deploy”
Cloudflare Pages 自动开始构建和部署
等待 1-3 分钟，构建完成后会显示部署成功页面

TODO: 添加部署进度界面截图

🎉 恭喜！ 你的 ShokaX 站点已成功部署到 Cloudflare Pages！

访问 https://your-project.pages.dev 即可查看。

配置说明

构建命令

Cloudflare Pages 使用 package.json 中的 build 脚本：

{
  "scripts": {
    "build": "bun run build:site && bun run build:index"
  }
}

这个命令会：

构建 Astro 站点（build:site）
生成 Pagefind 搜索索引（build:index）

astro.config.mjs 配置

确保 astro.config.mjs 中的 site 字段配置正确：

export default defineConfig({
  site: "https://your-project.pages.dev", // 或你的自定义域名
  // ...其他配置
});

自动部署

Cloudflare Pages 默认启用 持续部署（Continuous Deployment）：

✅ 推送到生产分支 → 自动触发生产环境部署
✅ 推送到其他分支 → 自动创建预览部署（Preview Deployment）
✅ 创建 Pull Request → 自动为 PR 创建预览链接

工作流程：

# 本地修改内容
echo "新文章内容" > src/posts/new-post.md

# 提交并推送
git add .
git commit -m "添加新文章"
git push origin main

# Cloudflare Pages 自动触发部署（1-3 分钟后生效）

自定义域名

添加域名

进入项目的 Custom domains 标签
点击 “Set up a custom domain”
输入你的域名（如 blog.example.com 或 example.com）
点击 “Continue”

TODO: 添加自定义域名设置界面截图

配置 DNS

Cloudflare Pages 支持两种 DNS 配置方式：

方式 1：域名在 Cloudflare 管理（推荐）

如果你的域名 DNS 已托管在 Cloudflare：

Cloudflare Pages 会自动添加 CNAME 记录
无需手动配置，一键完成

优点：

✅ 自动配置，无需手动操作
✅ 自动 HTTPS 证书
✅ 集成 CDN 加速

方式 2：域名在其他服务商

在你的域名服务商处添加 DNS 记录：

子域名（如 blog.example.com）：

类型	名称	值
CNAME	`blog`	`your-project.pages.dev`

根域名（如 example.com）：

类型	名称	值
CNAME	`@`	`your-project.pages.dev`

或者使用 A 记录（部分 DNS 服务商不支持根域名 CNAME）：

TODO: 添加 DNS 配置示例截图

迁移域名到 Cloudflare（可选）

如果你想享受 Cloudflare 的完整功能（自动 DNS 配置、DDoS 防护等），可以将域名 NS 记录指向 Cloudflare：

在 Cloudflare Dashboard 添加站点
按照指引修改域名注册商的 NS 记录
等待 DNS 生效（通常 24 小时内）