Deploy Astro ke Cloudflare Pages lewat GitHub, dari Build sampai Domain

Deploy Astro ke Cloudflare Pages lewat GitHub, dari Build sampai Domain

Setelah website berhasil berjalan di localhost, ada satu langkah yang rasanya paling menyenangkan: melihatnya bisa diakses dari domain sendiri. Tetapi deployment sebaiknya bukan hanya soal menekan tombol Publish. Kamu juga perlu tahu cara memperbarui, memeriksa error, dan kembali ke versi sebelumnya.

Untuk blog Astro yang menghasilkan file statis, Cloudflare Pages adalah salah satu pilihan yang praktis. Kita dapat menghubungkannya dengan repository GitHub sehingga perubahan pada branch produksi memicu build otomatis.

Persiapkan proyek untuk produksi

Sebelum menghubungkan hosting, jalankan build di komputer:

npm install
npm run build

Astro umumnya menempatkan hasil website statis di direktori dist/. Pastikan proses tidak berhenti karena error dan buka halaman hasil menggunakan npm run preview.

Kalau website menampilkan artikel dari Markdown, cek apakah semua file memiliki metadata yang diperlukan. Build yang gagal saat validasi konten justru lebih baik daripada membiarkan artikel rusak terbit ke publik.

Simpan kode di GitHub

Repository dapat memakai dua branch: main untuk produksi dan develop untuk perubahan yang sedang diuji. Jangan mengunggah node_modules, file rahasia .env, atau folder output build yang bisa dibuat ulang.

Sebaiknya pull request ke main menjalankan pemeriksaan TypeScript dan build terlebih dahulu. Jika semuanya lulus, barulah perubahan digabungkan.

Menghubungkan ke Cloudflare Pages

Masuk ke dashboard Cloudflare, buka Workers & Pages, lalu pilih pembuatan Pages project dari repository Git. Pilih repository Astro yang sudah disiapkan. Untuk proyek statis standar, pengaturannya adalah:

Build command: npm run build
Build output directory: dist
Production branch: main

Jika npm run build juga menjalankan Pagefind, indeks pencarian akan dibuat setelah Astro selesai menghasilkan HTML. Pastikan Pagefind selesai sebelum folder dist dipublikasikan.

Menghubungkan domain kkxid.net

Setelah deployment uji berhasil, tambahkan custom domain melalui dashboard Pages. Ikuti arahan DNS yang ditampilkan Cloudflare. Jangan mengubah record secara sembarangan jika domain juga dipakai untuk email atau layanan lain.

Pastikan satu versi domain menjadi alamat utama—misalnya https://kkxid.net/. Atur redirect untuk versi lain bila dibutuhkan, lalu periksa canonical URL pada HTML. Sitemap dan tautan RSS sebaiknya juga mengarah ke domain resmi yang sama.

Bagaimana cara update artikel?

Prosesnya bisa singkat: ubah Markdown, commit di branch kerja, buka pull request, kemudian merge ke main setelah lolos pemeriksaan. Cloudflare akan menjalankan build baru sesuai integrasi repository.

Jika situs gagal setelah rilis, buka riwayat deployment. Periksa log error untuk melihat apakah penyebabnya dependensi, metadata artikel, atau kesalahan konfigurasi. Platform deployment biasanya menyediakan cara melihat atau kembali ke deployment sebelumnya.

Pemeriksaan setelah pertama kali online

Buka homepage dan setidaknya tiga artikel di perangkat yang berbeda. Periksa apakah gambar muncul, pencarian bekerja, dan halaman yang salah benar-benar memberi status 404. Lihat /sitemap-index.xml dan /rss.xml, lalu daftarkan domain ke Google Search Console.

Perubahan kecil yang dilakukan dengan prosedur rapi jauh lebih mudah dirawat daripada deployment yang mengandalkan ingatan. Catat konfigurasi yang dipakai dan selalu tahu branch mana yang sedang diterbitkan.