怎么用AI建站搭一个带全文搜索的知识库站点?
学完这篇,你能从零搭出一个跑在自己电脑上、带中文全文搜索、可以直接部署上线的知识库站点,全程代码交给 AI 写,你只负责下命令和验收。
第一步:装环境,并让 AI 帮你定选型
这一步要拿到一个能跑 Node 的环境和一份明确的技术方案。先装 Node.js 20 LTS(VitePress 1.x 要求 Node 18+,低于这个版本会直接报引擎不匹配),装完在终端执行:
node -v # 应输出 v20.x 或 v18.x
npm -v
再装 VS Code。然后打开 Claude 或 ChatGPT,把下面这段直接粘进去:
我要做一个内部知识库站点,约 200 篇文档,需要中文全文搜索,能部署到 Vercel,不想写后端。请对比 VitePress、Docusaurus、Astro Starlight 三个方案,说明各自的中文搜索实现方式和学习成本,最后给一个推荐。
拿到推荐后(多数情况会推荐 VitePress,因为它自带本地搜索、构建快),再让 AI 输出一份带命令的搭建步骤,后面每一步都拿它当对照。
第二步:搭起 VitePress 骨架
这一步做完,你本地会有一个能访问的文档站。在终端依次执行:
mkdir kb && cd kb
npm add -D vitepress@1
npx vitepress init
init 会问几个问题,按下面这样回答:Where should VitePress initialize the config? 填 ./docs;Site title 填你的知识库名字;Theme 选 Default Theme;Use TypeScript? 选 Yes;Add VitePress npm scripts to package.json? 选 Yes。
然后:
npm run docs:dev
浏览器打开 http://localhost:5173,看到默认首页就成功了。
注意:
init生成的配置文件是docs/.vitepress/config.mts,后面所有配置改动都在这个文件里,别去找config.js。
第三步:让 AI 批量生产 Markdown 文档
知识库的骨架是文件,不是页面。约定一个目录规范:docs/guide/ 放操作手册,docs/faq/ 放常见问题,一个主题一个 .md 文件,文件名用英文短横线连接(比如 reset-password.md)。
把你现有的 Word、PDF、Confluence 导出内容分批贴给 AI,用这个提示词:
把下面的内容整理成一篇 Markdown 文档,要求:只保留一个一级标题、不生成目录、代码块标注语言、frontmatter 只保留 title 字段。文件名叫什么也请给出。
侧边栏不用手写。执行 npm add -D vitepress-sidebar,然后在 config.mts 里用 generateSidebar 读目录自动生成,具体写法让 AI 按你当前的目录结构给一份——版本差异较大,以 npm 上最新版文档为准。
第四步:打开中文全文搜索(最关键一步)
VitePress 自带本地搜索,靠 MiniSearch 实现,零后端、零费用。在 docs/.vitepress/config.mts 的 themeConfig 里加上:
search: {
provider: 'local',
options: {
miniSearch: {
options: {
tokenize: (text) => text
.split(/[\s\-.,;:!?()\[\]]+/)
.flatMap((t) => {
if (!/[\u4e00-\u9fa5]/.test(t)) return [t]
const c = [...t]
return [...c, ...c.slice(0, -1).map((x, i) => x + c[i + 1])]
})
},
searchOptions: { prefix: true, fuzzy: 0.2 }
}
}
}
注意:默认分词按空格切,中文整段会被当成一个词,搜「登录」搜不到「登录失败」。上面这段
tokenize做了中文二元切分,是中文站点必须改的地方,不改搜索基本没法用。
保存后 npm run docs:dev 会自动热更新,直接在搜索框输入一个中文词验证。
第五步:构建、验收、部署
这一步要拿到可上线的静态文件。执行:
npm run docs:build
npm run docs:preview
preview 默认跑在 http://localhost:4173,这是最终产物,搜索、锚点、404 页都在这里验。确认没问题后推到 GitHub,在 Vercel 里 Add New → Project 导入该仓库,Build Command 填 npm run docs:build,Output Directory 填 docs/.vitepress/dist,点 Deploy。
注意:VitePress 是静态生成,不是 SPA,
Output Directory填错会得到 404 首页,别填成dist或docs。
第六步:报错就原样丢给 AI
出问题时,把报错全文、config.mts 完整内容、node -v 输出、以及你已经试过什么,一次性发给 AI,并说「只给需要改动的文件和改动后的完整内容」。比截半句报错问「为什么报错」的效率高一个量级。
小结
- 选型先问 AI,但让它给对比而不是直接给代码,你才好判断。
- 骨架用
npx vitepress init,配置全在docs/.vitepress/config.mts。 - 搜索必须改
tokenize,否则中文搜不到东西,这是整个流程最容易翻车的一步。 - 部署前一定先跑
npm run docs:preview,验收的是4173端口,不是5173。 - 文档内容交给 AI 批量转换,但目录规范和文件名要你自己定死,否则侧边栏和搜索会很乱。
原文链接:https://www.gj0.com/thread-839.html
转载请注明出处并保留本声明;内容仅代表作者观点,与本站立场无关。若本文涉嫌侵权,请联系本站处理。