docs.sugeng.id

Dokumentasi tema Blogger dan WordPress premium dari sugeng.id. Dibangun menggunakan VitePress.

Daftar Isi

• Teknologi
• Struktur Folder
• Cara Menjalankan
• Aturan Penting
• Menambah Konten Baru
• Konfigurasi
• Tema yang Didokumentasikan
• Deployment
• Cek Broken Links
• Fitur SEO

---

Teknologi

Teknologi	Versi	Keterangan
VitePress	^1.6.4	Static site generator berbasis Vue
Node.js	>= 18	JavaScript runtime
Linkinator	^7.5.0	Tool untuk cek broken links

---

Struktur Folder

blogger-docs/
├── .vitepress/
│   ├── config.mts          # Konfigurasi utama VitePress
│   ├── cache/              # Cache build (auto-generated)
│   └── dist/               # Output build (auto-generated)
├── id/                     # Konten bahasa Indonesia
│   ├── index.md
│   ├── general/            # Panduan umum Blogger
│   │   ├── installation.md
│   │   ├── navigation-menu.md
│   │   ├── social-icons.md
│   │   ├── blog-elements.md
│   │   └── image-upload.md
│   ├── wuzz/               # Tema Blogger
│   │   └── configuration.md
│   ├── kutoko/
│   │   └── configuration.md
│   ├── evomagz/
│   │   └── configuration.md
│   ├── viomagz/
│   │   └── configuration.md
│   ├── linkmagz/
│   │   └── configuration.md
│   ├── viotoko/
│   │   └── configuration.md
│   └── wordpress/          # Tema WordPress
│       ├── installation.md
│       └── sastrapro/
│           ├── configuration.md
│           └── optimization.md
├── en/                     # Konten bahasa Inggris (mirrors id/)
│   ├── index.md
│   ├── general/
│   ├── wuzz/
│   ├── kutoko/
│   ├── evomagz/
│   ├── viomagz/
│   ├── linkmagz/
│   ├── viotoko/
│   └── wordpress/
│       ├── installation.md
│       └── sastrapro/
│           ├── configuration.md
│           └── optimization.md
├── public/                 # Asset statis
│   ├── logo.svg
│   ├── og-image.svg        # Open Graph image
│   ├── robots.txt
│   ├── icons/              # Favicon (berbagai ukuran)
│   ├── images/             # Screenshot dokumentasi
│   └── videos/             # Video tutorial
├── index.md                # Language selector page
├── wrangler.jsonc          # Konfigurasi Cloudflare Pages
├── CLAUDE.md               # Instruksi untuk Claude Code
├── package.json
└── README.md

---

Struktur URL

URL	Konten
/	Language selector page
/id/	Homepage Indonesia
/en/	Homepage English

---

Cara Menjalankan

Development

# Install dependencies
npm install

# Jalankan development server
npm run docs:dev

Server akan berjalan di http://localhost:5173

Build untuk Production

# Build static files
npm run docs:build

# Preview hasil build
npm run docs:preview

Output build ada di folder .vitepress/dist/

---

Aturan Penting

1. Struktur URL Harus Menggunakan Bahasa Inggris

WAJIB: Semua nama folder dan file harus menggunakan bahasa Inggris agar tombol ganti bahasa berfungsi dengan benar.

Benar	Salah
/id/general/installation	/id/panduan-umum/instalasi
/id/wuzz/configuration	/id/wuzz/pengaturan

Alasan: VitePress menggunakan path URL untuk mencocokkan halaman antar bahasa. Jika struktur URL berbeda, tombol ganti bahasa akan error (404).

2. Struktur File Harus Sama untuk Semua Bahasa

Setiap file di /id/ (Indonesia) harus memiliki pasangan di /en/ dengan path yang sama:

id/general/installation.md     <->  en/general/installation.md
id/wuzz/configuration.md       <->  en/wuzz/configuration.md

3. Nama File yang Digunakan

