Cloudflare Pages 部署配置指南

通过 GitHub 自动部署

1. 提交代码到 GitHub

cd D:\AI_2026\opctool
git add .
git commit -m "feat: Configure website for Cloudflare Pages deployment"
git push origin main

2. 在 Cloudflare Dashboard 创建 Pages 项目

1. 登录 Cloudflare Dashboard
2. 进入 Workers & Pages 页面
3. 点击 Create application → Pages → Connect to Git
4. 选择你的 GitHub 仓库：tianqing2025/opctool

3. Cloudflare Pages 构建配置参数

在创建 Pages 项目时，使用以下配置：

配置项	值
项目名称 (Project name)	ff-website
生产分支 (Production branch)	main
框架预设 (Framework preset)	VitePress
构建命令 (Build command)	npm run build
构建输出目录 (Build output directory)	.vitepress/dist
根目录 (Root directory)	website

重要说明

• 根目录必须设置为 website：因为 VitePress 项目在 website 子目录中
• 构建输出目录是 .vitepress/dist：这是 VitePress 的默认输出路径（相对于根目录 website）
• 框架预设选择 VitePress：Cloudflare 会自动配置正确的 Node 版本和构建环境

4. 环境变量（可选）

通常不需要额外的环境变量，但如果需要可以添加：

NODE_VERSION=22

5. 保存并部署

点击 Save and Deploy，Cloudflare Pages 会自动：

1. 克隆你的 GitHub 仓库
2. 进入 website 目录
3. 运行 npm install
4. 运行 npm run build
5. 从 .vitepress/dist 部署文件

6. 自动部署

之后每次推送到 main 分支，Cloudflare Pages 会自动重新部署。

---

构建流程说明

GitHub Push
    ↓
Cloudflare Pages 检测到更新
    ↓
克隆仓库
    ↓
cd website (进入根目录)
    ↓
npm install (安装依赖)
    ↓
npm run build (执行 vitepress build)
    ↓
VitePress 输出到 .vitepress/dist
    ↓
Cloudflare Pages 从 .vitepress/dist 部署
    ↓
部署完成 ✅

---

自定义域名配置

1. 在 Cloudflare Pages 添加自定义域名

1. 进入你的 Pages 项目
2. 点击 Custom domains
3. 点击 Set up a custom domain
4. 输入你的域名（例如：www.ffang.net）
5. Cloudflare 会自动配置 DNS

---

故障排查

问题 1：构建失败 - "Output directory not found"

解决方案：

• 确认根目录设置为 website
• 确认构建输出目录设置为 .vitepress/dist

问题 2：找不到 package.json

解决方案：

• 确认根目录设置为 website（不是 / 或留空）

问题 3：依赖安装失败

解决方案：

• 检查 website/package.json 是否存在
• 检查 npm 日志查看具体错误

---

快速配置检查清单

部署前确认：

• [ ] 代码已推送到 GitHub
• [ ] Cloudflare Pages 项目已创建
• [ ] 根目录设置为 website
• [ ] 构建命令为 npm run build
• [ ] 构建输出目录为 .vitepress/dist
• [ ] 框架预设选择 VitePress

---

最后更新：2026年3月8日
维护者：项目团队