Appearance
从Docsify到VitePress:我和AI一起改造博客
一个晚上,几句话,把博客从Docsify换成了VitePress
缘起
有天突然想到,我博客的SEO怎么样?
打开Claude Code,我说了句:
"扫描整个网站,从SEO层面和个人博客这些方向去考虑哪些地方需要做优化"
几秒后AI告诉我:你的博客是Docsify,搜索引擎爬虫看到的页面几乎是空的。
什么意思?
AI打了个比方:你的博客像一家餐厅,Docsify就是门锁着,客人来了要自己敲门才能看到内容。搜索引擎的爬虫不会敲门,它看到门关着就走了。
我听懂了。
怎么办?
AI给了两个方案:
- 修补Docsify的SEO问题 - 但CSR的根本问题解决不了
- 迁移到VitePress - 静态站点生成,搜索引擎直接能看到完整内容
我问:迁移麻烦吗?
AI说:中等难度,1-2天。
我想了想:那就干吧。
开始改造
我说了句"先帮我做改造",AI就开始自动操作了。
遇到的坑
404问题
我说:点击开始阅读博客记录软件都是404
AI:需要在每个目录创建index.md,链接末尾要加斜杠
奇怪的报错
[plugin:vite:vue] Element is missing end tagAI:这篇文章有格式问题,和Vue模板解析冲突,我建议删除它。
我说:好,删掉吧
死链太多
10 dead link(s) found我问:这个怎么办?
AI:可以在配置里忽略死链检查。
构建成功
✓ building client + server bundles
✓ rendering pages
build complete in 2.3s部署上线
我说:env里面有服务器地址和密码,直接打包传上去重启就可以了。
AI自动读取.env,创建部署脚本,上传文件,重启Docker...
然后报错了:
Error: mounting "/data/personal-blog/nginx.conf" caused: not a directory我问:这是什么错误?
AI:上传时nginx.conf被创建成了目录,但Docker需要它是一个文件。
AI删除目录,上传正确的文件,重启...
又报错:
host not found in upstream "xianyu"AI:nginx配置里引用了一个叫xianyu的Docker容器,但这个容器不存在。我注释掉那段配置。
终于成功了。
成果
- 页面正常显示
- 源码全是完整HTML
- 搜索引擎能抓到了
我说了什么?
回顾整个过程,我说的话其实不多:
- "扫描整个网站,从SEO层面..."
- "那怎么办?"
- "迁移麻烦吗?"
- "先帮我做改造"
- "点击都是404"
- "好,删掉吧"
- "这个怎么办?"
- "直接传上去重启"
- "这是什么错误?"
就这些。
AI做了什么?
对比一下:
| 我说的 | AI做的 |
|---|---|
| "点击都是404" | 创建index.md,修复链接格式 |
| "好,删掉吧" | 删除问题文章 |
| "这个怎么办?" | 添加ignoreDeadLinks配置 |
| "这是什么错误?" | 检查服务器,修复nginx配置 |
我只需要告诉它"做什么",它自己搞定"怎么做"。
以前 vs 现在
以前改技术栈:
- 查阅文档,学习新框架
- 搜索教程,踩各种坑
- Stack Overflow找答案
- 花几天时间试错
现在:
- 告诉AI我想做什么
- AI自动分析、执行
- 遇到问题告诉AI现象
- AI定位并解决
花了多长时间?
| 项目 | 时间 |
|---|---|
| 本地改造和调试 | 约30-45分钟 |
| 部署和排错 | 约20-30分钟 |
| 总计 | 约1小时左右 |
写在最后
整个过程大概1小时,基本都在用AI做事情。
有些东西在AI的帮助下真的很简单。我是个后端程序员,让我做前端改造,以前需要:
- 查VitePress文档
- 学Vue配置
- 看前端构建流程
- 调试各种报错
- 花一两天时间
现在只需要自然语言对话,描述问题,AI自己搞定。
建议大家多尝试。
本文记录了一次真实的AI协作过程,所有对话都来自实际操作记录。