Cara Deploy Hugo ke AWS S3 + CloudFront dengan GitHub Actions dan Domain Kustom

Panduan lengkap dan runut untuk men-deploy situs Hugo secara otomatis ke AWS S3 + CloudFront menggunakan GitHub Actions, lengkap sampai konfigurasi domain kustom ber-HTTPS. Semua langkah di sini sudah teruji di dunia nyata — termasuk bagian troubleshooting dari semua error yang biasanya muncul.

Kalau kamu membangun situs dengan Hugo , kamu butuh tempat hosting yang cepat, murah, dan aman. Kombinasi S3 (penyimpanan) + CloudFront (CDN global) adalah salah satu yang terbaik: biaya rendah, performa tinggi, dan otomatis HTTPS. Di artikel ini kamu akan belajar:

• Membuat pipeline GitHub Actions yang build Hugo dan deploy ke S3 setiap kali push.
• Menyiapkan bucket S3 dengan benar (termasuk soal region dan ACL).
• Membuat distribusi CloudFront dengan OAC + sertifikat ACM (HTTPS).
• Mengarahkan domain kustom ke CloudFront lewat DNS.
• Memperbaiki pretty URL Hugo agar /about/ tidak AccessDenied.
• Troubleshooting 8 error nyata yang sering bikin pusing.

Mari mulai.

Mengapa S3 + CloudFront?

Untuk situs statis seperti Hugo, kombinasi S3 + CloudFront sulit ditandingi:

• Murah & bayar sesuai pemakaian — tidak ada server yang nyala 24/7 yang harus dibayar. Situs kecil bahkan bisa nyaris gratis.
• Cepat secara global (CDN) — CloudFront menyajikan konten dari edge location terdekat dengan pengunjung, jadi TTFB rendah di mana pun mereka berada.
• HTTPS otomatis & gratis — sertifikat dari AWS Certificate Manager (ACM) gratis dan diperpanjang otomatis.
• Skalabilitas & ketahanan — S3 punya durability 99,999999999% (11 nine) dan otomatis menahan lonjakan traffic tanpa kamu utak-atik kapasitas.
• Minim perawatan — tidak ada OS, web server, atau patch keamanan yang harus diurus. Tidak ada yang bisa “down” karena salah konfigurasi Nginx.

Singkatnya: untuk situs statis, kamu membayar penyimpanan + bandwidth saja, bukan menyewa mesin yang harus dirawat.

Prasyarat

Sebelum mulai, pastikan kamu punya:

• Situs Hugo yang sudah ada di repository GitHub.
• Akun AWS (S3, CloudFront, ACM, IAM).
• Domain yang kamu kendalikan (bisa atur DNS-nya).
• Versi Hugo lokal kamu — cek dengan hugo version (kita akan pin versi ini di CI).

Langkah 1: Workflow GitHub Actions (Build & Deploy)

Buat file .github/workflows/deploy.yml di repository kamu:

 1name: Deploy Hugo to S3 + CloudFront
 2on:
 3  push:
 4    branches:
 5      - main
 6jobs:
 7  deploy:
 8    runs-on: ubuntu-latest
 9    steps:
10      - name: Checkout (with submodules)
11        uses: actions/checkout@v2
12        with:
13          submodules: recursive
14          token: ${{ secrets.SUBMODULE_ACCESS_TOKEN }}   # hanya jika tema kamu submodule privat
15
16      - name: Setup Hugo
17        uses: peaceiris/actions-hugo@v2
18        with:
19          hugo-version: '0.145.0'   # pin ke versi LOKAL kamu (jalankan: hugo version)
20          extended: true
21
22      - name: Build
23        run: hugo --gc --minify
24
25      - name: Sync to S3
26        uses: jakejarvis/s3-sync-action@master
27        with:
28          args: --follow-symlinks --delete
29        env:
30          SOURCE_DIR: 'public'
31          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
32          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
33          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
34          AWS_REGION: ${{ secrets.AWS_S3_REGION }}   # WAJIB sama dengan region bucket
35
36      - name: Invalidate CloudFront
37        uses: chetan/invalidate-cloudfront-action@master
38        env:
39          DISTRIBUTION: ${{ secrets.AWS_CF_DISTRIBUTION_ID }}   # ID E..., bukan domain d....cloudfront.net
40          PATHS: '/*'
41          AWS_REGION: ${{ secrets.AWS_S3_REGION }}
42          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
43          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Lalu tambahkan GitHub Secrets (Settings → Secrets and variables → Actions):

