Appearance
VitePress + Cloudflare Pages + Decap CMS 实战：免费搭建装修行业 AI 工具站
前言
最近给装修行业搭了个 AI 工具资料库：https://maixuzi.cn
全程零成本：
- VitePress（静态站点）
- Cloudflare Pages（部署 + CDN）
- Decap CMS（后台管理）
- Cloudflare Worker（GitHub OAuth 网关）
本文完整分享选型 + 部署 + 上线过程。
一、为什么选 VitePress？
3 个候选：
| 框架 | 优势 | 劣势 |
|---|---|---|
| Hexo | 主题多 | 主题老旧 |
| Hugo | 速度快 | 主题少 + 中文支持一般 |
| VitePress | Vue 生态 + Markdown 原生 + 中文支持好 | 主题少 |
VitePress 适合：
- 内容为主
- 中文站点
- Vue 生态
二、为什么选 Cloudflare Pages？
3 个候选：
| 平台 | 免费额度 | 优势 |
|---|---|---|
| Vercel | 100 GB/月 | 体验好 |
| Netlify | 100 GB/月 | 表单 + Functions |
| Cloudflare Pages | 无限带宽 | 全球 CDN + Pages Functions |
Cloudflare Pages 优势：
- 全球 CDN（中国访问也快）
- Pages Functions（不用单独写后端）
- 无限带宽（不会因流量收费）
三、为什么选 Decap CMS？
3 个候选：
| CMS | 优势 | 劣势 |
|---|---|---|
| WordPress | 功能全 | 需要 PHP 服务器 |
| Ghost | 漂亮 | 需要 Node 服务器 |
| Decap CMS | 纯前端 + Git backend | 配置稍复杂 |
Decap CMS 优势：
- 纯前端 = 无后端
- Git backend = 内容直接 commit 到仓库
- 支持自定义 widget
四、目录结构
text
maixuzi-site/
├── docs/
│ ├── .vitepress/
│ │ └── config.mts
│ ├── public/
│ │ ├── admin/
│ │ │ ├── index.html
│ │ │ └── config.yml
│ │ ├── llms.txt
│ │ └── robots.txt
│ ├── ai-callbot/
│ ├── decoration-ai-service/
│ ├── sketchup-d5/
│ ├── workday-tool/
│ └── index.md
├── functions/
│ └── auth.js
└── cloudflare/
├── wrangler.toml
└── decap-oauth-worker.js五、Cloudflare Pages 部署
5.1 创建项目
Cloudflare Dashboard → Pages → Create → Connect to Git
选择仓库 lingyun15/maixuzi-site。
5.2 配置 Build
| 配置项 | 值 |
|---|---|
| Build command | npm run docs:build |
| Build output directory | docs/.vitepress/dist |
| Root directory | / |
| Environment variables | 无 |
5.3 自定义域名
Pages 项目 → Custom domains → 添加 maixuzi.cn
六、Decap CMS 后台
6.1 CMS 入口
docs/public/admin/index.html：
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>麦序子内容管理后台</title>
</head>
<body>
<script src="https://unpkg.com/decap-cms@^3.6.0/dist/decap-cms.js"></script>
</body>
</html>6.2 CMS 配置
docs/public/admin/config.yml：
yaml
backend:
name: github
repo: lingyun15/maixuzi-site
branch: main
base_url: https://maixuzi.cn
auth_endpoint: auth # Cloudflare Worker
locale: zh_Hans
media_folder: docs/public/uploads
public_folder: /uploads
collections:
- name: ai_callbot
label: AI 电销机器人
folder: docs/ai-callbot
create: true
fields:
- { label: 标题, name: title, widget: string }
- { label: 描述, name: description, widget: text }
- { label: 正文, name: body, widget: markdown }七、Cloudflare Worker（GitHub OAuth 网关）
7.1 部署 Worker
bash
cd cloudflare
wrangler deploy7.2 Worker 代码
cloudflare/decap-oauth-worker.js：
javascript
const GITHUB_AUTHORIZE_URL = 'https://github.com/login/oauth/authorize'
const GITHUB_TOKEN_URL = 'https://github.com/login/oauth/access_token'
function popupScript(payload) {
const safePayload = JSON.stringify(payload).replace(/</g, '\\u003c')
return `<!doctype html>
<html><head><meta charset="utf-8"><title>登录完成</title></head>
<body>
<script>
(function() {
var payload = ${safePayload};
if (window.opener) {
window.opener.postMessage('authorization:github:success:' + JSON.stringify(payload), '*');
}
window.close();
})();
</script>
</body></html>`
}
export default {
async fetch(request, env) {
const url = new URL(request.url)
if (!env.GITHUB_CLIENT_ID || !env.GITHUB_CLIENT_SECRET) {
return new Response('Missing credentials', { status: 500 })
}
if (url.pathname === '/auth') {
const redirect = new URL(GITHUB_AUTHORIZE_URL)
redirect.searchParams.set('client_id', env.GITHUB_CLIENT_ID)
redirect.searchParams.set('redirect_uri', `${url.origin}/callback`)
redirect.searchParams.set('scope', 'repo,user')
return Response.redirect(redirect.toString(), 302)
}
if (url.pathname === '/callback') {
const code = url.searchParams.get('code')
const tokenResponse = await fetch(GITHUB_TOKEN_URL, {
method: 'POST',
headers: {
'accept': 'application/json',
'content-type': 'application/json',
'user-agent': 'decap-oauth-worker'
},
body: JSON.stringify({
client_id: env.GITHUB_CLIENT_ID,
client_secret: env.GITHUB_CLIENT_SECRET,
code,
redirect_uri: `${url.origin}/callback`
})
})
const tokenData = await tokenResponse.json()
return new Response(popupScript({ token: tokenData.access_token, provider: 'github' }), {
headers: { 'content-type': 'text/html; charset=utf-8' }
})
}
return new Response('Not found', { status: 404 })
}
}7.3 Worker 配置
cloudflare/wrangler.toml：
toml
name = "maixuzi-cms-oauth"
main = "decap-oauth-worker.js"
compatibility_date = "2026-06-20"
[vars]
GITHUB_CLIENT_ID = "xxx"
# 必加 secrets：
# wrangler secret put GITHUB_CLIENT_SECRET八、SEO 优化
8.1 llms.txt（AI Agent 友好）
text
# 麦序子
本站提供装修行业 AI 工具、AI 电销机器人、装修 AI 客服、SketchUp+D5 学习路线、装修工地工天管理工具、设计师成交工具等资料。
## 重点页面
- AI 电销机器人是什么: https://maixuzi.cn/ai-callbot/
- 装修 AI 客服是什么: https://maixuzi.cn/decoration-ai-service/8.2 sitemap.xml（VitePress 自动生成）
九、部署流程总结
text
1. 写内容（docs/ 下的 markdown）
2. git push
3. Cloudflare Pages 自动 build + deploy
4. 后台编辑（maixuzi.cn/admin/ + GitHub OAuth）十、参考
- 网站：https://maixuzi.cn
- 仓库：https://github.com/lingyun15/maixuzi-site
- VitePress：https://vitepress.dev/
- Decap CMS：https://decapcms.org/
- Cloudflare Pages：https://pages.cloudflare.com/
更多内容：https://maixuzi.cn