Blog-Akularis

⌥ GitCMS Blog — Platform Blog Berbasis GitHub

Blog statis lengkap dengan CMS terintegrasi, berjalan 100% di atas GitHub — tanpa database, tanpa server, tanpa biaya hosting.

Tulis artikel di panel admin → konten tersimpan sebagai Markdown di repo Anda → GitHub Actions otomatis membangun situs statis yang SEO-friendly → publikasi ke GitHub Pages.

┌──────────────┐   tulis    ┌──────────────┐  commit   ┌──────────────┐
│  Panel Admin │ ─────────► │ content/*.md │ ────────► │ GitHub Repo  │
│   (/admin/)  │            │  (Markdown)  │           └──────┬───────┘
└──────────────┘            └──────────────┘                  │ push
                                                               ▼
┌──────────────┐  deploy   ┌──────────────┐   build    ┌──────────────┐
│ GitHub Pages │ ◄──────── │   _site/     │ ◄───────── │GitHub Actions│
│ (blog live)  │           │ (HTML statis)│            │  (build.js)  │
└──────────────┘           └──────────────┘            └──────────────┘

✨ Fitur

Blog publik (SEO-optimized):

Panel admin (CMS):

🚀 Panduan Instalasi

1. Upload ke Repository GitHub

Buat repo baru (mis. blog-cms), lalu unggah seluruh isi folder ini.

git init
git add .
git commit -m "Initial commit: GitCMS Blog"
git branch -M main
git remote add origin https://github.com/USERNAME/blog-cms.git
git push -u origin main

2. Sesuaikan config.json

PENTING — edit minimal dua baris ini agar URL situs benar:

{
  "baseUrl": "https://USERNAME.github.io/blog-cms",
  "basePath": "/blog-cms"
}
Jenis situs baseUrl basePath
Project site (umum) https://user.github.io/blog-cms /blog-cms
User site https://user.github.io `` (kosong)
Domain sendiri https://blogsaya.com `` (kosong)

Anda juga bisa mengubah ini nanti lewat menu Pengaturan Situs di panel admin.

3. Aktifkan GitHub Pages

  1. Repo → Settings → Pages
  2. Source: pilih GitHub Actions
  3. Buka tab Actions, tunggu workflow Build and Deploy Blog selesai (±1–2 menit)
  4. Blog Anda live di baseUrl yang Anda set

4. Buat Personal Access Token

  1. https://github.com/settings/tokens → Fine-grained tokens → Generate new token
  2. Repository access → Only select repositories → pilih repo blog Anda
  3. Repository permissions → Contents → Read and write
  4. Generate, lalu salin token

5. Login & Mulai Menulis

  1. Buka <baseUrl>/admin/ (mis. https://USERNAME.github.io/blog-cms/admin/)
  2. Tempel token → isi konfigurasi repo (owner, repo, branch main, folder content/posts)
  3. Tulis artikel → Simpan & Commit
  4. Tunggu ±1 menit, artikel muncul di blog publik 🎉

🔄 Alur Publikasi

Edit di /admin/  →  commit ke content/posts/  →  Actions build  →  Pages update

Setiap kali Anda menyimpan artikel atau mengubah pengaturan, GitHub Actions otomatis membangun ulang situs. Mirip “Publish” di WordPress, tapi tanpa server.

📁 Struktur Folder

blog-cms/
├── admin/                  ← panel CMS (akses di /admin/)
│   ├── index.html
│   └── assets/{css,js}/
├── content/
│   ├── posts/              ← artikel blog (.md) ← DIKELOLA CMS
│   └── pages/              ← halaman statis (about.md, dll)
├── theme/
│   └── style.css           ← tema tampilan blog publik
├── build/
│   ├── build.js            ← static site generator
│   ├── templates.js        ← template HTML + SEO
│   └── serve.js            ← server pratinjau lokal
├── public/images/          ← gambar yang diunggah
├── config.json             ← konfigurasi situs
├── package.json            ← dependensi build
├── .github/workflows/
│   └── deploy.yml          ← pipeline build & deploy
└── _site/                  ← hasil build (auto-generate, tidak di-commit)

💻 Pratinjau Lokal (Opsional)

Untuk menguji sebelum push (butuh Node.js 18+):

npm install      # sekali saja
npm run build    # bangun situs ke _site/
npm run serve    # jalankan di http://localhost:4321

Buka http://localhost:4321/blog-cms/ (sesuai basePath) untuk melihat blog, dan /admin/ untuk panel CMS.

📝 Format Artikel

Setiap artikel = file Markdown dengan frontmatter:

---
title: "Judul Artikel"
slug: judul-artikel
date: 2026-06-05
status: published        # atau "draft" (tidak ditampilkan)
category: "SEO"
author: "Nama Anda"
tags: ["seo", "tutorial"]
excerpt: "Ringkasan untuk SEO & kartu artikel."
featured_image: "/public/images/foto.jpg"
---

## Isi artikel dalam Markdown

🎨 Kustomisasi

Ingin mengubah… Edit file…
Warna, font, tampilan theme/style.css (lihat variabel CSS di :root)
Judul, deskripsi, sosmed config.json atau menu Pengaturan Situs
Menu navigasi config.json → bagian nav
Struktur halaman / SEO build/templates.js
Logika build build/build.js

🔍 Fitur SEO Bawaan

Setiap halaman artikel otomatis menghasilkan:

Situs juga menghasilkan sitemap.xml, rss.xml, dan robots.txt.

❓ Troubleshooting

Masalah Solusi
CSS/gambar tidak muncul Pastikan basePath di config.json benar (mis. /blog-cms)
Halaman 404 setelah deploy Tunggu workflow Actions selesai; cek Source = GitHub Actions
Link antar-halaman rusak Periksa basePath — kosongkan untuk user-site/domain sendiri
“Token tidak valid” Cek permission Contents: Read and write & masa berlaku token
Artikel tak muncul di blog Pastikan status: published, lalu tunggu build selesai
Workflow Actions gagal Buka tab Actions → klik run yang gagal untuk lihat log

🛠️ Pengembangan Lanjutan

Dibuat untuk Anda yang ingin blog cepat, gratis, dan sepenuhnya dimiliki sendiri. Selamat berkarya! 🚀