Membangun CMS Blog dengan Claude Code: Astro MDX, SEO Multibahasa, QA, dan Monetisasi

CMS blog adalah sistem operasi konten, bukan hanya tempat menulis

Banyak blog teknis rajin menerbitkan artikel, tetapi tidak menghasilkan penjualan template, permintaan training, atau konsultasi. Masalahnya sering bukan jumlah artikel, melainkan workflow: metadata tidak rapi, terjemahan tidak sinkron, kode belum diuji, RSS dan sitemap terlupakan, lalu CTA terasa seperti iklan yang tidak membantu pembaca.

CMS berarti Content Management System, yaitu sistem untuk menyimpan, mengedit, memeriksa, meninjau, dan menerbitkan konten. Dengan Astro Content Collections dan MDX, CMS bisa tetap berbasis file tetapi memiliki aturan yang kuat. Claude Code sebaiknya dipakai sebagai operator editorial: menulis draft, melokalkan artikel, menjalankan QA, memeriksa SEO, dan merapikan jalur monetisasi.

Untuk konteks lanjutan, baca Claude Code dan Contentful CMS, audit funnel konten, implementasi RSS, dan pembuatan sitemap. Rujukan resmi yang perlu dicek adalah Astro Content Collections, Astro MDX integration, dan Astro Sitemap integration.

Pecah CMS menjadi tanggung jawab kecil

Instruksi “buat CMS blog” terlalu luas. Claude Code bekerja lebih baik jika diberi file, aturan, dan hasil pemeriksaan yang jelas. Untuk Astro MDX, pembagian praktisnya seperti ini.

Area	Tanggung jawab	Tugas yang cocok untuk Claude Code
content schema	Menentukan field dan tipe frontmatter	Menulis content.config.ts
artikel MDX	Mengelola isi, tabel, kode, dan CTA	Menulis ulang draft dan menambah contoh
lokalisasi	Menjaga slug sama di semua bahasa	Mendeteksi file hilang dan melokalkan gaya
preview	Memeriksa tampilan sebelum publish	Menjalankan dev server dan mengecek link
SEO	Mengelola title, description, OGP, sitemap	Mengaudit metadata
QA gate	Menghentikan artikel bermasalah	Membuat script Node dan check terfokus
monetisasi	Menghubungkan artikel ke produk, training, konsultasi	Meninjau CTA dan alur pembaca

Tiga contoh penggunaan nyata

Pertama, developer indie bisa mengubah tutorial Claude Code menjadi penjualan template. Artikel dapat mengarah ke starter kit, prompt library, atau mini course. Karena itu CMS perlu ctaLabel, ctaUrl, relatedPosts, updatedDate, dan heroImage.

Kedua, blog engineering perusahaan perlu mencegah publikasi yang tampak benar tetapi salah: nama API lama, snippet yang tidak berjalan, terjemahan sebagian, atau OGP image rusak. Claude Code harus menjalankan pre-publish gate, bukan hanya membuat teks.

Ketiga, SEO multibahasa butuh slug yang konsisten. Judul boleh alami dalam bahasa Indonesia, tetapi tesis, contoh kode, dan niat CTA perlu tetap sejajar dengan bahasa lain.

site/src/content/blog/claude-code-blog-cms.mdx
site/src/content/blog-en/claude-code-blog-cms.mdx
site/src/content/blog-zh/claude-code-blog-cms.mdx
site/src/content/blog-ko/claude-code-blog-cms.mdx
site/src/content/blog-es/claude-code-blog-cms.mdx
site/src/content/blog-fr/claude-code-blog-cms.mdx
site/src/content/blog-de/claude-code-blog-cms.mdx
site/src/content/blog-pt/claude-code-blog-cms.mdx
site/src/content/blog-hi/claude-code-blog-cms.mdx
site/src/content/blog-id/claude-code-blog-cms.mdx

Schema Astro siap pakai

Schema adalah aturan yang bisa dijalankan terhadap data. Ia mencegah artikel tanpa tanggal update atau description yang terlalu panjang lolos ke produksi.

// src/content.config.ts
import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blogSchema = z.object({
  title: z.string().min(20).max(80),
  description: z.string().min(40).max(120),
  pubDate: z.coerce.date(),
  updatedDate: z.coerce.date(),
  category: z.enum(["getting-started", "tips-and-tricks", "use-cases", "comparison", "advanced"]),
  tags: z.array(z.string()).min(2).max(8),
  heroImage: z.string().startsWith("/images/"),
  draft: z.boolean().default(false),
  requireAllLocales: z.boolean().default(false),
  lang: z.enum(["ja", "en", "zh", "ko", "es", "fr", "de", "pt", "hi", "id"]),
  ctaLabel: z.string().max(40).optional(),
  ctaUrl: z.string().url().optional(),
});

const makeBlogCollection = (base: string) =>
  defineCollection({
    loader: glob({ pattern: "**/*.{md,mdx}", base }),
    schema: blogSchema,
  });

