AI 测试博客从创建到上线操作手册
AI 测试博客从创建到上线操作手册
[!summary] 最终成果
使用 VuePress 2 + VuePress Theme Hope 创建中文 AI 测试博客，将源码保存到 GitHub，并通过 Cloudflare Pages 免费部署。
一、整体流程
本地创建 VuePress 博客
→ 使用 Claude Code 修改内容和配置
→ 本地预览并执行生产构建
→ Git 提交并推送到 GitHub
→ Cloudflare Pages 自动部署
→ 获得 pages.dev 公开访问地址各平台的作用：
| 工具 | 作用 |
|---|---|
| VuePress + Theme Hope | 生成静态博客网站 |
| Claude Code | 修改博客配置、页面和文章 |
| PyCharm | 编辑文件，以及完成 Git 提交和推送 |
| GitHub | 保存博客源代码和版本记录 |
| Cloudflare Pages | 自动构建并托管静态网站 |
pages.dev | Cloudflare 免费提供的公开二级域名 |
二、准备环境
建议提前安装：
- Node.js 22 LTS
- Git
- PyCharm 或 VS Code
- Claude Code（需要使用 AI 修改项目时）
- GitHub 账号
- Cloudflare 账号
在 CMD 中检查：
node -v
npm -v
git --version三、创建 VuePress Theme Hope 项目
进入项目父目录：
cd /d D:\AIProjects执行初始化命令：
npm init vuepress-theme-hope@latest ai-test-blog初始化向导建议这样选择：
| 选项 | 建议值 | 说明 |
|---|---|---|
| 向导语言 | 简体中文 | 只影响初始化向导的显示语言 |
| 打包器 | Vite | 启动和构建速度快，适合当前项目 |
| 应用名称 | ai-test-blog | 用于 package.json，使用小写英文和短横线 |
| 应用版本 | 2.0.0 | 可保留默认值 |
| 开源协议 | 按需要选择 | 若不确定是否开放博客源码和内容，不要盲目选择 MIT |
| 多语言 | N | 当前博客只使用简体中文 |
| 初始化 Git | Y | 自动创建本地 Git 仓库 |
| GitHub Pages 工作流 | N | 本项目使用 Cloudflare Pages 部署 |
| npm 软件源 | 国内镜像源 | 国内网络通常安装更快 |
| 立即启动 Demo | Y | 创建后直接检查默认页面 |
[!warning] 关于 MIT 协议
MIT 不会让作者失去著作权，但会允许别人较自由地使用、修改和分发被许可的内容。若只想开放网站代码、不想开放原创文章，建议后续在LICENSE和 README 中明确“代码与文章内容采用不同许可”，或先不添加许可证。
启动成功后，浏览器访问：
http://localhost:8080终端持续运行是正常现象。停止服务使用：
Ctrl + C四、使用 Claude Code 改造成 AI 测试博客
进入项目目录：
cd /d D:\AIProjects\ai-test-blog
claude可以让 Claude Code 直接完成以下工作：
- 将博客名称设置为“AI 测试进阶指南”。
- 设置作者“高明”和博客副标题。
- 建立 AI 测试、Claude Code 与 Codex、MCP 与 Skills、AI Testing Agent、自动化测试、职业转型、关于我等栏目。
- 开启分类、标签、时间线、全文搜索、深色模式、代码复制、文章目录、上一篇和下一篇。
- 文件名及 URL 使用英文和短横线，页面标题使用中文。
- 创建示例文章并删除无关模板内容。
- 检查
.gitignore，排除依赖、构建产物、缓存、环境变量和密钥。 - 执行生产构建并修复所有错误。
可直接使用下面的提示词：
请检查当前 VuePress 2 + VuePress Theme Hope 项目，将默认模板改造成中文 AI 测试技术博客。
博客名称：AI 测试进阶指南
英文名称：AI Testing Journey
作者：高明
副标题：记录传统测试工程师的 AI 测试转型、工具实践与真实项目
请直接修改项目文件，完成：
1. 修改首页、网站名称、描述和作者信息。
2. 设置顶部导航：首页、AI 测试、Claude Code 与 Codex、MCP 与 Skills、AI Testing Agent、自动化测试、职业转型、关于我。
3. 创建对应的中文栏目、文章目录和左侧导航。
4. 开启分类、标签、时间线、全文搜索、深色模式、代码复制、文章目录、上一篇和下一篇。
5. 文件名和 URL 使用英文及短横线，页面标题使用中文。
6. 创建三篇示例文章：传统测试工程师为什么要学习 AI 测试；Claude Code + Playwright MCP 安装与验证；从 0 到 1 创建 AI Testing Agent。
7. 首页加入博客定位、主要内容、推荐阅读和开始阅读按钮。
8. 删除无关演示内容，保留 Theme Hope 正常运行所需文件。
9. 检查 .gitignore，不提交 node_modules、dist、缓存、环境变量和密钥。
10. 完成后执行 npm run docs:build，修复全部构建错误，并汇报修改文件和文章数量。
不要只提供操作说明，请直接修改文件并完成构建验证。不要虚构工作经历、项目成绩和社交账号。五、本地预览和生产构建
本地预览：
npm run docs:dev打开：
http://localhost:8080重点检查：
- 首页、导航和作者信息是否正确
- 每篇文章是否能打开
- 是否存在模板残留文章
- 中文是否正常显示
- 手机宽度下导航是否溢出
- 页面链接是否出现 404
正式上传前执行：
npm run docs:build必须确认没有红色错误。当前项目若以 src 为文档目录，输出目录通常是：
src/.vuepress/dist[!important]
Cloudflare Pages 的“构建输出目录”必须填写项目实际生成的目录。如果项目使用docs作为文档目录，则通常是docs/.vuepress/dist。
六、检查 .gitignore
至少应排除：
node_modules/
src/.vuepress/.temp/
src/.vuepress/.cache/
src/.vuepress/dist/
.env
.env.*
!.env.example不要把 API Key、Token、账号密码或真实 .env 文件提交到 GitHub。
七、创建 GitHub 仓库
填写：
Repository name：ai-test-blog
Description：AI 测试进阶指南：记录 AI 测试转型、工具实践与真实项目
Visibility：Public不要让 GitHub 自动创建以下文件，因为本地项目已经存在相关内容：
- README
.gitignore- License
创建后仓库地址为：
https://github.com/gemwwl827/ai-test-blog.git八、使用 PyCharm 提交并推送
8.1 提交本地文件
在 PyCharm 中选择：
Git → 提交快捷键：
Ctrl + K勾选项目源码和配置文件，但不要提交 node_modules、dist、缓存或密钥文件。
首次提交信息可填写：
feat: build initial AI testing blog然后点击“提交”。
[!note]
初始化向导中已经选择“初始化 Git：Y”，因此通常不需要再执行git init。
8.2 配置远程仓库
选择：
Git → 管理远程 → +填写：
名称：origin
URL：https://github.com/gemwwl827/ai-test-blog.git8.3 推送到 GitHub
选择：
Git → 推送快捷键：
Ctrl + Shift + K确认推送方向为：
main → origin/main第一次推送可能打开浏览器，按提示登录 GitHub 并授权 PyCharm。
如果本地分支仍叫 master，可以在终端执行：
git branch -M main九、使用 Cloudflare Pages 部署
进入 Cloudflare 控制台：https://dash.cloudflare.com/
正确入口：
计算
→ Workers 和 Pages
→ 创建应用程序
→ 页面底部“想要部署 Pages？开始使用”
→ 导入现有 Git 存储库然后：
- 连接 GitHub。
- 选择
gemwwl827/ai-test-blog。 - 进入 Pages 构建配置。
构建配置如下：
项目名称：ai-test-blog
生产分支：main
框架预设：无（或 VuePress，如果界面提供）
构建命令：npm run docs:build
构建输出目录：src/.vuepress/dist
根目录：留空添加环境变量：
NODE_VERSION = 22最后点击：
保存并部署[!warning] 不要进入 Workers 部署流程
如果页面只要求填写npx wrangler deploy，而没有“构建输出目录”，说明进入了 Workers 流程。返回并从页面底部的 Pages 入口重新开始。
部署成功后访问：
https://ai-test-blog.pages.dev
十、关于服务器和域名
https://ai-test-blog.pages.dev 是 Cloudflare 免费提供的二级域名，也是当前博客的正式公开地址。
目前：
- 不需要购买服务器
- 不需要购买独立域名
- GitHub 推送后可以自动更新
- Cloudflare Pages 负责静态网站托管
以后如果希望地址更专业，可以购买独立域名并绑定到 Cloudflare Pages。静态博客仍然不需要另外购买服务器。
[!note] 关于备案
是否需要 ICP 备案取决于域名解析和网站实际托管地区等因素，不能简单理解为“使用pages.dev就永远不需要备案”。当前使用 Cloudflare Pages 的默认地址时，一般不涉及中国大陆服务器备案流程；若以后更换域名或托管方式，应按当时规则确认。
十一、以后发布新文章的固定流程
假设文章目录为 src，创建文件：
src/ai-testing/what-is-ai-testing.md文章模板：
---
title: 什么是 AI 测试
date: 2026-07-22
category:
- AI 测试
tag:
- AI
- 软件测试
---
# 什么是 AI 测试
AI 测试不是简单地让大模型生成几条测试用例，而是把大模型、自动化框架、MCP、Skills 和测试数据结合起来。
## 传统测试存在的问题
在这里填写正文。
## AI 可以提供哪些帮助
在这里填写正文。
## 我的实践过程
在这里填写真实操作过程、截图和问题解决方法。每次更新按以下顺序操作：
新增或修改文章
→ npm run docs:dev 本地预览
→ npm run docs:build 构建检查
→ PyCharm Git 提交
→ 推送到 GitHub
→ Cloudflare Pages 自动重新部署
→ 打开线上地址复查命令行方式：
npm run docs:build
git add .
git commit -m "docs: add AI testing article"
git push十二、建议的第一篇真实文章
建议主题：
Claude Code + Playwright MCP：从安装到完成第一次真实 UI 测试建议结构：
- 为什么传统测试工程师需要学习 MCP。
- Claude Code 与 Playwright MCP 分别负责什么。
- 安装和连接过程。
- 打开 SauceDemo 并识别登录元素。
- 实际遇到的问题及解决方法。
- MCP 与传统 Playwright 脚本的区别。
- 下一步如何发展成 AI Testing Agent。
十三、常见问题
1. 本地能打开，Cloudflare 构建失败
先检查：
- Cloudflare 的 Node.js 版本是否为 22
- 构建命令是否为
npm run docs:build - 输出目录是否与本地实际目录一致
package-lock.json是否已经提交- 部署日志最下面的第一条真实报错
2. 推送后网站没有立即变化
进入 Cloudflare Pages 查看最新部署状态。自动构建通常需要几分钟；部署成功后再刷新网页，必要时使用强制刷新。
3. 文章打开后出现 404
检查导航路径、文件路径和最终 URL 是否一致，注意大小写和短横线。修改后重新执行生产构建。
4. Git 中出现 node_modules
先确认 .gitignore 已包含 node_modules/。如果此前已经被 Git 跟踪，需要从 Git 索引中移除后再提交，但不要删除本地依赖目录。
5. 是否需要经常进入 Cloudflare 手动部署
不需要。正常流程是修改本地文件并推送 GitHub，Cloudflare Pages 会自动构建和发布。