Cloudflare Pages + Wrangler: deploy & arahkan domain
Anda bisa men-deploy situs statisⓘ ke Cloudflare Pages langsung dari terminal dengan Wrangler
(CLI Cloudflare) — tak perlu menunggu CI. Berikut alur lengkapnya: token yang aman, membuat dan
men-deploy project, mengarahkan domain, lalu memastikan www jadi satu-satunya rumah kanonikⓘ
supaya *.pages.dev tak menggandakan situs Anda di mata mesin pencari.
Ini jalur CLI/manual. Untuk versi otomatis (sekali push ke
main), lihat CI/CD: GitHub Actions → Cloudflare Pages — pakai perintah Wrangler yang sama, hanya dijalankan oleh runner.
1 · Token API hak-minimal
Wrangler butuh dua hal untuk bicara ke akun Anda: Account ID dan sebuah API token. Jangan pakai token global — buat satu yang hanya bisa men-deploy Pages, hanya di akun ini. Kalau token itu bocor, kerusakannya terbatas pada Pages di satu akun, bukan seluruh akun Cloudflare Anda.
Di Cloudflare → My Profile → API Tokens → Create Token (Custom):
Permissions: Account · Cloudflare Pages · Edit
Account Resources: Include · <akun yang memiliki domain> ← hanya yang ini
Lalu sediakan ke Wrangler lewat environment variable:
export CLOUDFLARE_ACCOUNT_ID=<account-id> # dari dashboard, sidebar kanan
export CLOUDFLARE_API_TOKEN=<token-pages-edit>
2 · Buat & deploy dengan Wrangler
Buat project-nya sekali, lalu deploy folder hasil build (dist/):
npm i -D wrangler
# buat project sekali — production branch = main
wrangler pages project create my-site --production-branch main
# deploy output statis
wrangler pages deploy ./dist --project-name my-site
# → ter-deploy ke https://my-site.pages.dev
Tiap deploy mengunggah folder dan mengembalikan URL *.pages.dev. (Di repo ini, perintah deploy
sungguhannya adalah wrangler pages deploy apps/labs/dist --project-name=pangaea-id.) Situs Anda kini
hidup di my-site.pages.dev — tapi itu belum domain Anda.
3 · Arahkan domain: www + apex CNAME → pages.dev
Di Cloudflare DNS (zona domain Anda), arahkan kedua host ke project Pages. www jadi alamat
kanonik; apex menyusul lewat CNAME flatteningⓘ Cloudflare (CNAME di apex ilegal dalam DNS biasa,
tapi Cloudflare meratakannya):
Type Name Content Proxy
CNAME www my-site.pages.dev Proxied ← orange cloud
CNAME @ my-site.pages.dev Proxied ← apex, di-flatten Cloudflare
Keduanya harus Proxied (orange cloud) — Redirect Rule di langkah berikut hanya berjalan saat
trafik melewati Cloudflare. Tambahkan www.[domain] sebagai custom domain di project Pages
supaya sertifikat TLS-nya terbit.
4 · Redirect apex → www (301), pertahankan query string
Tanpa langkah ini Anda punya dua alamat hidup — domain.com dan www.domain.com — yang
melayani konten sama. Itu duplikasi. Buat Single Redirect Rule di Cloudflare (Rules → Redirect
Rules):
When incoming requests match: hostname eq "domain.com" (apex)
Then: Dynamic redirect → concat("https://www.domain.com", http.request.uri.path)
Status 301 (permanent) · Preserve query string: ON
301 (bukan 302) agar mesin pencari mengalihkan otoritasnya ke www. Preserve query string
itu wajib: ia menjaga ?utm_source=… tetap utuh saat redirect, jadi atribusi lead Anda tak hilang
di tengah jalan (lihat cara form /book menangani submission —
atribusinya bergantung pada query string yang selamat). Detail lengkap apex→www ada di
Root → www: redirect 301.
Jadikan www satu-satunya rumah kanonik (jebakan .pages.dev)
Inilah yang sering terlewat. URL my-site.pages.dev tetap publik dan bisa di-crawl — jadi Google
bisa menemukan situs Anda di tiga alamat: www.domain.com, apex, dan *.pages.dev. Konten sama,
tiga URL = duplikasi SEO, dan otoritas terpecah.
Redirect tadi mengurus apex. Untuk pages.dev, pertahanannya adalah canonical yang konsisten:
<!-- di setiap halaman, apa pun host yang menyajikannya -->
<link rel="canonical" href="https://www.domain.com/halaman-ini" />
Situs ini melakukannya lewat satu konstanta — SITE_ORIGIN = 'https://www.pangaea.id' — yang
membangun setiap canonical. Jadi meski seseorang membuka versi pages.dev atau apex, tag canonical-nya
tetap menunjuk ke www, dan Google menyatukan semuanya ke sana. Untuk lebih ketat, Anda bisa
menonaktifkan alias pages.dev atau menambah noindex untuk host itu.
Pertanyaan umum
Apakah URL .pages.dev itu masalah buat SEO?
Bisa, kalau dibiarkan. my-site.pages.dev publik dan bisa di-crawl, jadi ia menggandakan situs Anda di host lain. Pertahanannya adalah canonical yang konsisten: setiap halaman menunjuk rel=canonical ke domain www Anda, apa pun host penyajinya, jadi mesin pencari menyatukan duplikatnya. Untuk lebih ketat, nonaktifkan alias pages.dev atau beri noindex untuk host itu.
Izin apa yang dibutuhkan token Wrangler?
Hanya Account · Cloudflare Pages · Edit, dengan Account Resources dibatasi ke akun yang memiliki domain. Itu cukup untuk membuat project dan men-deploy, dan tak lebih. Hindari token global; kalau yang di-scope ini bocor, ia hanya bisa menyentuh Pages di satu akun.
Bisakah apex jadi CNAME? Bukankah itu ilegal di DNS?
Benar, CNAME di apex ilegal dalam DNS standar — tapi Cloudflare mendukung CNAME flattening: Anda memasukkan CNAME di apex (@) dan Cloudflare menyajikannya sebagai record A/AAAA yang sudah diratakan. Jadi apex bisa menunjuk ke my-site.pages.dev. Karena di sini apex langsung di-301 ke www, ia hanya perlu di-proxy agar Redirect Rule-nya berjalan.
Tempatnya di mana
Ini adalah jalur deploy CLI di balik CI/CD: GitHub Actions → Cloudflare Pages (perintah Wrangler yang sama, dijalankan otomatis), bersandar pada DNS dari Arahkan domain ke Cloudflare dan redirect kanonik dari Root → www.
Sources