Saya Ingin Punya Knowledge Base Seindah Perusahaan Besar

Saya selalu iri dengan knowledge base milik Stripe, Cloudflare, dan Notion — desain bersih, pencarian cepat, multibahasa, tampil bagus di HP.

Tapi bukannya itu butuh biaya besar, atau perlu tim engineer?

Saya tanya AI. Jawabannya mengejutkan saya.

---

Apa yang Saya Coba Sebelum Tanya AI

Instinct pertama adalah Notion: gratis, cantik, mudah digunakan. Tapi Notion public page punya beberapa masalah — loading lambat, SEO hampir nol, dan kustomisasi branding sangat terbatas.

Lalu saya lihat GitBook. Paket SaaS-nya mahal, dan menaruh konten di platform orang lain terasa tidak nyaman.

WordPress sudah pasti tidak — install plugin, kelola database, konfigurasi CDN. Melelahkan hanya membayangkannya.

---

Apa yang AI Rekomendasikan

Saya rangkum kebutuhan saya dan tanya AI:

Saya butuh knowledge base dengan: multibahasa, pencarian built-in, ramah SEO, gratis atau hampir gratis, bisa kustomisasi branding, maintenance cost rendah.

AI memberi beberapa arah:

Opsi	Kelebihan	Kekurangan
Notion	Mudah mulai	Branding buruk, SEO lemah, domain custom butuh berbayar
GitBook	Desain bagus	Bulanan mahal, konten tidak di tangan sendiri
Docusaurus	Fitur lengkap	Setup kompleks, perlu React
VitePress	Ringan, cepat, desain bersih	Perlu dasar Markdown
MkDocs	Ekosistem Python	Pilihan tema terbatas, nuansa lebih "engineering"

AI merekomendasikan VitePress — karena ini adalah framework yang dipakai dokumentasi resmi Vue (website docs Vue sendiri jalan di atasnya), komunitas aktif, tema defaultnya sudah terlihat sangat bagus tanpa banyak kustomisasi, dan deploy ke Cloudflare Pages sepenuhnya gratis.

Saya pun mencoba.

---

Apa Itu VitePress

VitePress adalah static site generator yang dibangun khusus untuk dokumentasi teknis dan knowledge base.

Kamu nulis Markdown, VitePress ubah jadi halaman web yang indah. Navigasi, sidebar, pencarian full-text, dark mode, multibahasa — semuanya built-in, tidak perlu install plugin tambahan.

Dokumentasi resmi Vue, Vite, dan Vitest semuanya menggunakan VitePress. Pengalaman saat membaca docs tersebut — itulah tampilan default VitePress.

---

Proses Build

1. Inisialisasi Proyek

npm create vitepress@latest

Ikuti prompt interaktif, pilih nama dan tema (disarankan Default). Sekitar satu menit selesai inisialisasi.

Masuk direktori dan install:

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

Buka http://localhost:5173 untuk melihat preview lokal.

---

2. Konfigurasi config.mts (Langkah Terpenting)

Semua pengaturan ada di docs/.vitepress/config.mts:

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'Knowledge Base Saya',
  description: 'Knowledge Base Perusahaan',
  outDir: '../public',

  themeConfig: {
    nav: [
      { text: 'Beranda', link: '/' },
      { text: 'Dokumentasi', link: '/docs/intro' },
    ],
    sidebar: {
      '/docs/': [
        {
          text: 'Mulai Cepat',
          items: [
            { text: 'Pengantar', link: '/docs/intro' },
            { text: 'Instalasi', link: '/docs/install' },
          ],
        },
      ],
    },
    search: {
      provider: 'local',   // pencarian built-in, tidak butuh layanan pihak ketiga
    },
  },
})

Nav, sidebar, pencarian — beberapa baris konfigurasi dan selesai.

---

3. Setup Multibahasa

Untuk menambah beberapa bahasa, gunakan locales di config:

export default defineConfig({
  locales: {
    root: {
      label: 'Bahasa Indonesia',
      lang: 'id-ID',
      themeConfig: {
        nav: [...],
        sidebar: {...},
      },
    },
    en: {
      label: 'English',
      lang: 'en-US',
      themeConfig: {
        nav: [...],
        sidebar: {...},
      },
    },
  },
})

Setiap bahasa punya nav dan sidebar sendiri. Artikel diletakkan di direktori yang sesuai (docs/en/...).

---

4. Menulis Konten

Setiap artikel adalah file .md, mendukung Markdown standar plus ekstensi VitePress:

# Judul Artikel

Isi konten, mendukung **tebal**, `kode inline`, tabel, dll.

::: tip Catatan
Ini adalah kotak tip
:::

::: warning Perhatian
Ini adalah kotak peringatan
:::

Struktur direktori langsung jadi URL: docs/products/intro.md → /products/intro

---

5. Build dan Deploy ke Cloudflare Pages

npm run docs:build

Menghasilkan file HTML/CSS/JS statis di direktori outDir.

Deploy dengan Wrangler CLI:

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

Atau hubungkan GitHub repo ke Cloudflare Pages — setiap push otomatis trigger build dan deploy.

---

Hasil Akhirnya Seperti Apa

• Sidebar kiri dengan kategori jelas
• Outline halaman di kanan (diambil otomatis dari heading)
• Search bar di atas dengan full-text indexing
• Toggle dark / light mode
• Responsif sempurna di mobile
• Pemilih bahasa
• Timestamp "terakhir diperbarui" di setiap artikel

Kualitas desainnya setara Stripe Docs dan Cloudflare Docs — dan logo serta warna brand kamu bisa dikustomisasi sepenuhnya.

Lihat hasil nyatanya: Ascentek Digital Knowledge Base

---

Seberapa Mudah Maintenance-nya

Menambah artikel berarti membuat file .md baru dan menambah satu baris di sidebar config.mts.

Tidak perlu backend, tidak perlu database, tidak perlu urus konflik plugin atau cache. git push dan otomatis live.

Ini bagian yang paling saya sukai dari sistem ini — biaya maintenance hampir nol.

---

Biaya

Item	Biaya
VitePress	$0 (open source MIT)
Deploy Cloudflare Pages	$0 (deploy statis tak terbatas)
Domain custom (opsional)	Biaya registrasi domain saja, ~$10–15/tahun
Total	Hampir $0

---

Tertarik membangun knowledge base sendiri tapi tidak tahu harus mulai dari mana?
Silakan hubungi kami di ascentek.info — kami bisa diskusi perencanaan arsitektur yang sesuai skala kamu.

---

Bacaan Lanjutan

• Ikhtisar Integrasi Alat AI dan Pemasaran
• Bangun Pustaka Gambar Sendiri dengan Paket Gratis Cloudflare