Deploy Sitemas ke Cloudflare Pages (Gratis)

Cloudflare Pages adalah platform static hosting dari Cloudflare dengan keunggulan utama: unlimited bandwidth gratis dan edge network terbesar di dunia. Artikel ini akan memandu Anda deploy Sitemas ke Cloudflare Pages.

Mengapa Cloudflare Pages?

Persiapan

Sebelum mulai:

• ✅ Akun Cloudflare (gratis)
• ✅ Repository di GitHub atau GitLab
• ✅ Proyek Sitemas yang sudah bisa di-build

Deploy via Dashboard

Deploy via Wrangler CLI

Konfigurasi wrangler.toml (Opsional)

Untuk project dengan Workers atau advanced config:

name = "sitemas-blog"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"

Konfigurasi _headers

Buat file public/_headers untuk custom headers:

# Cache static assets
/fonts/*
  Cache-Control: public, max-age=31536000, immutable

/_astro/*
  Cache-Control: public, max-age=31536000, immutable

# Security headers
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()

Konfigurasi _redirects

Buat file public/_redirects untuk redirects:

# Redirect old URLs
/old-page /new-page 301

# Force HTTPS
http://yourdomain.com/* https://yourdomain.com/:splat 301

# www to non-www
https://www.yourdomain.com/* https://yourdomain.com/:splat 301

Custom Domain

# CNAME record
Type: CNAME
Name: @ atau www
Target: projectname.pages.dev

Environment Variables

Production vs Preview

Menambahkan Variables

1. Settings → Environment variables
2. Pilih Production atau Preview
3. Add variable

Preview Deployments

Setiap push ke branch non-production mendapat preview URL:

https://[commit-hash].projectname.pages.dev

Untuk Pull Requests:

https://[pr-number].projectname.pages.dev

Cloudflare Web Analytics

Gratis dan privacy-friendly:

1. Buka Web Analytics di Cloudflare dashboard
2. Add site
3. Copy snippet ke BaseLayout.astro:

<!-- Cloudflare Web Analytics -->
<script 
    defer 
    src='https://static.cloudflareinsights.com/beacon.min.js' 
    data-cf-beacon='{"token": "YOUR_TOKEN"}'
></script>

Integrasi dengan Cloudflare Ecosystem

Cloudflare R2 (Storage)

Untuk media files besar, gunakan R2:

// Di Astro, akses via binding
const object = await env.MY_BUCKET.get('image.jpg');

Cloudflare KV (Key-Value)

Untuk data yang perlu diakses di edge:

const value = await env.MY_KV.get('key');

Cloudflare D1 (Database)

SQLite at the edge:

const { results } = await env.DB.prepare(
    'SELECT * FROM articles'
).all();

Troubleshooting

Build Gagal

Deployment Pending

Build queue bisa panjang di jam sibuk. Tunggu atau upgrade ke Pro.

404 pada Routes

Pastikan:

• dist folder berisi semua halaman
• Dynamic routes punya getStaticPaths()

SSL Issues

Jika menggunakan external DNS:

• Pastikan proxy status Proxied (orange cloud)
• Tunggu SSL provisioning (bisa sampai 24 jam)

Perbandingan Platform

Best Practices

1. Gunakan Cloudflare DNS untuk fastest propagation
2. Enable Web Analytics untuk tracking
3. Set proper cache headers untuk static assets
4. Use R2 untuk media hosting jika traffic tinggi
5. Monitor build minutes (500/month free)

Langkah Selanjutnya

Pelajari cara setup custom domain:

Kesimpulan

Cloudflare Pages adalah pilihan terbaik jika:

• Traffic tinggi (unlimited bandwidth)
• Performa prioritas (edge network terbesar)
• Sudah menggunakan Cloudflare untuk DNS/CDN
• Butuh integrasi dengan Workers, KV, R2, D1

Deploy Sitemas ke Cloudflare Pages hanya butuh beberapa menit, dan Anda mendapat performa enterprise-grade secara gratis.