Membangun Gatsby Blog dengan Git Submodule untuk Konten

Memisahkan frontend dan konten adalah pola arsitektur yang bersih dan mudah dirawat. Pada setup ini, Gatsby menangani rendering halaman, sementara konten Markdown disimpan dalam repository terpisah melalui Git Submodule.

Dokumentasi ini menjelaskan langkah dasar membuat konfigurasi tersebut.

1. Struktur Arsitektur

Kita menggunakan dua repository:

Repo 1: gatsby-blog       → Frontend Gatsby
Repo 2: konten-blog       → Konten markdown dan aset

Setelah submodule dipasang, struktur di repo Gatsby menjadi:

gatsby-blog/
  content/        ← submodule dari konten-blog
  src/
  static/
  gatsby-config.js
  gatsby-node.js
  package.json

Struktur repo konten:

konten-blog/
  posts/
    slug-post/
      index.md
      cover.jpg
  pages/
  images/
  thumbnails/
  gambar/

2. Membuat Repository Konten

Buat repository normal sebagai tempat menyimpan konten Markdown.

Masukkan file konten awal:

git init
git add .
git commit -m "Initial content import"
git branch -M main
git remote add origin <URL-REPO-KONTEN>
git push -u origin main

3. Menambahkan Submodule ke Gatsby

Di repository Gatsby:

1. Hapus folder `content` lama (jika ada)

rm -rf content

2. Tambahkan submodule

git submodule add https://github.com/USERNAME/konten-blog.git content

3. Commit perubahan

git add .gitmodules content
git commit -m "Add konten submodule"
git push

Submodule kini aktif dan folder content/ akan berisi file dari repo konten.

4. Sinkronisasi Submodule

Jika konten di-update di repo konten, Gatsby perlu memperbarui pointer submodulenya.

A. Update konten di submodule

cd content
git pull

B. Commit pointer submodule di repo utama

cd ..
git add content
git commit -m "Update submodule pointer"
git push

Clone proyek secara lengkap

git clone <repo-gatsby>
cd gatsby-blog
git submodule update --init --recursive

5. Konfigurasi Gatsby

Tambahkan konfigurasi untuk membaca konten markdown dari submodule.

Di gatsby-config.js:

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'posts',
    path: `${__dirname}/content/posts`,
  },
},
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 590,
          backgroundColor: 'transparent',
        },
      },
      'gatsby-remark-prismjs',
      'gatsby-remark-autolink-headers',
      'gatsby-remark-code-titles',
    ],
  },
},

Gatsby akan otomatis membaca semua index.md di dalam content/posts.

6. Format Konten Markdown

Setiap posting disimpan sebagai folder:

content/posts/slug-post/
  index.md
  gambar.jpg

Contoh isi index.md:

---
template: post
title: 'Judul Post'
slug: 'slug-post'
date: '2025-11-20'
tags:
  - contoh
cover: './gambar.jpg'
---

Konten markdown di sini…

Relatif path seperti ./gambar.jpg akan diproses oleh gatsby-remark-images.

7. Workflow Harian

Menambah / Mengedit Konten

cd content
# edit atau buat folder post baru
git add .
git commit -m "Tambah post baru"
git push

Update di Gatsby

cd ..
git submodule update --remote content
git add content
git commit -m "Update konten"
git push

Build Gatsby

npm run develop
npm run build

8. Keuntungan Pendekatan Ini

Frontend dan konten tidak bercampur.
Konten bisa dipakai di proyek lain.
Riwayat commit konten lebih bersih.
Workflow stabil untuk blog jangka panjang.
Mudah mengganti framework frontend tanpa memindah file konten.