Tutorial Cloudflare Pages: Cara Deploy Website Gratis dengan Cloudflare 2026
Apa Itu Cloudflare Pages?
Cloudflare Pages adalah platform hosting static site dan Jamstack dari Cloudflare - perusahaan yang mengelola jaringan CDN terbesar di dunia dengan lebih dari 300 edge locations di 100+ negara. Diluncurkan pada tahun 2021, Cloudflare Pages langsung menjadi kompetitor serius bagi Netlify dan Vercel berkat kombinasi yang sangat menarik: performa CDN kelas dunia dengan tier gratis yang sangat murah hati.
Yang membuat Cloudflare Pages istimewa adalah unlimited bandwidth di free plan - sesuatu yang tidak ditawarkan oleh Netlify atau Vercel. Ini menjadikannya pilihan yang sangat menarik untuk website dengan traffic tinggi sekalipun, tanpa perlu khawatir biaya bandwidth yang membengkak.
Dalam tutorial Cloudflare Pages ini, Anda akan belajar cara deploy website gratis dari awal hingga selesai: mulai dari setup project, konfigurasi build pipeline, menghubungkan custom domain, menggunakan Cloudflare Pages Functions untuk serverless backend, hingga tips optimasi performa maksimal.
Keunggulan Cloudflare Pages
- Unlimited bandwidth di free plan - tidak ada batasan traffic
- CDN terkuat di dunia - 300+ edge locations, termasuk banyak node di Asia Tenggara
- Build unlimited - tidak ada batas jumlah build per bulan di free plan
- Preview deployments - setiap branch dan pull request mendapat URL preview unik
- Cloudflare Workers Functions - serverless functions berbasis V8 isolates dengan cold start hampir nol
- Built-in security - DDoS protection, WAF, dan keamanan Cloudflare langsung terintegrasi
- Integrasi ekosistem Cloudflare - mudah terhubung ke KV Storage, R2 Object Storage, D1 SQLite Database, dan Durable Objects
- Gratis untuk proyek komersial - tidak ada batasan penggunaan komersial di free plan
Prasyarat Sebelum Mulai
Untuk mengikuti tutorial ini, Anda memerlukan:
- Akun Cloudflare gratis (daftar di cloudflare.com)
- Akun GitHub atau GitLab dengan repository proyek Anda
- Website atau aplikasi static site yang sudah siap di-deploy (React, Vue, Gatsby, Next.js static export, Hugo, dll)
- Node.js terinstall di komputer Anda
Langkah 1: Membuat Akun Cloudflare
Jika belum memiliki akun, kunjungi dash.cloudflare.com/sign-up dan daftar dengan email Anda. Tidak perlu kartu kredit untuk menggunakan fitur-fitur dasar Cloudflare Pages. Verifikasi email Anda, lalu login ke dashboard Cloudflare.
Langkah 2: Menyiapkan Repository GitHub
Cloudflare Pages bekerja dengan cara terhubung ke repository Git Anda. Pastikan kode website Anda sudah ada di GitHub atau GitLab. Jika belum, buat repository baru dan push kode Anda:
cd proyek-website-saya
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/nama-repo.git
git push -u origin mainLangkah 3: Membuat Project di Cloudflare Pages
- Login ke dash.cloudflare.com
- Di sidebar kiri, klik Workers & Pages
- Klik tab Pages
- Klik tombol Create a project
- Pilih Connect to Git
Menghubungkan GitHub
Cloudflare akan meminta izin akses ke GitHub. Pilih akun GitHub Anda dan tentukan apakah ingin memberikan akses ke semua repository atau repository tertentu saja. Disarankan memilih repository spesifik untuk keamanan.
- Setelah terotorisasi, pilih repository yang ingin Anda deploy
- Klik Begin setup
Langkah 4: Konfigurasi Build Settings
Ini adalah bagian terpenting dalam setup. Cloudflare Pages membutuhkan informasi tentang bagaimana cara mem-build website Anda.
Framework Presets
Cloudflare Pages mendeteksi framework Anda secara otomatis dan mengisi build settings yang sesuai. Namun penting untuk memverifikasi bahwa konfigurasinya benar:
Untuk React (Vite):
Framework preset: Vite
Build command: npm run build
Build output directory: distUntuk Next.js (Static Export):
Framework preset: Next.js (Static HTML Export)
Build command: npm run build
Build output directory: outCatatan: Untuk Next.js dengan SSR, gunakan @cloudflare/next-on-pages adapter agar Server Components dan API Routes berjalan sebagai Cloudflare Workers.
Untuk Gatsby:
Framework preset: Gatsby
Build command: gatsby build
Build output directory: publicUntuk Vue.js (Vite):
Framework preset: Vue
Build command: npm run build
Build output directory: distUntuk Hugo:
Framework preset: Hugo
Build command: hugo
Build output directory: publicEnvironment Variables
Jika aplikasi Anda memerlukan environment variables (API keys, URL backend, dll), tambahkan di bagian Environment variables (advanced) sebelum deploy. Cloudflare Pages mendukung environment variables yang berbeda untuk environment Production dan Preview secara terpisah.
REACT_APP_API_URL=https://api.websitesaya.com
NEXT_PUBLIC_SITE_URL=https://websitesaya.comVersi Node.js
Jika framework Anda memerlukan versi Node.js tertentu, tambahkan environment variable:
NODE_VERSION=20Langkah 5: Deploy Website
Setelah semua konfigurasi selesai, klik tombol Save and Deploy. Cloudflare Pages akan:
- Clone repository Anda
- Install dependencies (
npm install) - Menjalankan build command
- Upload output ke CDN global Cloudflare
Proses ini biasanya memakan waktu 1-5 menit tergantung kompleksitas build. Setelah selesai,
website Anda akan tersedia di subdomain nama-project.pages.dev.
Mulai sekarang, setiap kali Anda push ke branch main, Cloudflare Pages akan
otomatis rebuild dan redeploy website Anda.
Langkah 6: Menghubungkan Custom Domain
Subdomain pages.dev bisa langsung digunakan, tapi untuk website profesional
Anda tentu ingin menggunakan domain sendiri.
Opsi A: Domain yang Sudah Dikelola Cloudflare
Ini adalah cara paling mudah. Jika domain Anda sudah menggunakan Cloudflare nameservers:
- Di halaman project Pages Anda, klik tab Custom domains
- Klik Set up a custom domain
- Masukkan domain Anda (misal:
websitesaya.comatauwww.websitesaya.com) - Cloudflare akan otomatis membuat DNS record yang diperlukan - klik Activate domain
Opsi B: Domain di Registrar Lain
Jika domain Anda menggunakan nameserver dari registrar lain (Namecheap, GoDaddy, dll):
- Tambahkan domain seperti langkah di atas
- Cloudflare akan menampilkan DNS record yang perlu ditambahkan
- Login ke registrar domain Anda dan tambahkan CNAME record:
Type: CNAME
Name: www (atau @ untuk root domain)
Value: nama-project.pages.dev
TTL: Auto
Untuk root domain (websitesaya.com tanpa www), beberapa registrar mendukung
CNAME flattening atau Anda bisa menggunakan A record yang mengarah ke IP Cloudflare.
Cara termudah adalah mengalihkan nameserver domain Anda ke Cloudflare.
SSL Certificate Otomatis
Cloudflare Pages secara otomatis menyediakan dan memperbarui SSL certificate untuk custom domain Anda - gratis tanpa konfigurasi tambahan. HTTPS aktif dalam beberapa menit setelah domain terhubung.
Langkah 7: Menggunakan Cloudflare Pages Functions
Cloudflare Pages Functions memungkinkan Anda menambahkan logika backend (serverless functions) langsung ke dalam proyek Pages Anda. Functions berjalan sebagai Cloudflare Workers di edge - dengan cold start hampir nol dan latensi ultra-rendah.
Membuat Function Sederhana
Buat folder functions/ di root proyek Anda. Setiap file di folder ini
otomatis menjadi API endpoint:
# Struktur contoh
functions/
├── api/
│ ├── hello.js → /api/hello
│ ├── contact.js → /api/contact
│ └── products/
│ └── index.js → /api/productsBuat file functions/api/hello.js:
export async function onRequest(context) {
const { request, env } = context;
return new Response(
JSON.stringify({
message: "Halo dari Cloudflare Pages Functions!",
timestamp: new Date().toISOString(),
}),
{
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
}
);
}Contoh function untuk menangani form contact:
// functions/api/contact.js
export async function onRequestPost(context) {
const { request, env } = context;
try {
const body = await request.json();
const { name, email, message } = body;
// Validasi input
if (!name || !email || !message) {
return new Response(
JSON.stringify({ error: "Semua field wajib diisi" }),
{ status: 400, headers: { "Content-Type": "application/json" } }
);
}
// Di sini Anda bisa kirim email, simpan ke database, dll
// Contoh: simpan ke Cloudflare KV
await env.CONTACTS_KV.put(
`contact:${Date.now()}`,
JSON.stringify({ name, email, message, createdAt: new Date().toISOString() })
);
return new Response(
JSON.stringify({ success: true, message: "Pesan berhasil dikirim!" }),
{ status: 200, headers: { "Content-Type": "application/json" } }
);
} catch (error) {
return new Response(
JSON.stringify({ error: "Terjadi kesalahan server" }),
{ status: 500, headers: { "Content-Type": "application/json" } }
);
}
}Langkah 8: Integrasi dengan Layanan Cloudflare Lainnya
Salah satu keunggulan terbesar Cloudflare Pages adalah kemudahan integrasi dengan ekosistem Cloudflare yang sangat kaya. Semua layanan ini tersedia dalam tier gratis yang cukup murah hati:
Cloudflare KV (Key-Value Storage)
KV Storage sangat cocok untuk menyimpan data sesi, preferensi pengguna, atau cache data:
- Di Cloudflare Dashboard, buka Workers & Pages > KV
- Klik Create a namespace dan beri nama (misal:
WEBSITE_DATA) - Di project Pages Anda, buka Settings > Functions > KV namespace bindings
- Tambahkan binding: Variable name
WEBSITE_DATA, KV namespace pilih yang baru dibuat
Cloudflare D1 (SQLite Database)
D1 adalah database SQLite serverless yang berjalan di edge Cloudflare:
# Buat database via Wrangler CLI
npx wrangler d1 create nama-database
# Buat tabel
npx wrangler d1 execute nama-database --command "CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT)"Cloudflare R2 (Object Storage)
R2 adalah alternatif Amazon S3 tanpa biaya egress. Cocok untuk menyimpan file upload, gambar, dan aset lainnya dari website Anda.
Langkah 9: Konfigurasi Redirects dan Headers
Cloudflare Pages mendukung file konfigurasi khusus untuk redirects dan custom headers:
File _redirects
Buat file public/_redirects (atau di root output directory):
# Redirect dari URL lama ke URL baru
/blog-lama /artikel/baru-saya 301
/promo https://promo.websitesaya.com 302
# SPA fallback untuk React Router
/* /index.html 200File _headers
Buat file public/_headers untuk mengatur custom HTTP headers:
/*
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
/assets/*
Cache-Control: public, max-age=31536000, immutable
/*.js
Cache-Control: public, max-age=31536000, immutableLangkah 10: Preview Deployments dan Collaboration
Setiap branch dan pull request di repository Anda otomatis mendapatkan URL preview unik. Ini sangat berguna untuk:
- Review perubahan sebelum merge ke main
- Testing fitur baru di environment yang mirip production
- Berbagi preview ke klien atau stakeholder untuk approval
URL preview berbentuk: nama-branch.nama-project.pages.dev
Anda bisa mengatur akses ke preview deployments - apakah bisa diakses publik atau hanya oleh pengguna yang terautentikasi via Cloudflare Access.
Monitoring dan Analytics
Cloudflare Pages menyediakan beberapa tools untuk monitoring:
- Deployment logs - lihat log build dan deployment di real-time
- Function logs - debug Pages Functions langsung dari dashboard
- Cloudflare Web Analytics - analytics berbasis server yang ringan, tidak memerlukan JavaScript di client, dan lebih privasi-friendly dibanding Google Analytics. Gratis untuk website Cloudflare.
Untuk mengaktifkan Web Analytics di Pages:
- Buka project Pages Anda
- Klik tab Analytics
- Ikuti instruksi untuk menambahkan script analytics ke HTML Anda
Tips Optimasi Performa dengan Cloudflare Pages
- Manfaatkan cache CDN - set header
Cache-Controlyang tepat untuk aset statis agar di-cache di edge Cloudflare selama mungkin - Gunakan format gambar modern - Cloudflare Images bisa mengkonversi gambar ke WebP/AVIF secara otomatis
- Aktifkan Cloudflare Minify - di Cloudflare Dashboard > Speed, aktifkan Auto Minify untuk JavaScript, CSS, dan HTML
- Gunakan Cloudflare Rocket Loader - mengoptimalkan loading JavaScript dengan cara asinkron
- Early Hints - Cloudflare Pages mendukung HTTP 103 Early Hints untuk mempercepat preload resource kritis
- Smart Placement - aktifkan Smart Placement untuk Workers/Functions agar dijalankan di lokasi edge yang paling optimal untuk pengguna Anda
Perbandingan Cloudflare Pages vs Netlify vs Vercel
| Fitur | Cloudflare Pages | Netlify | Vercel |
|---|---|---|---|
| Bandwidth gratis | Unlimited | 100 GB/bln | 100 GB/bln |
| Build per bulan (gratis) | 500 | 300 menit | Unlimited |
| Serverless Functions | 100.000/hari | 125.000/bln | 100.000/bln |
| Edge locations | 300+ | ~100 | 70+ |
| Custom domains | Unlimited | Unlimited | 50/proyek |
| Database terintegrasi | D1 (SQLite), KV, R2 | Tidak | Postgres, KV, Blob |
| DDoS Protection | Ya (built-in) | Terbatas | Terbatas |
| Penggunaan komersial gratis | Ya | Ya | Tidak |
FAQ: Tutorial Cloudflare Pages
Pertanyaan yang Sering Diajukan
Apakah Cloudflare Pages benar-benar gratis untuk selamanya?
Ya, free plan menawarkan unlimited bandwidth, 500 build per bulan, 100 custom domains, dan 100.000 Function invocations per hari. Tidak ada batasan penggunaan komersial. Upgrade diperlukan untuk fitur enterprise atau tim besar.
Apakah bisa digunakan untuk website Next.js dengan SSR?
Ya, dengan adapter @cloudflare/next-on-pages, Anda bisa deploy Next.js
dengan Server Components dan API Routes. SSR dijalankan oleh Cloudflare Workers di
edge untuk respons yang sangat cepat.
Bagaimana cara rollback ke deployment sebelumnya?
Di dashboard, buka tab Deployments, klik deployment yang diinginkan, lalu klik "Rollback to this Deployment". Proses selesai dalam hitungan detik tanpa rebuild.
Apakah cocok untuk website dengan pengguna lokal Indonesia?
Cloudflare memiliki edge nodes di Jakarta dan Asia Tenggara, sehingga pengguna Indonesia mendapatkan konten dari server yang lebih dekat dengan latensi yang lebih rendah.
Apakah bisa menggunakan database MySQL atau PostgreSQL?
Pages Functions bisa terhubung ke database eksternal via TCP atau HTTP API. Cloudflare juga menyediakan D1 (SQLite serverless) sebagai alternatif database yang berjalan langsung di edge.
Berapa lama waktu setup dan deploy pertama?
Setup awal biasanya 10-15 menit. Build pertama untuk React sederhana 1-3 menit, Gatsby dengan banyak halaman 5-10 menit. Build berikutnya lebih cepat karena cache dependency.
Apakah mendukung deploy manual tanpa Git?
Ya, dengan fitur Direct Upload via Wrangler CLI:
npx wrangler pages deploy ./dist --project-name nama-project.
Berguna untuk proyek tanpa Git atau testing cepat.
Kesimpulan
Cloudflare Pages adalah pilihan hosting static site yang sangat kompetitif - bahkan bisa dibilang terbaik dalam hal nilai (value for money) berkat kombinasi unlimited bandwidth, CDN terkuat di dunia, dan ekosistem layanan terintegrasi yang kaya. Dengan free plan yang diizinkan untuk penggunaan komersial, Cloudflare Pages menjadi pilihan yang sangat menarik baik untuk developer individu maupun perusahaan.
Kelebihan utama Cloudflare Pages dibanding kompetitor adalah infrastruktur CDN-nya yang tidak tertandingi - 300+ edge locations termasuk beberapa di Indonesia, memastikan website Anda berjalan cepat untuk pengguna di seluruh dunia termasuk Asia Tenggara.
Untuk memulai, cukup daftar akun Cloudflare gratis, hubungkan repository GitHub Anda, konfigurasi build settings, dan website Anda akan live dalam hitungan menit. Dengan auto-deploy pada setiap push dan preview deployments untuk setiap branch, workflow development Anda akan menjadi jauh lebih produktif dan profesional.
Artikel Terkait
Netlify vs Vercel: Perbandingan Platform Hosting Static Site Terbaik 2026
Perbandingan lengkap Netlify vs Vercel untuk hosting static site. Temukan perbedaan fitur, harga, performa, kemudahan penggunaan, dan mana yang lebih cocok untuk proyek Anda.
Baca Selengkapnya →Cara Membuat Website dengan Gatsby.js: Panduan Lengkap Static Site Generator React 2026
Pelajari cara membuat website dengan Gatsby.js dari nol. Panduan lengkap mencakup instalasi, GraphQL data layer, plugin ekosistem, optimasi performa, hingga cara deploy website Gatsby ke hosting.
Baca Selengkapnya →Cara Membuat Website dengan React.js: Panduan Pemula Lengkap 2026
Pelajari cara membuat website dengan React.js dari nol. Panduan pemula lengkap mencakup instalasi, komponen, state management, routing, hingga deploy website React ke hosting.
Baca Selengkapnya →Butuh Hosting untuk Website Anda?
Dapatkan hosting cepat, aman, dan terpercaya dengan harga terjangkau. Gratis domain, SSL, dan support 24/7.
Jangan Ketinggalan Promo!
Subscribe newsletter kami dan dapatkan diskon hingga 50% untuk pembelian pertama kamu.
Gratis, tanpa spam. Bisa unsubscribe kapan saja.