Blog ini dibangun pakai Astro 6 dan saya mau cerita sedikit tentang prosesnya. Bukan tutorial step-by-step, tapi lebih ke catatan keputusan dan alasan di baliknya.

Kenapa Astro

Saya sudah pernah pakai Next.js, Hugo, bahkan pernah bikin static site generator sendiri pakai Python. Tapi buat blog, Astro menang di beberapa hal:

  1. Zero JS by default - Blog tidak butuh JavaScript berat. Astro kirim HTML murni kecuali ada komponen yang memang butuh interaktivitas.
  2. Content Collections - Schema frontmatter pakai Zod, type-safe, dan error messages-nya jelas.
  3. Island Architecture - Kalau suatu saat butuh komponen interaktif, tinggal hydrate yang itu aja, bukan seluruh halaman.
  4. MDX support - Bisa embed komponen Astro di dalam markdown.

Stack yang dipakai

Framework:    Astro 6.3
Content:      Markdown + MDX
Styling:      Vanilla CSS (no Tailwind)
Font:         Inter + JetBrains Mono (Google Fonts)
Integrations: @astrojs/mdx, @astrojs/sitemap, @astrojs/rss
Image:        sharp (built-in optimization)

Saya sengaja tidak pakai Tailwind. Bukan karena Tailwind jelek, tapi karena blog ini cukup kecil dan saya mau kontrol penuh atas design system-nya. Vanilla CSS dengan custom properties sudah lebih dari cukup.

Design System

Theme-nya dark mode. Bukan karena ikut tren, tapi karena saya memang coding di malam hari dan mata saya berterima kasih kalau tidak kena cahaya putih menyilaukan.

Beberapa keputusan desain:

  • Background bukan pure black - Pakai #0a0e1a (navy gelap). Pure black (#000) bikin kontras terlalu tajam dan mata cepat lelah.
  • Text bukan pure white - Pakai #e2e8f0. Cukup terang buat dibaca, tidak menyakitkan kalau dibaca lama.
  • Glassmorphism ringan - Header pakai backdrop-filter: blur() supaya ada depth tanpa terasa berat.
  • Gradient accent halus - Blue ke cyan ke purple, cukup buat memberi karakter tanpa berlebihan.

Content Schema

Setiap post punya frontmatter yang di-validate pakai Zod:

z.object({
  title: z.string(),
  description: z.string(),
  pubDate: z.coerce.date(),
  updatedDate: z.coerce.date().optional(),
  heroImage: z.optional(image()),
  tags: z.array(z.enum(['dev', 'worldbuilding', 'projects', 'thoughts'])).default(['thoughts']),
})

Tag system ini simpel tapi cukup buat kebutuhan saya. Empat kategori: Dev, Worldbuilding, Projects, dan Thoughts. Di halaman blog ada filter client-side yang ringan, cuma JavaScript biasa tanpa framework.

Hal yang saya pelajari

Beberapa catatan kecil yang mungkin berguna:

Astro 6 fonts API baru. Tidak perlu lagi manual <link> ke Google Fonts. Sekarang ada fontProviders.google() di config yang otomatis handle preload dan font-display.

Content Collections loader glob. Di Astro 6, content collections pakai glob() loader, bukan lagi convention-based folder. Lebih eksplisit dan fleksibel.

Image optimization. Astro punya komponen <Image> bawaan yang otomatis resize dan convert format. Tapi harus install sharp sebagai dependency.

Penutup

Blog ini bukan masterpiece. Ini tempat nulis yang cukup bagus buat saya merasa nyaman publish sesuatu. Kalau kamu juga mau bikin blog, saran saya: jangan tunggu sempurna. Mulai aja, perbaiki sambil jalan.

Source code blog ini bisa dilihat di GitHub. Feel free buat fork atau ambil inspirasi.