• AWS_S3_BUCKET — nama bucket (mis. www.your-domain.com)
• AWS_S3_REGION — region bucket (mis. ap-southeast-1)
• AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY — kredensial IAM
• AWS_CF_DISTRIBUTION_ID — Distribution ID (E...)
• SUBMODULE_ACCESS_TOKEN — hanya jika tema kamu submodule privat

Langkah 2: Membuat Bucket S3

1. Buka AWS Console → S3 → Create bucket.
2. Beri nama bucket (mis. www.your-domain.com) dan pilih Region — ingat baik-baik region ini, harus sama dengan AWS_S3_REGION di workflow.
3. Untuk akses, ada dua pendekatan:

Pilihan A — Bucket privat + CloudFront OAC (direkomendasikan). Bucket tetap tertutup, hanya CloudFront yang boleh baca. Lebih aman. Bucket policy diisi nanti setelah CloudFront dibuat (lihat Langkah 3).

Pilihan B — Bucket public-read via bucket policy. Lebih sederhana tapi bucket terbuka ke publik. Matikan “Block all public access”, lalu pasang policy:

 1{
 2  "Version": "2012-10-17",
 3  "Statement": [
 4    {
 5      "Sid": "PublicReadGetObject",
 6      "Effect": "Allow",
 7      "Principal": "*",
 8      "Action": "s3:GetObject",
 9      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
10    }
11  ]
12}

Langkah 3: Membuat Distribusi CloudFront

1. Minta sertifikat TLS di ACM — region us-east-1 (N. Virginia). CloudFront hanya menerima sertifikat dari region ini, apa pun region bucket kamu.

   • ACM → Request a public certificate → domain www.your-domain.com → validasi DNS → tambahkan record CNAME validasi → tunggu status Issued.

2. CloudFront → Create distribution.

   • Origin domain: pilih bucket S3 kamu.
   • Origin access: pilih Origin access control (OAC) → buat OAC baru. CloudFront akan menampilkan bucket policy yang harus kamu tempel ke bucket:
   json

   Salin

    1{
    2  "Version": "2012-10-17",
    3  "Statement": [
    4    {
    5      "Sid": "AllowCloudFrontServicePrincipal",
    6      "Effect": "Allow",
    7      "Principal": { "Service": "cloudfront.amazonaws.com" },
    8      "Action": "s3:GetObject",
    9      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*",
   10      "Condition": {
   11        "ArnLike": {
   12          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
   13        }
   14      }
   15    }
   16  ]
   17}

   • Viewer protocol policy: Redirect HTTP to HTTPS.
   • Alternate domain name (CNAME): www.your-domain.com.
   • Custom SSL certificate: pilih sertifikat ACM dari langkah 1.
   • Default root object: index.html.

3. Create → tunggu status Deployed. Catat Distribution domain name (dXXXX.cloudfront.net) dan Distribution ID (E...).

Langkah 4: Arahkan Domain Kustom (DNS)

Di penyedia DNS kamu, tambahkan record CNAME:

Verifikasi setelah beberapa menit:

1# DNS sudah mengarah ke CloudFront?
2dig +short www.your-domain.com          # -> dXXXXXXXX.cloudfront.net.
3
4# Sudah HTTPS, homepage + halaman dalam?
5curl -I https://www.your-domain.com/
6curl -I https://www.your-domain.com/about/

