Migrasi dari WordPress ke Astro: Cerita Rebuild Situs Personal

Beberapa minggu terakhir saya menyelesaikan proyek yang sudah lama tertunda: rebuild total situs personal dari WordPress ke platform yang benar-benar baru. Situs lama saya — ziffany.firdinal.my.id — terakhir diperbarui tahun 2018. Sudah hampir delapan tahun tidak tersentuh. Isinya masih artikel-artikel hukum yang saya tulis saat masih associate di kantor law firm, sebelum saya bergeser ke dunia legal yang lebih banyak bersinggungan dengan teknologi.

Proyek ini menarik karena bukan sekadar pindah hosting. Saya bersama agent ai menulis ulang dari nol: struktur, desain, konten, dan — yang paling seru — caranya saya membangun.

Kenapa Tidak Cukup Update WordPress

WordPress sebenarnya tidak rusak. CMS ini masih bisa dipakai, bahkan mungkin lebih cepat dari segi hasil jadi. Tapi saya punya beberapa pertimbangan:

1. Database. Saya tidak mau situs personal bergantung pada database MySQL. Setiap kali ada update keamanan, plugin bermasalah, atau serangan brute-force login — itu semua beban yang tidak perlu untuk situs satu halaman profil plus beberapa artikel.

2. Privasi. Situs lawas menggunakan Google Fonts. Setiap pengunjung secara tidak langsung mengirim data ke Google, meski hanya untuk ngambil file font. Di Indonesia, UU PDP (Perlindungan Data Pribadi) mulai diperketat.

3. Static-first mindset. Saya lebih suka pendekatan yang menghasilkan file HTML statis. Lebih cepat, lebih aman, tidak perlu khawatir server down karena traffic.

Pilihan jatuh ke Astro — framework static site generator yang relatif baru tapi sudah matang. Hasil build-nya adalah file HTML, CSS, dan JavaScript statis yang bisa dihosting di mana saja.

Flow Kerja: Doc-First, Agent-First

Ini bagian yang paling menarik dari proyek ini. Saya tidak menulis kode baris per baris secara manual. Saya menggunakan pendekatan Agentic Engineer yang saya sebut doc-first, agent-execute.

Begini alurnya:

1. Saya menulis spek. Setiap bagian dari situs — warna apa yang dipakai, bagaimana tipografi, struktur halaman, konten apa yang harus dimigrasi — saya tulis dulu melalui diskusi dengan Claude Opus 4.7. Bukan kode, tapi dokumen.

2. Agent mengeksekusi. Saya orchestrasi beberapa AI agent — Antigravity CLI (bertenaga Gemini Flash 3.5 + Sonnet 4.6), OpenCode (Deepseek V4), dan beberapa tool CLI lainnya — untuk mengeksekusi spek. Mereka membaca dokumen, menulis kode, build, dan saya review.

3. Saya review. Setiap fase dilewati dengan review manual. Ada yang saya periksa baris per baris (untuk bagian yang sensitif seperti struktur data), ada yang sampel, ada yang cukup dicek lewat build otomatis.

Metode ini bukan berarti saya tidak pegang kode sama sekali. Toh yang mereview tetap saya. Tetapi kecepatannya jauh di atas nulis manual. Saya bisa menyelesaikan bootstrapping, desain sistem, komponen, dan konten — sekitar 9 fase — dalam beberapa sesi kerja intensif, bukan berminggu-minggu.

Migrasi Konten

Bagian paling melelahkan dari proyek ini bukan nulis kode, tapi migrasi konten.

Artikel-artikel lama saya ada dalam dua format: (1) export XML dari WordPress yang sudah di-clean, dan (2) file DOCX — termasuk tesis S2 saya yang panjangnya lebih dari 100 halaman dan satu paper jurnal.

Untuk DOCX, saya pakai tool bernama mammoth.js yang membaca file Word dan mengeluarkan Markdown. Tidak sempurna — banyak formatting yang harus dibersihkan manual — tapi jauh lebih cepat daripada copy-paste satu per satu.

Tujuh artikel hukum dari situs lama berhasil dimigrasi. Dua publikasi akademik (tesis 2025 dan jurnal 2024) ikut masuk. Semua frontmatter — judul, tanggal, kategori, tag — ditulis manual karena format lama tidak kompatibel.

Desain dan Tipografi

Saya tidak mulai dari layar kosong. Sebelum proyek ini, saya sudah membuat design system sendiri — ziffany-personal-design-system — yang berisi palet warna, font, dan komponen referensi. Proses desainnya saya kerjakan bareng Claude Design di claude.ai, dari memilih palet warna sampai menentukan tipografi.

Dari situ saya ambil:

• Warna utama: oxblood (#7b2d26) — merah tua yang hangat, tidak agresif
• Background: krem terang (#faf7f2) — nyaman dibaca, mengurangi silau
• Font: Lora untuk body artikel (serif klasik), Geist untuk navigasi (sans-serif modern), Geist Mono untuk kode

Semua font di-host sendiri di server. Tidak ada request ke Google Fonts. Tidak ada data pengunjung yang bocor.

Tantangan Teknis yang Paling Menyita Waktu

Dari semua fase, yang paling dramatis adalah migrasi dua halaman panduan GitHub — Ubuntu dan Windows. Masing-masing ~2.000 baris konten dengan sidebar navigasi, search filter, tombol copy, dan tab switching untuk template .gitignore.

Awalnya saya coba buat sebagai halaman Astro biasa dengan layout khusus. Ternyata Astro — karena dia bundling script — mengubah kode JavaScript saya jadi ES modules yang tidak bisa jalan di file statis. Percobaan pertama gagal total.

Solusinya: saya tinggalkan Astro untuk dua halaman ini. Saya buat file HTML standalone di folder public/ — dilewati processing Astro sepenuhnya. Semua CSS di-inline, semua JavaScript via event listener (tanpa onclick). Hasilnya: 84 KB (Ubuntu) dan 72 KB (Windows) — dua file HTML yang bisa dibuka langsung dari filesystem tanpa server.

Infrastruktur Digital

Situs dihosting sebagai static file — tinggal upload ke Cloudflare Pages atau server statis manapun, dan situs langsung jalan.

Kenapa Cerita Ini Penting

Saya konsultan hukum. Saya bukan full-time developer. Tapi membangun infrastruktur hukum digital untuk pasar Indonesia — mulai dari database publik seperti insolvensi.id, sampai situs personal ini — membutuhkan pemahaman tentang cara teknologi bekerja.

Proyek rebuild ini menunjukkan bahwa dengan pendekatan yang sistematis — doc-first, agent-execute, review manual — seseorang bisa membangun produk digital yang solid tanpa harus menulis semua kode dari nol. Teknologi sekarang memungkinkan kita melompat, asal kita punya fondasi: tahu apa yang mau dibangun, dan tahu bagaimana menilai hasilnya.