ฉันอยากได้ Knowledge Base สวยๆ แบบบริษัทใหญ่

ฉันอิจฉา knowledge base ของ Stripe, Cloudflare และ Notion มาตลอด — ดีไซน์สะอาด ค้นหาเร็ว รองรับหลายภาษา สวยบนมือถือด้วย

แต่อันนั้นมันต้องใช้เงินเยอะ หรือต้องมีทีม engineer ไม่ใช่หรอ?

ฉันลองถาม AI ดู คำตอบที่ได้ทำให้ประหลาดใจ

---

สิ่งที่ลองทำก่อนถาม AI

สัญชาตญาณแรกคือ Notion: ฟรี สวย ใช้ง่าย แต่ Notion public page มีปัญหาหลายอย่าง — โหลดช้า SEO แทบเป็นศูนย์ และปรับแต่ง branding ได้น้อยมาก

จากนั้นดู GitBook แพ็กเกจ SaaS ราคาไม่ถูก และรู้สึกไม่สบายใจที่เนื้อหาอยู่บนแพลตฟอร์มคนอื่น

WordPress ยิ่งไม่ต้องพูดถึง — ต้องลง plugin จัดการ database ตั้งค่า CDN แค่คิดก็เหนื่อยแล้ว

---

AI แนะนำอะไร

ฉันสรุปความต้องการแล้วถาม AI:

ต้องการ knowledge base ที่มี: รองรับหลายภาษา, ค้นหาในตัว, เป็นมิตรกับ SEO, ฟรีหรือแทบฟรี, ปรับแต่ง branding ได้, maintenance ต่ำ

AI ให้ทิศทางหลายแบบ:

ตัวเลือก	ข้อดี	ข้อเสีย
Notion	เริ่มง่าย	branding แย่, SEO อ่อน, ต้องจ่ายเงินถึงจะใช้ custom domain ได้
GitBook	ดีไซน์สวย	ค่ารายเดือนแพง, เนื้อหาไม่ได้อยู่มือตัวเอง
Docusaurus	ฟีเจอร์ครบ	ตั้งค่าซับซ้อน, ต้องรู้ React
VitePress	เบา เร็ว ดีไซน์สะอาด	ต้องรู้ Markdown พื้นฐาน
MkDocs	ระบบนิเวศ Python	ธีมน้อย รู้สึกเป็น "วิศวกรรม" มากไป

AI แนะนำ VitePress — เพราะเป็น framework ที่ document ทางการของ Vue ใช้ (เว็บ docs ของ Vue รันอยู่บนมัน), community ใช้งานได้จริง, ธีม default สวยโดยไม่ต้องปรับมาก และ deploy ไปยัง Cloudflare Pages ฟรีทั้งหมด

ฉันเลยลองดู

---

VitePress คืออะไร

VitePress คือ static site generator ที่สร้างมาเพื่อทำ documentation และ knowledge base โดยเฉพาะ

คุณเขียน Markdown มันแปลงเป็นหน้าเว็บสวยๆ Navigation, sidebar, full-text search, dark mode, รองรับหลายภาษา — ทั้งหมด built-in ไม่ต้องติดตั้ง plugin เพิ่ม

Documentation ทางการของ Vue, Vite และ Vitest ทั้งหมดใช้ VitePress ประสบการณ์ที่คุณได้รับตอนอ่าน docs เหล่านั้น — นั่นคือหน้าตา default ของ VitePress

---

ขั้นตอนการสร้าง

1. เริ่มต้นโปรเจกต์

npm create vitepress@latest

ทำตาม prompt แบบ interactive เลือกชื่อและธีม (แนะนำ Default) ประมาณหนึ่งนาทีก็เสร็จ

เข้าไปใน directory และติดตั้ง:

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

เปิด http://localhost:5173 เพื่อดู preview ใน local

---

2. ตั้งค่า config.mts (ขั้นตอนสำคัญที่สุด)