Jenis Halaman	Nama File
Instalasi	installation.md
Pengaturan/Konfigurasi	configuration.md
Modifikasi/Kustomisasi	customization.md
Optimasi/Performa	optimization.md
Menu Navigasi	navigation-menu.md
Icon Sosmed	social-icons.md
Elemen Blog	blog-elements.md
Upload Gambar	image-upload.md

---

Menambah Konten Baru

Menambah Halaman Baru

1. Buat file di kedua bahasa dengan path yang sama:

   id/nama-tema/nama-halaman.md     # Indonesia
   en/nama-tema/nama-halaman.md     # English

2. Update sidebar di .vitepress/config.mts:

   // Untuk bahasa Indonesia (locales.root)
   sidebar: {
     '/id/': [
       {
         text: 'Nama Grup',
         items: [
           { text: 'Judul Menu (Indonesia)', link: '/id/nama-tema/nama-halaman' }
         ]
       }
     ]
   }
   
   // Untuk bahasa Inggris (locales.en)
   sidebar: {
     '/en/': [
       {
         text: 'Group Name',
         items: [
           { text: 'Menu Title (English)', link: '/en/nama-tema/nama-halaman' }
         ]
       }
     ]
   }

Menambah Tema Baru

1. Buat folder baru di /id/ dan /en/:

   id/nama-tema/configuration.md    # Indonesia
   en/nama-tema/configuration.md    # English

2. Update sidebar di kedua locale dalam config.mts

3. (Opsional) Update homepage features di id/index.md dan en/index.md

---

Konfigurasi

File Konfigurasi Utama

.vitepress/config.mts berisi:

Bagian	Keterangan
head	Meta tags, favicon
locales	Konfigurasi multi-bahasa
locales.root.themeConfig.nav	Menu navigasi atas (Indonesia)
locales.root.themeConfig.sidebar	Menu sidebar (Indonesia, path: /id/)
locales.en.themeConfig.nav	Menu navigasi atas (English)
locales.en.themeConfig.sidebar	Menu sidebar (English, path: /en/)
themeConfig	Konfigurasi global (logo, search, footer)

Mengubah Teks UI

Teks UI bahasa Indonesia dapat diubah di locales.root.themeConfig:

themeConfig: {
  outline: { label: 'Di halaman ini' },
  docFooter: { prev: 'Sebelumnya', next: 'Selanjutnya' },
  darkModeSwitchLabel: 'Tampilan',
  sidebarMenuLabel: 'Menu',
  returnToTopLabel: 'Kembali ke atas',
  langMenuLabel: 'Ganti bahasa'
}

---

Tema yang Didokumentasikan

Tema Blogger

Tema	Tipe	Deskripsi
Wuzz	Blog	Template modern dengan desain minimalis
KuToko	Toko Online	Template e-commerce dengan katalog produk
EvoMagz	Magazine	Template berita dengan layout elegan
VioMagz	Magazine	Template magazine SEO-friendly
LinkMagz	Link-in-bio	Template untuk kumpulan link
VioToko	Toko Online	Template toko profesional

Tema WordPress

Tema	Tipe	Deskripsi
SastraPro	Blog	Tema WordPress modern dengan dark mode, SEO-ready

---

Deployment

Site ini di-deploy di Cloudflare Pages. Konfigurasi ada di wrangler.jsonc.

Build & Preview

# Build untuk production
npm run docs:build

# Preview hasil build
npm run docs:preview

Output build ada di folder .vitepress/dist/

---

Cek Broken Links

Gunakan linkinator untuk mengecek broken links:

npx linkinator https://docs.sugeng.id --recurse

---

Fitur SEO

Konfigurasi di config.mts sudah termasuk:

• Canonical URLs: Auto-generated via transformHead()
• Hreflang tags: Auto-generated untuk konversi bahasa (id ↔ en)
• Sitemap: Auto-generated saat build
• Meta tags: Open Graph dan Twitter Card
• Robots.txt: Ada di public/robots.txt

---

Kontak

Untuk bantuan lebih lanjut, kunjungi sugeng.id.