Appearance
用 VitePress + Cloudflare Pages 搭建装修行业 AI 工具站
最近上线了一个网站：https://maixuzi.cn ，定位是装修行业 AI 工具资料库。本文分享技术栈选型、目录结构和 Cloudflare Pages 部署全过程。
一、前言
为什么要做 maixuzi.cn？
装修行业 AI 工具资料库：
- AI 电销机器人
- 装修 AI 客服
- SketchUp+D5 学习路线
- 工天管理工具
内容方向：让装修行业相关内容更容易被搜索引擎和 AI Agent 发现、读取和引用。
二、技术栈
| 层 | 选型 | 理由 |
|---|---|---|
| 静态站点 | VitePress | Vue 生态 + Markdown 原生 + 中文支持好 |
| 后台管理 | Decap CMS | 免后端 + GitHub OAuth + 中文支持 |
| 部署平台 | Cloudflare Pages | 免费 + 全球 CDN + Pages Functions |
| Functions | Cloudflare Pages Functions | 简单 node runtime |
| OAuth 网关 | Cloudflare Worker | 给 Decap CMS 做 GitHub OAuth 网关 |
三、目录结构
text
maixuzi-site/
├── docs/ # VitePress 内容源
│ ├── .vitepress/
│ │ ├── config.mts # VitePress 配置
│ │ └── theme/ # 自定义主题
│ ├── ai-callbot/ # AI 电销机器人
│ ├── decoration-ai-service/ # 装修 AI 客服
│ ├── sketchup-d5/ # SketchUp+D5
│ ├── workday-tool/ # 工天管理工具
│ ├── wechat/ # 公众号精选
│ ├── templates/ # 模板工具
│ ├── public/ # 静态资源
│ │ ├── admin/ # Decap CMS 后台
│ │ ├── llms.txt # AI Agent 友好的站点说明
│ │ └── robots.txt
│ └── index.md
├── functions/ # Cloudflare Pages Functions
│ ├── auth.js
│ ├── callback.js
│ └── baidu_verify_*.js
└── cloudflare/ # Cloudflare Worker
├── wrangler.toml
└── decap-oauth-worker.js四、VitePress 配置
docs/.vitepress/config.mts：
typescript
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '麦序子',
description: '装修行业 AI 客服、电销机器人、SketchUp+D5、工天管理工具与设计师成交工具资料库。',
lang: 'zh-CN',
cleanUrls: true,
lastUpdated: true,
sitemap: { hostname: 'https://maixuzi.cn' },
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: 'AI电销机器人', link: '/ai-callbot/' },
{ text: '装修AI客服', link: '/decoration-ai-service/' },
{ text: 'SketchUp+D5', link: '/sketchup-d5/' },
{ text: '工天管理工具', link: '/workday-tool/' }
],
sidebar: [/* 业务侧边栏 */],
search: { provider: 'local' }
}
})五、Cloudflare Pages 配置
| 配置项 | 值 |
|---|---|
| Build command | npm run docs:build |
| Build output directory | docs/.vitepress/dist |
| Root directory | / |
| Environment variables | 无（Pages Functions 用 wrangler secrets） |
六、Decap CMS + GitHub OAuth
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
locale: zh_Hans
media_folder: docs/public/uploads
public_folder: /uploads
collections:
- name: ai_callbot
label: AI 电销机器人
folder: docs/ai-callbot
fields:
- { label: 标题, name: title, widget: string }
- { label: 正文, name: body, widget: markdown }6.3 GitHub OAuth Worker
cloudflare/decap-oauth-worker.js（简化）：
javascript
export default {
async fetch(request, env) {
const url = new URL(request.url)
if (url.pathname === '/auth') {
const redirect = new URL('https://github.com/login/oauth/authorize')
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('https://github.com/login/oauth/access_token', {
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({
client_id: env.GITHUB_CLIENT_ID,
client_secret: env.GITHUB_CLIENT_SECRET,
code
})
})
const tokenData = await tokenResponse.json()
// 返回 HTML，postMessage 给 opener
return new Response(/* popup script with token */, {
headers: { 'content-type': 'text/html; charset=utf-8' }
})
}
return new Response('Not found', { status: 404 })
}
}6.4 Worker 部署
bash
cd cloudflare
wrangler deploy七、SEO 优化
7.1 llms.txt
docs/public/llms.txt：
text
# 麦序子
本站提供装修行业 AI 工具、AI 电销机器人、装修 AI 客服、SketchUp+D5 学习路线、装修工地工天管理工具、设计师成交工具等资料。
## 重点页面
- AI 电销机器人是什么: https://maixuzi.cn/ai-callbot/
- 装修 AI 客服是什么: https://maixuzi.cn/decoration-ai-service/7.2 robots.txt
text
User-agent: *
Allow: /
Sitemap: https://maixuzi.cn/sitemap.xml八、收录效果
- 上线 2 天
- Bing/百度已提交收录
- sitemap.xml 自动生成
九、参考
- 网站：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