Tôi Muốn Có Knowledge Base Đẹp Như Các Công Ty Lớn

Tôi luôn ngưỡng mộ knowledge base của Stripe, Cloudflare và Notion — thiết kế sạch, tìm kiếm nhanh, đa ngôn ngữ, đẹp trên điện thoại.

Nhưng chắc phải tốn nhiều tiền, hoặc cần cả đội engineer không?

Tôi thử hỏi AI. Câu trả lời làm tôi ngạc nhiên.

---

Những Gì Tôi Đã Thử Trước Khi Hỏi AI

Bản năng đầu tiên là Notion: miễn phí, đẹp, dễ dùng. Nhưng Notion public page có một số vấn đề — tải chậm, SEO gần như bằng không, và tùy chỉnh branding rất hạn chế.

Rồi tôi xem GitBook. Gói SaaS tháng không rẻ, và cảm giác đặt nội dung trên nền tảng của người khác thật không thoải mái.

WordPress thì khỏi nói — cài plugin, quản lý database, cấu hình CDN. Chỉ nghĩ đến đã mệt.

---

AI Khuyên Gì

Tôi tóm tắt yêu cầu và hỏi AI:

Tôi cần một knowledge base có: đa ngôn ngữ, tìm kiếm tích hợp, thân thiện SEO, miễn phí hoặc gần miễn phí, có thể tùy chỉnh branding, chi phí bảo trì thấp.

AI đưa ra một số hướng:

Lựa chọn	Ưu điểm	Nhược điểm
Notion	Dễ bắt đầu	Branding kém, SEO yếu, cần trả phí mới dùng được custom domain
GitBook	Thiết kế đẹp	Tháng đắt, nội dung không nằm trong tay mình
Docusaurus	Tính năng đầy đủ	Setup phức tạp, cần biết React
VitePress	Nhẹ, nhanh, thiết kế sạch	Cần biết Markdown cơ bản
MkDocs	Hệ sinh thái Python	Ít theme, cảm giác "kỹ thuật" hơn

AI khuyên VitePress — vì đây là framework mà tài liệu chính thức của Vue sử dụng (website docs của Vue chạy trên nó), community hoạt động, theme mặc định trông rất đẹp mà không cần chỉnh nhiều, và deploy lên Cloudflare Pages hoàn toàn miễn phí.

Vậy tôi thử.

---

VitePress Là Gì

VitePress là static site generator được xây dựng đặc biệt cho tài liệu kỹ thuật và knowledge base.

Bạn viết Markdown, nó tạo ra trang web đẹp. Navigation, sidebar, tìm kiếm full-text, dark mode, đa ngôn ngữ — tất cả built-in, không cần cài plugin thêm.

Tài liệu chính thức của Vue, Vite và Vitest đều dùng VitePress. Trải nghiệm bạn có khi đọc những docs đó — đó chính là giao diện mặc định của VitePress.

---

Quá Trình Build

1. Khởi Tạo Dự Án

npm create vitepress@latest

Làm theo các prompt tương tác, chọn tên và theme (khuyên chọn Default). Khoảng một phút là xong khởi tạo.

Vào thư mục và cài đặt:

cd my-knowledge-base
npm install
npm run docs:dev

Mở http://localhost:5173 để xem preview local.

---

2. Cấu Hình config.mts (Bước Quan Trọng Nhất)

Tất cả cài đặt đều trong docs/.vitepress/config.mts:

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'Knowledge Base Của Tôi',
  description: 'Knowledge Base Công Ty',
  outDir: '../public',

  themeConfig: {
    nav: [
      { text: 'Trang chủ', link: '/' },
      { text: 'Tài liệu', link: '/docs/intro' },
    ],
    sidebar: {
      '/docs/': [
        {
          text: 'Bắt đầu nhanh',
          items: [
            { text: 'Giới thiệu', link: '/docs/intro' },
            { text: 'Cài đặt', link: '/docs/install' },
          ],
        },
      ],
    },
    search: {
      provider: 'local',   // tìm kiếm built-in, không cần dịch vụ bên thứ ba
    },
  },
})

Nav, sidebar, search — vài dòng config là xong.

---

3. Cài Đặt Đa Ngôn Ngữ

Nếu cần nhiều ngôn ngữ, thêm locales vào config:

export default defineConfig({
  locales: {
    root: {
      label: 'Tiếng Việt',
      lang: 'vi-VN',
      themeConfig: {
        nav: [...],
        sidebar: {...},
      },
    },
    en: {
      label: 'English',
      lang: 'en-US',
      themeConfig: {
        nav: [...],
        sidebar: {...},
      },
    },
  },
})

Mỗi ngôn ngữ có nav và sidebar riêng. Bài viết đặt trong thư mục tương ứng (docs/en/...).

---

4. Viết Nội Dung

Mỗi bài là một file .md, hỗ trợ Markdown chuẩn cộng thêm syntax mở rộng của VitePress:

# Tiêu đề bài viết

Nội dung, hỗ trợ **in đậm**, `code inline`, bảng, v.v.

::: tip Lưu ý
Đây là hộp ghi chú
:::

::: warning Cảnh báo
Đây là hộp cảnh báo
:::

Cấu trúc thư mục ánh xạ trực tiếp thành URL: docs/products/intro.md → /products/intro

---

5. Build và Deploy lên Cloudflare Pages

npm run docs:build

Tạo ra file HTML/CSS/JS tĩnh trong thư mục outDir.

Deploy bằng Wrangler CLI:

npx wrangler pages deploy ./public --project-name my-knowledge-base

Hoặc kết nối GitHub repo với Cloudflare Pages — mỗi lần push tự động trigger build và deploy.

---

Kết Quả Cuối Cùng Trông Như Thế Nào

• Sidebar trái phân loại rõ ràng
• Outline trang bên phải (tự động lấy từ heading)
• Search bar trên cùng với full-text indexing
• Toggle dark / light mode
• Responsive hoàn hảo trên mobile
• Bộ chuyển đổi ngôn ngữ
• Timestamp "cập nhật lần cuối" ở mỗi bài

Chất lượng thiết kế ngang tầm Stripe Docs và Cloudflare Docs — và logo cùng màu brand của bạn hoàn toàn có thể tùy chỉnh.

Xem kết quả thực tế: Ascentek Digital Knowledge Base

---

Bảo Trì Dễ Đến Mức Nào

Thêm bài viết nghĩa là tạo file .md mới và thêm một dòng vào sidebar trong config.mts.

Không cần backend, không cần database, không cần lo plugin conflict hay cache. git push là tự động lên live.

Đây là phần tôi hài lòng nhất về hệ thống này — chi phí bảo trì gần như bằng không.

---

Chi Phí

Hạng mục	Chi phí
VitePress	$0 (open source MIT)
Deploy Cloudflare Pages	$0 (deploy tĩnh không giới hạn)
Custom domain (tùy chọn)	Phí đăng ký domain thôi, ~$10–15/năm
Tổng	Gần $0

---

Bạn muốn xây dựng knowledge base riêng nhưng không biết bắt đầu từ đâu?
Liên hệ chúng tôi tại ascentek.info — chúng tôi có thể thảo luận kế hoạch kiến trúc phù hợp với quy mô của bạn.

---

Đọc thêm

• Tổng Quan Về Tích Hợp AI Vào Marketing
• Xây Dựng Thư Viện Ảnh Với Gói Miễn Phí Cloudflare