การตั้งค่าทั้งหมดอยู่ใน docs/.vitepress/config.mts:

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'Knowledge Base ของฉัน',
  description: 'Knowledge Base บริษัท',
  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',   // ค้นหา built-in ไม่ต้องบริการ third-party
    },
  },
})

Nav, sidebar, search — config ไม่กี่บรรทัดก็เสร็จ

---

3. ตั้งค่าหลายภาษา

ถ้าต้องการหลายภาษา เพิ่ม locales ใน config:

export default defineConfig({
  locales: {
    root: {
      label: 'ภาษาไทย',
      lang: 'th-TH',
      themeConfig: {
        nav: [...],
        sidebar: {...},
      },
    },
    en: {
      label: 'English',
      lang: 'en-US',
      themeConfig: {
        nav: [...],
        sidebar: {...},
      },
    },
  },
})

แต่ละภาษามี nav และ sidebar ของตัวเอง บทความวางในไดเรกทอรีที่สอดคล้องกัน (docs/en/...)

---

4. เขียนเนื้อหา

แต่ละบทความคือไฟล์ .md รองรับ Markdown มาตรฐานบวก syntax ขยายของ VitePress:

# หัวข้อบทความ

เนื้อหา รองรับ**ตัวหนา**, `โค้ด inline`, ตาราง ฯลฯ

::: tip หมายเหตุ
นี่คือกล่อง tip
:::

::: warning คำเตือน
นี่คือกล่องคำเตือน
:::

โครงสร้างไดเรกทอรีสอดคล้องกับ URL: docs/products/intro.md → /products/intro

---

5. Build และ Deploy ไปยัง Cloudflare Pages

npm run docs:build

สร้างไฟล์ HTML/CSS/JS แบบ static ใน directory outDir

Deploy ด้วย Wrangler CLI:

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

หรือเชื่อม GitHub repo กับ Cloudflare Pages — ทุก push จะ trigger build และ deploy อัตโนมัติ

---

ผลลัพธ์สุดท้ายหน้าตาเป็นยังไง

• Sidebar ซ้ายจัดหมวดหมู่ชัดเจน
• Outline หน้าด้านขวา (ดึงจาก heading อัตโนมัติ)
• Search bar บนสุดพร้อม full-text indexing
• Toggle dark / light mode
• Responsive บนมือถือสมบูรณ์
• ตัวเลือกภาษา
• Timestamp "อัปเดตล่าสุด" ทุกบทความ

คุณภาพดีไซน์เทียบเท่า Stripe Docs และ Cloudflare Docs — และ logo กับสีของแบรนด์คุณปรับแต่งได้ทั้งหมด

ดูผลลัพธ์จริง: Ascentek Digital Knowledge Base

---

Maintenance ง่ายแค่ไหน

เพิ่มบทความหมายถึงสร้างไฟล์ .md ใหม่และเพิ่มหนึ่งบรรทัดใน sidebar ของ config.mts

ไม่ต้อง backend, ไม่ต้อง database, ไม่ต้องจัดการ plugin conflict หรือ cache git push แล้วก็ขึ้น live

นี่คือส่วนที่ฉันชอบที่สุดของระบบนี้ — ต้นทุน maintenance แทบเป็นศูนย์

---

ค่าใช้จ่าย

รายการ	ค่าใช้จ่าย
VitePress	$0 (open source MIT)
Deploy Cloudflare Pages	$0 (deploy static ไม่จำกัด)
Custom domain (ถ้ามี)	ค่าจดทะเบียน domain เท่านั้น ประมาณ $10–15/ปี
รวม	แทบ $0

---

สนใจสร้าง knowledge base ของตัวเอง แต่ไม่รู้จะเริ่มจากไหน?
ติดต่อเราได้ที่ ascentek.info เราช่วยวางแผนสถาปัตยกรรมที่เหมาะกับขนาดของคุณได้

---

อ่านเพิ่มเติม

• ภาพรวมการผสานเครื่องมือ AI เข้ากับการตลาด
• สร้างคลังภาพด้วยแผนฟรีของ Cloudflare