Membangun Blog dengan Astro dan Tailwind CSS: Mulai dari Nol

Membangun Blog dengan Astro dan Tailwind CSS: Mulai dari Nol

Punya keinginan membuat blog sendiri, tetapi langsung pusing ketika membayangkan database, panel admin, dan biaya server? Untuk blog yang utamanya berisi tulisan, sebagian besar itu sebenarnya tidak wajib. Ada jalan yang lebih sederhana: tulis artikel dalam Markdown, biarkan Astro membuat halaman HTML, lalu publikasikan hasilnya melalui hosting statis.

Pendekatan ini cocok untuk blog pribadi, catatan teknis, dokumentasi, atau situs publikasi kecil. Bukan berarti Astro otomatis unggul dalam segala hal. Namun untuk konten yang jarang berubah setiap detik, model statis membuat banyak urusan jadi lebih ringan.

Kenapa memilih Astro untuk blog?

Bayangkan pengunjung membuka satu artikel. Mereka membutuhkan judul, isi tulisan, gambar, tautan, dan mungkin sedikit interaksi. Mereka tidak membutuhkan aplikasi JavaScript besar hanya untuk membaca paragraf. Astro dapat menghasilkan HTML saat proses build sehingga browser cukup menampilkan halaman yang sudah siap.

Manfaatnya terasa pada beberapa hal: halaman bisa dimuat lebih ringan, pengelolaan konten bisa dipisah dari desain, dan tidak ada database publik yang perlu dijaga setiap hari. Tetap ada pekerjaan yang harus dilakukan, seperti menjaga dependensi, memperbaiki tautan rusak, serta mengatur metadata SEO.

Persiapan sebelum membuat proyek

Pastikan Node.js versi yang didukung Astro sudah terpasang. Jalankan perintah ini di terminal:

node --version
npm --version

Lalu buat proyek baru dan masuk ke direktori kerja:

npm create astro@latest blog-saya
cd blog-saya
npm run dev

Server pengembangan akan menampilkan alamat lokal. Buka alamat tersebut di browser. Setelah itu, biasakan membaca pesan error pada terminal—sering kali masalahnya hanya file yang salah nama atau lokasi import yang tidak sesuai.

Mengatur desain dengan Tailwind CSS

Tailwind CSS menggunakan class kecil seperti px-4, text-sm, dan grid. Pada versi 4, integrasi dengan Astro bisa menggunakan plugin Vite resmi.

npm install tailwindcss @tailwindcss/vite

Tambahkan plugin di konfigurasi Astro dan impor @import "tailwindcss"; pada stylesheet utama. Kita tidak harus menggunakan ratusan class sekaligus. Mulailah dari aturan sederhana: satu container, warna teks yang nyaman, dan jarak antarbagian yang konsisten.

Untuk daftar artikel, kombinasi CSS Grid dan card biasanya sudah cukup. Misalnya tiga kolom untuk artikel unggulan, empat untuk artikel terbaru pada desktop, dan dua kolom pada layar kecil. Jangan mengorbankan keterbacaan demi membuat semuanya muat.

Menulis konten dengan Markdown

Salah satu hal menyenangkan dari blog statis adalah artikel menjadi file teks biasa. Contohnya:

---
title: "Belajar Astro untuk Blog"
description: "Langkah pertama membangun blog dengan Astro."
---

## Kenapa Astro?

Astro cocok untuk website yang berfokus pada konten.

Metadata di antara tanda --- disebut frontmatter. Di proyek yang lebih serius, sebaiknya buat Content Collections agar judul, tanggal, kategori, dan gambar dapat divalidasi secara otomatis. Kesalahan metadata bisa terdeteksi sebelum situs dipublikasikan.

SEO dimulai dari struktur halaman

Setiap artikel perlu URL yang stabil, judul yang menggambarkan isi, description yang jelas, serta heading H2 dan H3 yang runtut. Buat juga sitemap, RSS, halaman arsip, dan tautan antarartikel yang relevan. Jika artikel mengajarkan suatu proses, tulis langkahnya secara lengkap; mesin pencari tidak bisa menggantikan manfaat informasi yang benar-benar berguna.

Gambar sebaiknya disimpan di dalam sumber proyek agar dapat dioptimalkan saat build. Tetapkan rasio thumbnail yang sama pada semua card dan jangan lupa teks alternatif yang menggambarkan gambar.

Setelah blog berjalan, apa berikutnya?

Mulai dari beberapa artikel yang benar-benar kamu kuasai. Cek apakah halaman nyaman dibuka dari ponsel, apakah URL artikel dapat diakses langsung, dan apakah ada tautan yang salah. Baru sesudah itu pertimbangkan fitur tambahan seperti komentar GitHub, pencarian lokal, atau iklan.

Astro memudahkan bagian teknis. Tetapi alasan orang kembali ke sebuah blog tetap sama: mereka menemukan jawaban yang masuk akal, disampaikan dengan jelas, tanpa membuang waktu.