Home/ Blog/ Deploy Cloudflare Pages

Deploy Gratis ke Cloudflare Pages: Panduan Lengkap

Dari GitHub repo ke domain custom dalam 10 menit — panduan step by step untuk pemula yang ingin hosting website gratis dengan performa global.

OZ
Tim Obotzone
DevOps & Deployment · obotzone.id
Share

Salah satu pertanyaan paling sering dari klien kami: "Kalau sudah jadi websitenya, hosting di mana yang murah tapi cepat?"

Jawaban kami selalu sama: Cloudflare Pages. Gratis untuk project personal dan bisnis kecil, deploy otomatis dari GitHub, dan CDN global di 300+ kota termasuk Jakarta dan Singapura.

Kenapa Cloudflare Pages?

FiturCloudflare PagesVercel (Free)Netlify (Free)
BandwidthUnlimited100GB/bulan100GB/bulan
Build menit500/bulan6000/bulan300/bulan
Custom domainUnlimited11
CDN locations300+~30~30
DDoS protectionIncludedTidakTidak

Untuk website statis atau Astro/Next.js dengan output static, Cloudflare Pages adalah pilihan terbaik dari segi performa dan harga.

Persiapan

Sebelum mulai, pastikan kamu sudah punya:

  • Akun GitHub dengan repository berisi kode website
  • Akun Cloudflare (daftar gratis di cloudflare.com)
  • Domain (opsional — bisa pakai subdomain *.pages.dev gratis)
Struktur repo yang diperlukan:
Untuk HTML statis: index.html di root repo
Untuk Astro: package.json + astro.config.mjs
Untuk Next.js static: next.config.js dengan output: 'export'

Langkah-langkah Deploy

1

Login ke Cloudflare Dashboard

Buka dash.cloudflare.com → login → klik Workers & Pages di sidebar kiri.

2

Buat Project Baru

Klik Create application → pilih tab Pages → klik Connect to Git.

3

Hubungkan GitHub

Klik Connect GitHub → authorize Cloudflare → pilih repository yang ingin di-deploy.

4

Konfigurasi Build Settings

Isi sesuai stack yang dipakai (lihat tabel di bawah) → klik Save and Deploy.

5

Tunggu Build Selesai

Proses build biasanya 1–3 menit. Setelah selesai, website langsung live di nama-project.pages.dev.

Build Settings per Framework

FrameworkBuild CommandOutput Directory
HTML Statis(kosongkan)/
Astronpm run builddist
Next.js (static)npm run buildout
Vitenpm run builddist

Pasang Domain Custom

Setelah website live, kamu bisa hubungkan domain sendiri secara gratis:

  1. Di project Cloudflare Pages → klik tab Custom domains
  2. Klik Set up a custom domain
  3. Masukkan domain kamu (misal: obotzone.id)
  4. Kalau domain sudah di Cloudflare DNS: record CNAME otomatis ditambahkan
  5. Kalau domain di registrar lain: tambahkan CNAME record manual
# CNAME record yang perlu ditambahkan:
# Name: @ (atau www)
# Target: nama-project.pages.dev
Catatan: SSL/HTTPS otomatis diaktifkan oleh Cloudflare setelah domain terhubung. Tidak perlu setup manual.

Tips dan Troubleshooting

Auto-deploy setiap push ke main

Setiap kali kamu push commit ke branch main, Cloudflare Pages otomatis build dan deploy ulang. Tidak perlu trigger manual.

Preview deployment untuk setiap PR

Setiap Pull Request otomatis mendapat URL preview tersendiri. Berguna untuk review perubahan sebelum merge ke production.

Build gagal? Cek ini dulu

  • Node.js version: set di Settings → Environment variables, tambahkan NODE_VERSION = 20
  • Build command salah: pastikan sesuai tabel di atas
  • Output directory salah: cek folder yang di-generate setelah build lokal
Kalau masih bingung dengan proses deploy, kami siap bantu via WhatsApp. Setup Cloudflare Pages biasanya selesai dalam 15 menit bersama kami.

Dengan Cloudflare Pages, kamu dapat hosting gratis yang sebenarnya gratis — bukan trial, bukan limited. Dan performa globalnya sulit ditandingi platform lain di tier gratis.

// Mau Dibantu Setup?

Kami Setup Cloudflare Pages untuk Kamu

Termasuk domain custom, SSL, dan konfigurasi optimal. Selesai dalam 1 hari kerja.

Hubungi Kami →