使用AI智能体对wp网站进行前后端分离
Astro, Headless Wordpress. wp网站负责后端发布内容,Astro构建静态前端。代码存放平台github。部署平台cloudflare pages.
关键实施步骤(纯静态路线)
- WP 侧:保留后台做编辑器,REST API 自带;需要聚合查询就装 WPGraphQL。
- 初始化 Astro:npm create astro@latest,静态输出不需要任何 adapter。
- 数据层:写个 src/lib/wp.ts 封装 fetch,用 getStaticPaths() 生成文章/分类动态路由。
- 构建:CI 里跑 astro build 产出 dist/。
- 部署:推到 Cloudflare Pages / Vercel / Netlify,绑定 Git 仓库。
- 自动重建:WP 装 WP Webhooks 或 JAMstack Deployments 插件,内容发布时 POST 到部署平台的 Build Hook,自动触发 Astro 重建。
构建开始前的三件事
- 验证 REST API 是否开启 + 返回格式是否正常。
- 看看现有的文章/分类/媒体规模(估算一下未来构建耗时)。
- 顺便判断是否需要装 WPGraphQL 或其他增强插件。
项目骨架
- src/lib/wp.ts — 强类型的 WP REST 客户端(分页拉取所有 posts / pages + CF7 表单)
- src/layouts/BaseLayout.astro + src/styles/global.css — 站点外壳(导航/页脚)
- src/pages/index.astro — 首页(渲染 why-you-buy-dtpmp-here 页面内容)
- src/pages/[slug].astro — 28 篇文章 + 其余 3 个页面(用 slug 路由,1:1 保留旧 URL)
- src/pages/news/index.astro — 文章列表
- src/pages/contact.astro — 联系页 + CF7 表单自动注入(开启 CF7 REST 后即可用,未开启时显示友好降级提示)
- src/pages/404.astro — 404
- deploy/build.sh + deploy/webhook.mjs + deploy/irodtpmp-astro.service — 部署流水线:服务器跑 Node + HMAC 签名 webhook 触发构建 + rsync 到 nginx 目录
- README.md — 完整部署指南(nginx 配置、systemd、WP 端 webhook 插件设置全在里头)
一、AI智能体构建完成后,如何本地预览
1. 启用dev服务器
方法一:推荐使用vs code.
- 打开项目工作间的文件夹,
- Ctrl + `(键盘左上 ESC 下面那个反引号)打开内置终端
- 直接粘贴运行:
PATH="/c/Users/用户/.workbuddy/binaries/node/versions/22.22.2:$PATH" npm run dev - 看到 Local http://localhost:4321/ → 浏览器访问它
一行搞定:& "C:\Users\用户\.workbuddy\binaries\node\versions\22.22.2\node.exe" "C:\Users\用户\.workbuddy\binaries\node\versions\22.22.2\node_modules\npm\bin\npm-cli.js" run dev
方法二:Git Bash(如果你想直接用)
- 桌面或开始菜单搜 “Git Bash” ,打开
- 切到项目目录:
cd "/c/Users/iro/WorkBuddy/2026-10-13-09-42-47/irodtpmp-astro" - 跑dev:
PATH="/c/Users/iro/.workbuddy/binaries/node/versions/22.22.2:$PATH" npm run dev
2. 验证是否启动
astro v5.x.x started
┃ Local http://localhost:4321/
┃ Network use --host to expose注意:启动后别关终端窗口——dev 服务器一直在跑,关了就停了。要停就 Ctrl + C。
3. 重启dev server
方法一:用之前开的 PowerShell 窗口(推荐)
如果 dev server 还开着,直接 Ctrl + C 停掉,然后 ↑调出上次的命令回车:
Ctrl+C
(等几秒,出现 PS C:\...> 提示符)
↑ Enter二、搭建方案和思路
把wordpress迁移到子域名,子域名绑定子目录,根目录的文件不动,主域名指向cloudflare(部署平台)。子域名的wordpress站用于更新内容。
1. cPanel中的操作
- 备份原站文件、数据库
- 复制文件到子目录、并新建数据库导入sql文件
- 在cPanel中创建子域名、并绑定子目录
- 修改wp-config.php,以及sql中的数据表
- 验证子域名可用,打开网站、网页和登录后台
- 浏览器开 https://子域名/wp-json/wp/v2/posts,能看到 JSON 就成功了
2. github建仓库
- 打开 github.com/new
- Repository name 填仓库名
- 选 Private(推荐,站点内容不必公开)
- 不要勾选 "Add a README" / ".gitignore" / "license"(我们本地已有)
- 点 Create repository
在终端上推送代码
cd "workbuddy工作间文件夹" git remote add origin https://github.com/<你的用户名>/xxxxx.git git push -u origin main推送时会弹窗让你登录 GitHub(浏览器授权或填 Personal Access Token)。
3. Cloudflare Pages接入
- 登录 Cloudflare Dashboard | Manage Your Account → Workers & Pages → Create → Pages → Connect to Git
- 授权 GitHub,选中 irodtpmp-astro 仓库
构建设置(wrangler.toml 会自动填好,核对一下):
- Framework preset: Astro
- Build command: npm run build
- Build output directory: dist
添加环境变量:Settings → Environment variables → Production
WP_BASE = https://wp.irodtpmp.com- 点 Save and Deploy → 等 1-2 分钟构建完,会给你一个 xxx.pages.dev 临时网址,先打开验证
绑定域名
Cloudflare Pages → 项目 → Custom domains → 添加 xxx.com 和 www.xxx.com。- 如果 xxx.com 的 DNS 已在 Cloudflare → 一键绑定,自动配好。
- 如果 DNS 不在 Cloudflare → 要先把域名的 nameserver 改到 Cloudflare(在域名注册商那边改),等生效后再绑。
三、后续更新
WP 后台发布后,Cloudflare 后台 → Deployments → 点 Retry deployment。






