Cara deploy website di Cloudflare Pages gratis dengan custom domain

Cloudflare Pages adalah salah satu hosting terbaik untuk webiste statis yang gratis. Meskipun gratis tapi tidak ada batasan bandwidth, deploy otomatis setiap kali push ke GitHub, dan SSL gratis tanpa banyak konfigurasi tambahan.

Kalau kamu baru selesai membuat landing page dengan Gemini CLI atau punya project Astro, Next.js, atau HTML biasa yang siap online agar bisa di akses oleh orang lain - panduan ini cocok untuk kamu.

Apa yang kamu butuhkan

Sebelum mulai, pastikan kamu sudah punya:

Akun GitHub dengan repository yang berisi project website kamu
Akun Cloudflare gratis di cloudflare.com
Domain (opsional) kalau mau pakai custom domain sendiri

Kalau project kamu belum ada di GitHub, baca bagian simpan project di GitHub di artikel sebelumnya.

Kenapa Cloudflare Pages

Ada banyak pilihan hosting gratis seperti GitHub Pages, Vercel, dan Netlify. Tapi Cloudflare Pages punya beberapa kelebihan:

Bandwidth unlimited - tidak ada batasan traffic
Build time 500x per bulan di free tier
CDN global - website kamu di-cache di 300+ lokasi server di seluruh dunia
SSL otomatis - HTTPS langsung aktif tanpa setup
Preview deployment - setiap pull request dapat URL preview sendiri
Web analytics gratis - tanpa tracking script yang memperlambat website

Buka dash.cloudflare.com dan login dengan akun kamu. Kalau belum punya akun, klik Sign Up dan daftar gratis pakai email.

Setelah masuk dashboard, klik Workers & Pages di sidebar kiri.

Step 2: Buat project baru

Klik tombol Create
Pilih tab Pages
Klik Connect to Git
Pilih GitHub dan authorize Cloudflare untuk akses repository kamu
Pilih repository yang mau di-deploy dari daftar

Kalau repository tidak muncul, klik Configure GitHub app untuk memberikan akses ke repository yang spesifik.

Step 3: Konfigurasi build settings

Setelah memilih repository, kamu perlu atur build settings.

Untuk project Astro:

Setting	Value
Production branch	`main`
Framework preset	Astro
Build command	`npm run build`
Build output directory	`dist`

Untuk project HTML biasa (tanpa framework):

Setting	Value
Production branch	`main`
Framework preset	None
Build command	(kosongkan)
Build output directory	`/`

Cloudflare sudah punya preset untuk banyak framework populer. Kalau kamu pakai Astro, tinggal pilih dari dropdown dan semua terisi otomatis.

Environment variables

Kalau project kamu butuh environment variable (misalnya SITE_URL), klik Environment variables dan tambahkan. Untuk Astro, biasanya kamu perlu set:

Variable	Value
`NODE_VERSION`	`18`

Ini memastikan Cloudflare pakai Node.js versi yang kompatibel saat build.

Step 4: Deploy

Klik Save and Deploy. Cloudflare akan mulai clone repository, install dependencies, dan build project kamu secara otomatis. Proses ini biasanya selesai dalam 1-3 menit.

Setelah berhasil, website kamu langsung live di URL seperti:

https://nama-project.pages.dev

Buka URL tersebut di browser untuk memastikan semuanya berjalan dengan baik. Mulai sekarang, setiap kali kamu push ke branch main, Cloudflare otomatis build dan deploy ulang.

Step 5: Setup custom domain

Kalau kamu punya domain sendiri dan mau pakai itu alih-alih *.pages.dev, berikut caranya.

Kalau domain sudah di Cloudflare

Ini skenario paling mudah. Cloudflare akan otomatis mengatur DNS record.

Di dashboard project Pages kamu, klik tab Custom domains
Klik Set up a custom domain
Ketik domain kamu, misalnya www.tokoku.com
Klik Continue
Cloudflare otomatis membuat CNAME record - klik Activate domain

Dalam 1-2 menit, domain kamu sudah aktif dengan SSL.

Untuk apex domain (tanpa www, misalnya tokoku.com), ulangi langkah yang sama. Cloudflare akan membuat CNAME record yang di-flatten otomatis.

Kalau domain di provider lain

Kalau domain kamu masih di provider lain (Niagahoster, Namecheap, GoDaddy, dll), kamu punya 2 pilihan:

Pilihan A: Pindahkan nameserver ke Cloudflare (rekomendasi)

Di Cloudflare dashboard utama, klik Add a site
Masukkan domain kamu dan pilih plan Free
Cloudflare akan memberikan 2 nameserver, misalnya:
- nova.ns.cloudflare.com
- john.ns.cloudflare.com
Login ke panel domain provider kamu
Ubah nameserver ke 2 nameserver Cloudflare tersebut
Tunggu propagasi DNS (biasanya 1-24 jam)
Setelah aktif, ikuti langkah “Kalau domain sudah di Cloudflare” di atas

Pilihan B: Tambah CNAME record manual (tanpa pindah nameserver)

Ini hanya bisa untuk subdomain (misalnya www.tokoku.com), bukan apex domain.

Login ke panel DNS domain provider kamu
Tambahkan CNAME record:

Type	Name	Target
CNAME	`www`	`nama-project.pages.dev`

Kembali ke Cloudflare Pages, tambahkan custom domain www.tokoku.com
Tunggu verifikasi selesai

Pilihan A lebih disarankan karena kamu juga mendapat CDN Cloudflare, DDoS protection, dan fitur keamanan lainnya untuk seluruh domain.

Step 6: Konfigurasi redirect www

Supaya pengunjung yang ketik tokoku.com otomatis diarahkan ke www.tokoku.com (atau sebaliknya), buat file public/_redirects di project kamu:

https://tokoku.com/* https://www.tokoku.com/:splat 301

Atau kalau kamu mau sebaliknya (www ke non-www):

https://www.tokoku.com/* https://tokoku.com/:splat 301

Commit dan push perubahan ini. Cloudflare akan otomatis menerapkan redirect setelah deploy.

Troubleshooting

Build gagal dengan error Node.js version: Tambahkan environment variable NODE_VERSION dengan value 18 atau 20 di settings build project kamu.

Domain sudah ditambahkan tapi belum aktif: Cek apakah nameserver sudah benar di domain provider. Propagasi DNS bisa memakan waktu sampai 24 jam, tapi biasanya jauh lebih cepat.

Website muncul tapi CSS/JS tidak load: Pastikan build output directory sudah benar. Untuk Astro, harus dist. Untuk project HTML biasa tanpa build step, gunakan /.

Sekarang website kamu sudah online di Cloudflare Pages dengan custom domain, SSL gratis, dan auto deploy. Kalau kamu lebih tertarik dengan GitHub Pages sebagai alternatif, baca panduan deploy website di GitHub Pages.