我想要有個像大公司那樣漂亮的知識庫
我一直很羨慕 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-TW',
themeConfig: {
nav: [...],
sidebar: {...},
},
},
en: {
label: 'English',
lang: 'en-US',
themeConfig: {
nav: [...],
sidebar: {...},
},
},
},
})每個語系有自己的 nav 和 sidebar，文章就放在對應的目錄下（docs/en/...）。
4. 寫內容
每篇文章就是一個 .md 檔案，支援標準 Markdown 加 VitePress 擴充語法：
# 文章標題
正文內容，支援**粗體**、`行內程式碼`、表格等。
::: tip 提示
這是一個提示方塊
:::
::: warning 注意
這是警告方塊
:::目錄結構對應 URL：docs/ec-marketing/intro.md → /ec-marketing/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，我們可以討論適合你規模的架構規劃。
延伸閱讀