Belajar Gatsby - Content Management & CMS Integration

#Pendahuluan

Konten adalah raja di situs Gatsby, dan Gatsby unggul dalam mengambil konten dari mana saja. Apakah konten ditulis sebagai file Markdown oleh developer atau dikelola editor lewat CMS, keduanya berakhir di data layer yang sama.

Episode 9 membahas sourcing Markdown dan MDX, integrasi headless CMS seperti Contentful dan Strapi, preview mode, serta content modeling dan optimasi query.

#Sourcing Markdown dan MDX

#Markdown dengan gatsby-transformer-remark

Markdown biasa di-source dengan gatsby-transformer-remark seperti yang kita bahas di episode 5. Setiap file menjadi node MarkdownRemark berisi frontmatter, html, dan excerpt.

#MDX dengan gatsby-plugin-mdx

MDX menggabungkan Markdown dan JSX: kalian bisa menyisipkan komponen React langsung di dalam file konten. Install:

npm install gatsby-plugin-mdx @mdx-js/react

Daftarkan plugin di gatsby-config.js, dan file .mdx siap dipakai. Contoh frontmatter dan konten MDX:

---
title: "Halo Dunia"
date: "2026-08-10"
tags:
  - intro
---
 
Selamat datang di post pertama.
 
<Button>Tombol Interaktif</Button>

Komponen seperti <Button> di dalam MDX bisa diimpor lewat MDXProvider atau di-scope per halaman — ini kekuatan MDX untuk dokumentasi dan tutorial interaktif.

#Membuat Slug dari Frontmatter

Agar tiap post punya URL yang rapi, buat slug di gatsby-node.js lewat onCreateNode:

Buat slug dari frontmatter

exports.onCreateNode = ({ node, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === "Mdx") {
    createNodeField({
      node,
      name: "slug",
      value: `/blog/${node.frontmatter.title.toLowerCase().replace(/ /g, "-")}`,
    })
  }
}

createNodeField menambahkan field kustom slug ke node, yang nanti bisa di-query untuk membuat halaman per post.

#Integrasi Headless CMS

#Contentful dengan gatsby-source-contentful

Headless CMS menyimpan konten di cloud dan mengeksposnya lewat API. Contentful adalah contoh paling populer:

npm install gatsby-source-contentful

Konfigurasinya memakai token dari dashboard Contentful:

Konfigurasi gatsby-source-contentful

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
  ],
}

spaceId dan accessToken sebaiknya diambil dari environment variables, bukan hard-code. Setelah build, setiap content type muncul sebagai tipe GraphQL, misalnya ContentfulArtikel.

#Sanity dan Strapi

Sanity memakai gatsby-source-sanity dengan konfigurasi projectId dan dataset. Strapi memakai gatsby-source-strapi dengan apiURL dan collectionTypes. Polanya sama: source plugin menarik data, transformer menyiapkan gambar, lalu data bisa di-query.

#Preview Mode dan CMS-Driven Workflows

#Preview untuk Editor

Editor konten ingin melihat hasil sebelum publish. Platform seperti Gatsby Cloud dan Netlify menyediakan deploy preview: setiap perubahan di CMS memicu build pratinjau dengan URL unik. Gatsby juga mendukung Content Sync yang meng-update halaman secara inkremental saat konten berubah.

#Webhook sebagai Pemicu

Alur kerja CMS-driven biasanya memakai webhook: saat konten diterbitkan, CMS memanggil URL webhook platform hosting untuk memicu build baru. Ini memastikan situs selalu sinkron dengan konten terbaru tanpa polling manual.

#Content Modeling dan Optimasi Query

#Model Konten yang Jelas

Kunci CMS yang rapi adalah content modeling: tentukan lebih dulu tipe konten, field wajib, dan relasi. Contoh model sederhana: post punya title, slug, excerpt, featuredImage, dan relasi ke penulis. Modeling yang baik membuat query konsisten dan editor mudah mengisi.

#Optimasi Query CMS

Data CMS bisa sangat banyak. Praktik yang dianjurkan: ambil field minimum dengan GraphQL, filter node yang tidak dipakai, dan batasi jumlah node dengan limit. Untuk post besar, hindari mengambil seluruh body di halaman daftar — cukup excerpt dan slug.

#Penutup

Episode 9 menuntaskan pengelolaan konten: sourcing Markdown dan MDX, integrasi headless CMS seperti Contentful, Sanity, dan Strapi, preview mode, serta content modeling dan optimasi query.

Inti yang harus dibawa pulang:

• MDX memungkinkan JSX di dalam Markdown; gatsby-plugin-mdx mengaktifkannya.
• Buat slug lewat createNodeField di onCreateNode.
• Source plugin CMS mengubah content type menjadi tipe GraphQL.
• Konfigurasi CMS memakai environment variables, bukan hard-code.
• Webhook memicu build baru saat konten berubah.
• Content modeling yang jelas menghasilkan query yang sederhana.

Di episode 10 selanjutnya kita akan membahas forms dan interactivity — form dengan client-side state, submission lewat Netlify Forms dan serverless handlers, navigasi client-side, serta pola aksesibilitas dan umpan balik pengguna.