我想要有个像大公司那样漂亮的知识库
我一直很羡慕 Stripe、Cloudflare、Notion 那种知识库——设计简洁、搜索快、多语系、手机也好看。
但那不是应该很贵、或者要有工程师才做得到吗？
我去问了 AI，结果答案让我有点惊讶。
问 AI 之前，我自己试过什么
一开始直觉反应是用 Notion：免费、漂亮、好上手。但 Notion 公开页面有几个问题——加载偏慢、SEO 几乎没有、品牌感也很难自定义。
然后考虑过 GitBook，SaaS 方案月费不便宜，而且内容放在别人的平台上总是有点不安心。
WordPress 就更不用说，要装插件、维护数据库、配置 CDN，光想就累。
问 AI 推荐什么方案
我把需求整理好丢给 AI：
我需要一个知识库，要有：多语系、内置搜索、SEO 友好、免费或几乎免费、可以自定义品牌、维护成本低。
AI 给了几个方向：
| 方案 | 优点 | 缺点 |
|---|---|---|
| Notion | 上手快 | 品牌感差、SEO 弱、付费才能自定义域名 |
| GitBook | 设计好看 | 月费高、内容不在自己手上 |
| Docusaurus | 功能强 | 设置复杂，React 技术门槛 |
| VitePress | 轻量、快、设计简洁 | 需要基本 markdown 知识 |
| MkDocs | Python 生态 | 主题选择少，风格较工程感 |
AI 的推荐是 VitePress——理由是：它是 Vue 官方文档用的框架（Vue 官方文档就跑在它上面），社区活跃，主题设计本身就已经很好看，不需要额外改很多，而且部署到 Cloudflare Pages 完全免费。
那我就试了。
VitePress 是什么
VitePress 是一个静态网站生成器，专门用来做技术文档和知识库。
你写 Markdown，它帮你转成漂亮的网页。导航、侧边栏、全文搜索、深色模式、多语系——全部内置，不需要装插件。
Vue、Vite、Vitest 的官方文档都是用 VitePress 做的。所以你在用官方文档的时候，看到的那种体验，就是 VitePress 的默认样子。
建置过程
1. 初始化项目
npm create vitepress@latest按照交互式提示走，选好名称、主题（建议选 Default），大概一分钟就初始化完成。
进入目录、安装依赖：
cd my-knowledge-base
npm install
npm run docs:dev打开 http://localhost:5173 就能看到本地预览。
2. 设置 config（最重要的一步）
所有设置都在 docs/.vitepress/config.mts：
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '我的知识库',
description: '公司知识库',
outDir: '../public',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '产品文档', link: '/docs/intro' },
],
sidebar: {
'/docs/': [
{
text: '快速开始',
items: [
{ text: '介绍', link: '/docs/intro' },
{ text: '安装', link: '/docs/install' },
],
},
],
},
search: {
provider: 'local', // 内置搜索，不需要第三方服务
},
},
})Nav、sidebar、搜索，几行设置搞定。
3. 多语系设置
如果需要多语系，在 config 加 locales：
export default defineConfig({
locales: {
root: {
label: '简体中文',
lang: 'zh-Hans',
themeConfig: {
nav: [...],
sidebar: {...},
},
},
en: {
label: 'English',
lang: 'en-US',
themeConfig: {
nav: [...],
sidebar: {...},
},
},
},
})每个语系有自己的 nav 和 sidebar，文章就放在对应的目录下（docs/en/...）。
4. 写内容
每篇文章就是一个 .md 文件，支持标准 Markdown 加 VitePress 扩展语法：
# 文章标题
正文内容，支持**粗体**、`行内代码`、表格等。
::: tip 提示
这是一个提示方框
:::
::: warning 注意
这是警告方框
:::目录结构对应 URL：docs/products/intro.md → /products/intro
5. Build 和部署到 Cloudflare Pages
npm run docs:buildBuild 完会产出静态 HTML/CSS/JS 在指定目录（outDir 设置的地方）。
部署用 Wrangler CLI：
npx wrangler pages deploy ./public --project-name my-knowledge-base或者直接把 GitHub repo 接到 Cloudflare Pages，每次 push 自动 build + deploy——不需要自己跑命令。
最终成品长什么样
- 左侧边栏清晰分类
- 右侧本页目录（自动抓标题）
- 顶部搜索一键全文索引
- 深色 / 浅色模式切换
- 手机版 RWD 完整
- 多语系切换
- 每篇文章显示「最后更新时间」
设计感直接对标 Stripe Docs、Cloudflare Docs 那个水准，而且你的 LOGO 和品牌色全部可以自定义。
实际成品可以看：Ascentek 数字知识库
维护起来有多简单
新增一篇文章就是新增一个 .md 文件，然后在 config.mts 的 sidebar 加一行链接。
不需要后台、不需要数据库、不需要管什么缓存或插件冲突。git push 就自动上线。
这是整个系统最让我满意的部分——维护成本几乎是零。
成本
| 项目 | 费用 |
|---|---|
| VitePress | $0（MIT 开源） |
| Cloudflare Pages 部署 | $0（无限静态部署） |
| 自定义域名（如果有） | 域名年费而已，约 $10–15/年 |
| 总计 | 几乎 $0 |
有兴趣架一个自己的知识库，但不确定从哪里开始？
欢迎咨询 ascentek.info，我们可以讨论适合你规模的架构规划。
延伸阅读