Belajar Astro - Content Management & CMS

#Pendahuluan

Di episode 5 kalian mengelola konten sebagai file Markdown lokal. Episode 11 ini membawa pengelolaan konten ke level berikutnya: content management system (CMS). Saat konten dikelola banyak orang — penulis, editor, reviewer — CMS memberi antarmuka yang ramah tanpa menyentuh kode.

Kalian akan belajar tiga pendekatan utama: headless CMS seperti Contentful, Sanity, dan Strapi; Git-based CMS seperti Decap CMS yang menyimpan konten sebagai file dalam repository; serta preview mode dan pembaruan konten saat build.

Pada akhir episode, kalian bisa memilih CMS yang tepat dan menghubungkannya dengan Astro melalui content layer API yang dipelajari di episode 6.

#Integrasi Headless CMS

#Pola Umum: Fetch API saat Build

Headless CMS menyimpan konten di cloud dan menyediakan API. Astro mengambil konten itu saat build time — konten menjadi HTML statis yang cepat. Contoh dengan Contentful menggunakan SDK-nya:

Ambil konten dari Contentful

import contentful from "contentful";
 
const client = contentful.createClient({
  space: import.meta.env.PUBLIC_CONTENTFUL_SPACE,
  accessToken: import.meta.env.CONTENTFUL_TOKEN,
});
 
export async function ambilArtikel() {
  const entries = await client.getEntries({
    content_type: "artikel",
    order: "-fields.tanggal",
  });
  return entries.items;
}

Pola client.getEntries({ content_type: "artikel" }) memakai SDK Contentful. Variabel CONTENTFUL_TOKEN bersifat rahasia dan hanya dijalankan saat build — aman karena tidak pernah dikirim ke browser.

#Sanity dan Strapi

Sanity menawarkan GROQ queries dan real-time editing, sedangkan Strapi adalah self-hosted Node CMS. Keduanya punya klien JavaScript yang bisa dipakai langsung di frontmatter. Kuncinya sama: ambil data, validasi dengan schema content layer, lalu render statis.

Query Sanity dengan GROQ

const query = `*[_type == "artikel"] | order(publishedAt desc)`;
const artikel = await client.fetch(query);

Query GROQ di atas mengambil semua artikel terurut dari tanggal terbaru. Setelah data masuk, proses berikutnya identik dengan konten Markdown.

#Content Sourcing dari Git-Based CMS

#Decap CMS untuk File Markdown

Git-based CMS menyimpan konten sebagai file Markdown di dalam repository. Kalian menulis lewat antarmuka web, dan perubahan tersimpan sebagai commit. Decap CMS (sebelumnya Netlify CMS) adalah contoh paling populer.

Konfigurasinya berupa file public/admin/config.yml:

backend:
  name: git-gateway
  branch: main
media_folder: public/images
collections:
  - name: artikel
    label: Artikel
    folder: src/content/artikel
    fields:
      - { name: title, label: Judul }
      - { name: published, label: Tanggal, widget: datetime }

Konfigurasi folder: src/content/artikel membuat file Markdown baru diletakkan langsung di folder collection Astro. Editor CMS tidak perlu memahami format file — cukup mengisi form.

#Keuntungan Git-based

Semua perubahan terekam di git: riwayat lengkap, review melalui pull request, dan tidak ada lock-in layanan cloud. Konten diperlakukan sama seperti kode — sebuah praktik yang disebut content-as-code.

#Preview Mode dan Build-Time Content Updates

#Preview dengan Webhook

Ketika konten berubah di CMS, halaman Astro belum berubah sampai build ulang. Solusinya adalah webhook: CMS memberi tahu platform hosting setiap ada perubahan, lalu memicu build baru.

Editor edit konten → CMS webhook → build ulang → deploy

Pada platform seperti Netlify atau Vercel, webhook CMS mengaktifkan build otomatis. Dengan content layer, kalian bisa menambah parameter &v=timestamp untuk menghindari cache saat build.

#Preview Mode untuk Editor

Untuk meninjau draf sebelum publish, bangun preview: jalankan build dari branch tertentu, atau sajikan halaman dengan konten draf dari CMS. Sanity menyediakan real-time preview dengan GROQ subscriptions; Contentful punya preview API dengan token terpisah. Pilih pola yang sesuai budget dan kebutuhan tim.

#Content Authoring Workflows dan Metadata Management

#Schema sebagai Kontrak

Di episode 5 kalian sudah mendefinisikan schema content collection. Sekarang schema itu menjadi kontrak antara CMS dan situs. Setiap field di CMS harus cocok dengan schema Zod — kalau tidak, build gagal dan masalahnya terdeteksi lebih awal.

Schema untuk konten dari CMS

const artikel = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/artikel" }),
  schema: z.object({
    title: z.string(),
    published: z.date(),
    category: z.enum(["tutorial", "opini", "berita"]),
    tags: z.array(z.string()),
  }),
});

Schema z.object di atas memvalidasi title, tanggal, kategori, dan tags. Konsistensi field ini menjaga kualitas konten meskipun ditulis oleh banyak orang.

#Workflow yang Disiplin

Tetapkan alur: draf di CMS, review oleh editor, lalu publish. Metadata seperti slug, excerpt, dan gambar cover harus selalu ada sebelum publish. Workflow yang rapi membuat proses produksi konten dapat diprediksi.

#Penutup

Episode 11 membuka pengelolaan konten skala tim: integrasi headless CMS seperti Contentful, Sanity, dan Strapi, content sourcing dari Git-based CMS seperti Decap, preview mode dan webhook untuk pembaruan build, serta workflow authoring dengan schema sebagai kontrak.

Inti yang harus dibawa pulang:

• Headless CMS menyediakan API yang dipanggil saat build time.
• Token rahasia CMS tidak boleh berawalan PUBLIC_.
• Git-based CMS menyimpan konten sebagai file Markdown di repository.
• Webhook CMS memicu build ulang setiap konten berubah.
• Preview mode memakai token atau branch terpisah untuk draf.
• Schema content collection adalah kontrak antara CMS dan kode.

Di episode 12 selanjutnya kita akan membahas security dan best practices: secure headers dan content security policy, mitigasi XSS dan sanitasi konten, pengamanan panggilan API dan token, serta melindungi konten sensitif di situs statis. Keamanan menjadi kebutuhan wajib saat situs sudah online.