Langkah 5: Perbaiki Pretty URL (CloudFront Function)

Hugo memakai pretty URL seperti /about/, yang sebenarnya adalah file /about/index.html. Dengan OAC + origin S3 REST, CloudFront meminta objek about ke S3 — objek itu tidak ada, dan karena bucket privat S3 membalas AccessDenied (bukan melayani index.html). Akibatnya semua halaman selain root error.

Solusinya: CloudFront Function yang menambahkan index.html.

1. CloudFront → Functions → Create function (mis. rewrite-index).

2. Isi kode:

   javascript

   Salin

    1function handler(event) {
    2    var request = event.request;
    3    var uri = request.uri;
    4
    5    if (uri.endsWith('/')) {
    6        request.uri += 'index.html';            // /about/  -> /about/index.html
    7    } else if (!uri.includes('.')) {
    8        request.uri += '/index.html';           // /about   -> /about/index.html
    9    }
   10
   11    return request;
   12}

3. Publish.

4. Distribusi → tab Behaviors → Default (*) → Edit → Function associations → Viewer request = function tadi → Save.

5. Buat Invalidation /* agar response error lama tidak ter-cache.

Langkah 6: Deploy & Verifikasi

1. Commit & push file workflow ke branch main.
2. Buka tab Actions di GitHub → pastikan job hijau (build → sync → invalidate).
3. Cek hasilnya:
   • https://www.your-domain.com/ → homepage tampil.
   • https://www.your-domain.com/about/ → halaman dalam tampil (berkat CloudFront Function).

Selesai — setiap push ke main kini otomatis men-deploy situs kamu. 🎉

Estimasi Biaya & Perbandingan dengan Hosting/VPS

Mari hitung biaya untuk blog menengah: ±5 GB penyimpanan, ±100.000 kunjungan/bulan, ±50 GB transfer/bulan. Harga mengacu region ap-southeast-1 (Singapore), kurs ±Rp16.000/USD (perkiraan pertengahan 2026).

Rincian biaya S3 + CloudFront (harga normal / list price)

Dengan CloudFront Free Tier (selamanya gratis)

CloudFront punya always-free tier: 1 TB transfer keluar + 10 juta request per bulan, gratis selamanya. Karena blog menengah kita (50 GB + 1,2 juta request) masih jauh di bawah batas itu, biaya CloudFront menjadi $0. Yang tersisa hanya storage S3:

Artinya blog kecil–menengah sering nyaris gratis di S3 + CloudFront. 🎉

Perbandingan dengan Shared Hosting & VPS

Kesimpulan biaya: untuk situs statis dengan traffic rendah–menengah, S3 + CloudFront biasanya termurah sekaligus tercepat (sering gratis di free tier), tanpa repot maintenance server. Shared hosting menang di kemudahan awal; VPS baru masuk akal kalau kamu butuh backend dinamis (database, server-side rendering).

Troubleshooting (error nyata + solusinya)

(Opsional) Lingkungan Staging

Kalau ingin lingkungan pratinjau terpisah (mis. staging.your-domain.com), buat bucket + distribusi CloudFront sendiri, dengan pipeline yang trigger dari branch staging. Tambahkan juga noindex + robots.txt disallow agar tidak terindeks Google, dan pastikan terisolasi penuh dari produksi (bucket/distribusi berbeda). Ini persis yang kami lakukan untuk staging Santekno.

Kesimpulan

Kamu sudah punya pipeline deploy Hugo end-to-end: GitHub Actions → S3 → CloudFront → domain kustom HTTPS, plus CloudFront Function untuk pretty URL dan daftar solusi error yang umum. Pendekatan ini cepat, murah, dan aman untuk situs statis apa pun.

Mau menyembunyikan URL bawaan CloudFront dan memaksa hanya domain kustom yang dipakai? Lanjut baca: Cara Menyembunyikan URL CloudFront dan Menggunakan Domain Kustom dengan Aman .