export const collections = {
  blog: makeBlogCollection("./src/content/blog"),
  "blog-en": makeBlogCollection("./src/content/blog-en"),
  "blog-zh": makeBlogCollection("./src/content/blog-zh"),
  "blog-ko": makeBlogCollection("./src/content/blog-ko"),
  "blog-es": makeBlogCollection("./src/content/blog-es"),
  "blog-fr": makeBlogCollection("./src/content/blog-fr"),
  "blog-de": makeBlogCollection("./src/content/blog-de"),
  "blog-pt": makeBlogCollection("./src/content/blog-pt"),
  "blog-hi": makeBlogCollection("./src/content/blog-hi"),
  "blog-id": makeBlogCollection("./src/content/blog-id"),
};

Frontmatter MDX dengan CTA

MDX adalah Markdown yang bisa memakai komponen. Frontmatter adalah kartu metadata untuk daftar artikel, OGP, RSS, sitemap, dan CTA.

---
title: "Membangun CMS Blog dengan Claude Code: Astro MDX, SEO Multibahasa, QA, dan Monetisasi"
description: "Bangun CMS blog dengan Claude Code dan Astro MDX: schema, lokalisasi, SEO, QA, dan CTA pendapatan."
pubDate: "2025-12-22"
updatedDate: "2026-06-02"
category: "use-cases"
tags: ["Claude Code", "CMS", "blog", "Astro", "MDX"]
heroImage: "/images/hero/hero-036.png"
lang: "id"
ctaLabel: "Jadwalkan konsultasi konten Claude Code"
ctaUrl: "https://example.com/consulting"
---

## Bagian pertama

Artikel ini menghubungkan penulisan, lokalisasi, SEO, QA, dan CTA monetisasi dalam satu workflow publikasi.

Script validasi Node

Simpan sebagai scripts/validate-blog-cms.mjs, lalu jalankan node scripts/validate-blog-cms.mjs claude-code-blog-cms dari root situs.

// scripts/validate-blog-cms.mjs
import fs from "node:fs";
import path from "node:path";

const slug = process.argv[2];
if (!slug) {
  console.error("Usage: node scripts/validate-blog-cms.mjs <slug>");
  process.exit(1);
}

const locales = [["blog", "ja"], ["blog-en", "en"], ["blog-zh", "zh"], ["blog-ko", "ko"], ["blog-es", "es"], ["blog-fr", "fr"], ["blog-de", "de"], ["blog-pt", "pt"], ["blog-hi", "hi"], ["blog-id", "id"]];
const root = path.join(process.cwd(), "src", "content");
const failures = [];

function readFrontmatter(source) {
  const match = source.match(/^---\n([\s\S]*?)\n---/);
  if (!match) return {};
  return Object.fromEntries(match[1].split("\n").flatMap((line) => {
    const index = line.indexOf(":");
    if (index === -1) return [];
    return [[line.slice(0, index).trim(), line.slice(index + 1).trim().replace(/^"|"$/g, "")]];
  }));
}

for (const [dir, lang] of locales) {
  const file = path.join(root, dir, `${slug}.mdx`);
  const source = fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "";
  const data = readFrontmatter(source);
  if (!source) failures.push(`${dir}: missing file`);
  if (data.lang !== lang) failures.push(`${dir}: wrong lang`);
  if (!data.updatedDate) failures.push(`${dir}: missing updatedDate`);
  if ((data.description || "").length > 120) failures.push(`${dir}: description too long`);
  if (!/https:\/\/docs\.astro\.build/.test(source)) failures.push(`${dir}: missing official docs`);
  if (!/\]\(\/blog\/claude-code-/.test(source)) failures.push(`${dir}: missing internal link`);
  if (!/(CTA|konsultasi|training|consult)/i.test(source)) failures.push(`${dir}: missing CTA`);
  if ((source.match(/`{3}/g) || []).length < 6) failures.push(`${dir}: fewer than three code blocks`);
}

if (failures.length) {
  console.error(failures.map((item) => `- ${item}`).join("\n"));
  process.exit(1);
}
console.log(`OK: ${slug} passed localized CMS checks.`);

Prompt dari draft ke publish

Rewrite the article for slug <slug> as a production-ready Astro MDX blog post.
- Edit only the localized files for this slug.
- Keep heroImage and category.
- Add updatedDate: "2026-06-02".
- Keep description within 120 characters.
- Include 3 real use cases, concrete pitfalls, runnable code, official Astro docs, internal links, and a monetization CTA.
- Report changed files and focused check results.

Kegagalan umum dan hasil uji

Kegagalan yang sering terjadi: hanya satu bahasa diperbarui, Claude Code diberi scope tulis terlalu luas, pseudocode diterbitkan seperti implementasi, RSS/sitemap/OGP dilupakan, atau CTA terlalu keras. Alur yang lebih baik menawarkan checklist, template, training, lalu konsultasi.

Saya menguji workflow ini di proyek Astro kecil. Schema memblokir tanggal yang hilang, dan script Node menemukan description terlalu panjang, link dokumentasi resmi yang hilang, internal link yang hilang, serta CTA yang belum ada. Kualitas bahasa Indonesia dan kekuatan penawaran konsultasi tetap perlu review manusia sebelum publikasi.