Cara Deploy Website Statis ke Cloudflare Pages dari GitHub

Website statis yang hanya berisi file HTML, CSS, dan JavaScript bisa dihosting gratis dan di-deploy dari GitHub, tanpa server yang harus dijaga. Cloudflare Pages menjadi salah satu tempat paling praktis untuk itu, apalagi kalau proyekmu dibangun dengan Next.js dalam mode static export.

Alur kerjanya sederhana: setiap kali kamu push ke branch, Cloudflare menyambar kode, menjalankan build, lalu meletakkan hasilnya sebagai website baru. Berikut langkah-langkahnya.

Siapkan repo di GitHub

Pastikan proyek sudah berada di repository GitHub. Situs statis yang paling mudah dimulai adalah yang tinggal ganti teks dan gambar tanpa proses build rumit, karena hasilnya langsung berupa folder file website.

Untuk proyek dengan build, pastikan command yang menghasilkan folder output sudah benar sebelum menyambungkan ke Cloudflare. Lebih baik build di laptopmu dulu sampai berhasil, daripada menebak saat sudah di platform.

Hubungkan repo ke Cloudflare Pages

Masuk ke dasbor Cloudflare, pilih Workers & Pages, lalu buat proyek Pages baru dan sambungkan ke repository GitHub tempat kode kamu berada. Pilih branch utama sebagai production, misalnya main.

Cloudflare lalu menawarkan nama subdomain otomatis seperti namaproyek.pages.dev. Subdomain ini cukup untuk mulai, dan bisa diganti domain sendiri nanti.

Build command dan output untuk Next.js

Di pengaturan build, isi dua hal yang menentukan: build command dan output directory. Untuk Next.js static export, build command adalah npm run build lalu npm run export untuk versi lama, sedangkan untuk Next.js 16 dengan output: "export" di next.config, npm run build langsung menghasilkan folder out.

Output directory diisi out. Salah isi di bagian ini adalah penyebab paling sering website tampil kosong, karena Cloudflare meng-upload folder yang salah. Cek folder yang benar-benar muncul setelah build di laptop sebelum memasangnya di panel.

Custom domain dan file _redirects

Kalau sudah punya domain, tambahkan sebagai custom domain di proyek Pages dan sesuaikan DNS sesuai petunjuk Cloudflare. HTTPS diurus otomatis, tidak perlu beli dan pasang sertifikat manual.

File bernama _redirects di akar folder output berguna untuk mengatur pengalihan, misalnya mempertahankan URL lama agar tidak jadi halaman 404 setelah pindah struktur. Sebelum merge ke production, manfaatkan URL preview yang dibuat Cloudflare untuk tiap pull request, supaya perubahan bisa dites dulu tanpa menyentuh situs yang sedang berjalan.

Kapan hosting gratis sudah cukup

Cloudflare Pages gratis sangat cukup untuk profil perusahaan, landing page, atau portofolio. Untuk memahami kapan harus berpindah ke hosting berbayar, artikel Hosting Gratis untuk Template Statis membahas batas-batas yang jarang disadari sampai benar-benar kena.

Kalau kamu tidak ingin repot membangun dari nol, Company Profile 5 Halaman (Next.js) (Rp250.000) sudah berupa template modern yang siap di-deploy memakai alur di atas. Untuk keperluan yang lebih ringkas, Landing Page UMKM 1 Halaman (Rp125.000) hanya perlu ganti teks dan gambar lalu push ke GitHub, dan dalam beberapa menit website-mu sudah online.