Cara Deploy Website Hugo ke Cloudflare Pages dengan Custom Domain

Deploy website Hugo ke Cloudflare Pages adalah salah satu solusi hosting terbaik di tahun 2026. Dengan CDN global gratis, SSL otomatis, dan edge caching, website Anda akan memiliki performa loading yang luar biasa cepat dari mana saja di dunia.

Mengapa Memilih Cloudflare Pages?

Keunggulan Cloudflare Pages:

1. CDN Global Gratis: 300+ data centers di seluruh dunia
2. SSL/HTTPS Otomatis: Tanpa setup manual, renew otomatis
3. Edge Caching: Konten disimpan di edge terdekat dengan pengunjung
4. Continuous Deployment: Auto-deploy saat push ke GitHub/GitLab
5. Serverless Functions: Dukungan Cloudflare Workers
6. Analytics Real-time: Monitoring traffic tanpa setup

Persiapan Deployment

1. Setup Repository GitHub

Pastikan project Hugo Anda sudah di-push ke GitHub:

# Inisialisasi repository
git init

# Tambahkan semua file
git add .

# Commit pertama
git commit -m "Initial Hugo site"

# Tambahkan remote repository
git remote add origin https://github.com/username/nama-repository.git

# Push ke GitHub
git push -u origin main

Struktur repository yang benar:

nama-repository/
├── archetypes/
├── assets/
├── content/
├── data/
├── layouts/
├── static/
├── themes/
├── config.toml (atau hugo.toml)
├── package.json
└── .gitignore

2. File .gitignore untuk Hugo

Pastikan file .gitignore sudah benar:

# Hugo
public/
resources/_gen/
.hugo_build.lock

# Node
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# OS
.DS_Store
Thumbs.db

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

3. Konfigurasi Hugo untuk Production

File hugo.toml:

baseURL = 'https://www.example.com'
languageCode = 'id'
title = 'Website Hugo'
theme = 'namatheme'

# Build optimization
[imaging]
  quality = 75
  resampleFilter = 'lanczos'

[minify]
  disableCSS = false
  disableHTML = false
  disableJS = false
  disableJSON = false

Deploy ke Cloudflare Pages

Langkah 1: Login ke Cloudflare Dashboard

1. Buka https://dash.cloudflare.com
2. Login dengan akun Cloudflare Anda
3. Pilih menu Pages di sidebar

Langkah 2: Create Project Baru

1. Klik Create a project
2. Pilih Connect to Git
3. Authorize Cloudflare untuk mengakses GitHub/GitLab Anda
4. Pilih repository yang berisi project Hugo Anda

Langkah 3: Setup Build Configuration

Isi konfigurasi build:

Project name: my-hugo-website
Production branch: main

Build settings:
  Build command: hugo --minify
  Build output: public
  Root directory: /

Environment variables (tambahkan jika perlu):

HUGO_VERSION: 0.123.0
NODE_VERSION: 20
HUGO_ENV: production

Langkah 4: Deploy

Klik Save and Deploy. Cloudflare akan otomatis:

1. Clone repository
2. Install dependensi (jika ada package.json)
3. Jalankan build command
4. Deploy ke CDN global

Setup Custom Domain

Langkah 1: Tambahkan Custom Domain

1. Di dashboard Pages, pilih project Anda
2. Pilih tab Custom Domains
3. Klik Set up a custom domain
4. Masukkan domain Anda: www.example.com

Langkah 2: Update DNS Record

Cloudflare akan memberikan instruksi DNS. Tambahkan CNAME record di DNS provider Anda:

Type: CNAME
Name: www
Target: my-hugo-website.pages.dev
TTL: Auto
Proxy status: Proxied (orange cloud)

Untuk root domain (apex/naked domain):

Type: A
Name: @
Target: 192.0.2.1 (contoh, ikuti instruksi Cloudflare)
TTL: Auto

Langkah 3: Tunggu Propagation

DNS propagation biasanya membutuhkan waktu:

• Cepat: 5-15 menit
• Normal: 1-24 jam
• Maksimal: 48 jam

Anda bisa cek status dengan:

# Cek DNS propagation
dig www.example.com
nslookup www.example.com

Konfigurasi Lanjutan

1. Setup Redirect WWW ke Non-WWW (atau sebaliknya)

File _redirects di folder static/:

# Redirect www ke non-www
https://www.example.com/* https://example.com/:splat 301!

# Redirect HTTP ke HTTPS
http://example.com/* https://example.com/:splat 301!

Atau dengan Page Rules di Cloudflare:

1. Buka Rules > Page Rules
2. Create Page Rule:
   • URL: www.example.com/*
   • Settings: Forwarding URL (301)
   • Destination: https://example.com/$1

2. Setup Header Security

File _headers di folder static/:

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
  X-XSS-Protection: 1; mode=block
  Permissions-Policy: geolocation=(), microphone=(), camera=()

3. Caching Strategy

Di Cloudflare dashboard:

1. Pilih Caching > Configuration
2. Set Browser Cache TTL: 4 hours
3. Set Crawler Cache TTL: 2 hours
4. Enable Always Online

4. Setup Cloudflare Workers (Opsional)

Untuk fitur dinamis, buat file functions/api/hello.js:

export async function onRequest(context) {
  const { request } = context;
  
  return new Response(JSON.stringify({
    message: 'Hello from Hugo + Cloudflare Workers!',
    timestamp: new Date().toISOString()
  }), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    }
  });
}

Optimasi Build Hugo untuk Cloudflare

Build Configuration yang Optimal

File wrangler.toml (jika menggunakan Wrangler CLI):

name = "my-hugo-site"
compatibility_date = "2026-02-03"

[build]
command = "npm run build"

[site]
bucket = "./public"

[build.environment]
HUGO_VERSION = "0.123.0"
NODE_VERSION = "20"
HUGO_ENV = "production"

Package.json scripts:

{
  "scripts": {
    "build": "hugo --gc --minify",
    "dev": "hugo server -D",
    "clean": "rm -rf public/"
  }
}

Build Hooks untuk CI/CD

Cloudflare Pages mendukung build hooks untuk trigger deploy otomatis:

1. Di Settings > Builds & deployments
2. Scroll ke Build hooks
3. Create build hook dengan nama (misal: “content-update”)
4. Gunakan URL webhook untuk trigger deploy dari external services

Monitoring dan Analytics

1. Cloudflare Analytics

Dashboard Pages menyediakan:

• Total requests: Jumlah request per hari/minggu/bulan
• Bandwidth: Total data yang ditransfer
• Build time: Durasi build setiap deploy
• Build history: Log semua deployment

2. Real User Monitoring (RUM)

Enable Web Analytics di Speed > Optimization:

1. Enable Browser Insights
2. Tambahkan beacon script jika diperlukan

3. Health Checks

Setup health check di Notifications:

URL: https://www.example.com/health
Method: GET
Response code: 200
Interval: 5 minutes

Troubleshooting Deployment

Build Failed: Hugo Version

Error: hugo: command not found

Solusi: Set environment variable HUGO_VERSION di build settings:

HUGO_VERSION: 0.123.0

Build Failed: PostCSS/Tailwind

Error: postcss: executable file not found

Solusi: Install dependencies di build:

{
  "scripts": {
    "build": "npm install && hugo --minify"
  }
}

Atau gunakan build command:

npm install && hugo --minify

Custom Domain Not Working

Ceklist:

1. ✅ DNS record sudah benar (CNAME atau A record)
2. ✅ DNS propagation selesai (cek dengan dig)
3. ✅ SSL certificate sudah issued (bisa lihat di SSL/TLS > Edge Certificates)
4. ✅ No conflicting DNS records (hapus record lama jika ada)

Slow Build Time

Optimasi:

1. Gunakan hugo --gc --minify untuk garbage collection
2. Cache node_modules dengan CACHE_VERSION variable
3. Optimasi images sebelum commit (gunakan build script)

Best Practices Deployment

1. Pre-deployment Checklist

Sebelum push ke production:

• Semua link berfungsi (gunakan hugo server untuk cek)
• Images sudah di-optimasi (WebP format)
• Meta tags SEO sudah lengkap
• robots.txt sudah benar
• sitemap.xml ter-generate
• 404 page sudah ada

2. Branching Strategy

main (production)
  ↓
develop (staging)
  ↓
feature/* (development)

Setup preview deployments:

1. Di Settings > Builds & deployments
2. Enable Preview deployments
3. Set branch preview pattern: preview/*

3. Rollback Strategy

Cloudflare Pages menyimpan history deployment:

1. Buka Deployments
2. Pilih deployment sebelumnya
3. Klik Rollback to this deployment

Atau dengan Git:

# Revert commit terakhir
git revert HEAD

# Push untuk trigger rollback deploy
git push origin main

Keamanan dan Performance

1. Security Headers

Pastikan _headers file mencakup:

/*
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  Referrer-Policy: no-referrer-when-downgrade

2. Performance Optimization

Di Cloudflare dashboard:

1. Speed > Optimization:

   • Enable Auto Minify (HTML, CSS, JS)
   • Enable Brotli compression
   • Enable Early Hints (HTTP 103)

2. Caching > Configuration:

   • Caching Level: Standard
   • Browser Cache TTL: 4 hours
   • Edge Cache TTL: 2 hours

3. Network:

   • HTTP/3 (with QUIC): Enabled
   • 0-RTT Connection Resumption: Enabled

Integrasi dengan Layanan Lain

1. Form Handling (Formspree/Formspark)

Tambahkan form tanpa backend:

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="email" name="email" placeholder="Email Anda">
  <textarea name="message" placeholder="Pesan"></textarea>
  <button type="submit">Kirim</button>
</form>

2. Search dengan Algolia/Typesense

Integrasi search static site:

// Script untuk indexing content ke Algolia
const algoliasearch = require('algoliasearch');
const client = algoliasearch('APP_ID', 'API_KEY');
const index = client.initIndex('hugo_site');

3. Comments dengan Disqus/Utterances

Tambahkan komentar di post layout:

<script src="https://utteranc.es/client.js"
        repo="username/repo"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Kesimpulan

Deploy website Hugo ke Cloudflare Pages memberikan kombinasi sempurna antara:

• Kecepatan: CDN global dengan edge caching
• Keamanan: SSL otomatis dan security headers
• Kemudahan: Continuous deployment dari Git
• Gratis: Generous free tier dengan bandwidth unlimited

Dengan setup yang benar, website Hugo Anda akan memiliki:

• Loading time <1 detik dari mana saja di dunia
• Skor 100/100 di PageSpeed Insights
• SEO ranking yang lebih baik karena kecepatan
• Maintenance yang minimal (set it and forget it)

Mulai deploy website Hugo Anda sekarang dan rasakan performa CDN Cloudflare yang luar biasa!

Artikel Terkait

• Panduan Lengkap Membuat Website dengan Hugo dan Tailwind CSS 2026
• Tutorial Konfigurasi Tailwind CSS di Hugo dengan PostCSS
• Optimasi SEO Hugo: Schema Markup dan Open Graph
• Cara Setup Image Optimization di Hugo dengan WebP
• Best Practices Structuring Content Hugo untuk SEO Maksimal