Buat Situs Hugo dan Deploy ke AWS S3 dengan AWS CLI

Mendeploy situs statis Hugo ke AWS S3 menggunakan AWS CLI menyediakan solusi yang kuat dan skalabel untuk menjalankan website Anda. Panduan ini mencakup seluruh proses deployment, mulai dari pengaturan awal hingga strategi otomatisasi dan manajemen cache yang lebih lanjut.

Penggunaan AWS CLI dalam deployment sedang menjadi pendekatan yang populer karena distribusi Hugo telah menghilangkan perintah deploy dari paket standar. Lihat tentang extended dan withdeploy dalam Cara Menginstal Ubuntu 24.04 & alat berguna jika melakukannya secara lokal dan masih ingin memanggil hugo deploy.

Prasyarat

Sebelum mendeploy situs Hugo Anda ke AWS S3, pastikan Anda memiliki:

• Situs Hugo yang siap dideploy (jika Anda membutuhkan bantuan membuatnya, lihat Panduan Cepat Hugo)
• Akun AWS dengan izin yang sesuai
• AWS CLI yang terinstal dan dikonfigurasi
• Pengetahuan dasar tentang operasi baris perintah

Membangun Situs Hugo Anda

Langkah pertama dalam mendeploy situs Hugo Anda adalah menghasilkan file statis. Gunakan Kartu Perintah Hugo sebagai referensi untuk perintah dan opsi yang tersedia.

Bangun situs Anda dengan flag optimisasi:

hugo --gc --minify

Flag --gc menghapus file cache yang tidak digunakan, sedangkan --minify mengompresi HTML, CSS, dan JavaScript Anda untuk kinerja optimal. Ini menghasilkan situs statis Anda di direktori public/, yang akan kami deploy ke S3.

Mengkonfigurasi AWS CLI

Jika Anda belum mengkonfigurasi AWS CLI, jalankan:

aws configure

Anda akan diminta untuk memasukkan:

• AWS Access Key ID: Kunci akses AWS Anda
• AWS Secret Access Key: Kunci akses rahasia Anda
• Default region: Wilayah AWS pilihan Anda (misalnya, us-east-1, ap-southeast-2)
• Default output format: json (direkomendasikan)

Untuk akses programatis, pastikan pengguna IAM Anda memiliki izin untuk:

• s3:PutObject
• s3:GetObject
• s3:DeleteObject
• s3:ListBucket
• cloudfront:CreateInvalidation (jika menggunakan CloudFront)

Membuat dan Mengkonfigurasi Bucket S3

Membuat Bucket

Buat bucket S3 Anda menggunakan AWS CLI:

aws s3 mb s3://your-bucket-name --region us-east-1

Penting: Pilih nama bucket yang unik secara global. Jika Anda berencana menggunakan bucket untuk hosting website, nama bucket harus cocok dengan nama domain Anda jika menggunakan domain kustom.

Mengkonfigurasi Bucket untuk Hosting Website Statik

Aktifkan hosting website statik:

aws s3 website s3://your-bucket-name \
  --index-document index.html \
  --error-document 404.html

Menetapkan Kebijakan Bucket

Untuk akses baca publik (jika tidak menggunakan CloudFront), buat kebijakan bucket:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Terapkan kebijakan tersebut:

aws s3api put-bucket-policy \
  --bucket your-bucket-name \
  --policy file://bucket-policy.json

Catatan Keamanan: Jika Anda menggunakan CloudFront (direkomendasikan), Anda dapat membatasi akses bucket S3 hanya ke CloudFront saja, menghilangkan kebutuhan akses baca publik.

Mendeploy ke S3 Menggunakan AWS CLI

Perintah deployment inti menggunakan aws s3 sync untuk mengunggah situs Anda:

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

Penjelasan Parameter Penting

• public/: Direktori output lokal Hugo Anda
• s3://your-bucket-name/: Tujuan bucket S3 Anda
• --delete: Menghapus file di S3 yang tidak ada secara lokal, memastikan bucket Anda mencerminkan build Anda
• --cache-control max-age=60: Menetapkan header cache (60 detik dalam contoh ini)

Opsi Sync Lanjutan

Untuk lebih banyak kontrol atas deployment Anda:

aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control "public, max-age=31536000, immutable" \
  --exclude "*.html" \
  --cache-control "public, max-age=60" \
  --include "*.html" \
  --exclude "*.js" \
  --cache-control "public, max-age=31536000, immutable" \
  --include "*.js"

Contoh ini menetapkan durasi cache berbeda untuk file HTML (60 detik) dibandingkan aset statis seperti JavaScript (1 tahun), yang merupakan strategi optimisasi yang umum.

Mengatur Distribusi CloudFront

Meskipun S3 dapat langsung menjalankan website statis, menggunakan Amazon CloudFront sebagai CDN memberikan kinerja, keamanan, dan distribusi global yang lebih baik.

Membuat Distribusi CloudFront

aws cloudfront create-distribution \
  --distribution-config file://cloudfront-config.json

Konfigurasi dasar CloudFront mencakup:

• Bucket S3 sebagai asal
• Perilaku cache default
• Sertifikat SSL/TLS (dari AWS Certificate Manager)
• Konfigurasi domain kustom (opsional)

Strategi Manajemen Cache

Ketika mendeploy melalui CloudFront, pertimbangkan strategi caching berikut:

1. Atur TTL Maksimum: Atur Maximum TTL CloudFront untuk mengontrol seberapa lama konten disimpan di lokasi edge
2. Versi Konten: Gunakan identifikasi versi dalam nama file (misalnya, style-v2.css) untuk memaksa pembaruan cache
3. Header Cache-Control: Tetapkan header yang sesuai selama sync S3 (seperti yang ditunjukkan di atas)
4. Invaliasi Pemilihan: Hapus hanya jalur yang berubah daripada seluruh cache

Invaliasi Cache

Setelah mendeploy pembaruan, invalidasi cache CloudFront untuk menyajikan konten yang segar:

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

Untuk invalidasi yang lebih spesifik:

aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/index.html" "/blog/*"

Pertimbangan Biaya: 1.000 jalur invalidasi pertama per bulan gratis. Setelah itu, setiap jalur biayanya $0,005. Gunakan invalidasi yang selektif untuk meminimalkan biaya.

Otomatisasi dengan CI/CD

Deploy manual bekerja untuk proyek kecil, tetapi otomatisasi penting untuk workflow produksi. Anda dapat mengintegrasikan proses deployment ini dengan Gitea Actions untuk mendeploy situs Hugo ke AWS S3 atau pipeline CI/CD serupa.

Skrip Deployment Dasar

Buat skrip deployment sederhana:

#!/bin/bash
set -e

# Membangun situs Hugo
echo "Membangun situs Hugo..."
hugo --gc --minify

# Mendeploy ke S3
echo "Mendeploy ke S3..."
aws s3 sync public/ s3://your-bucket-name/ \
  --delete \
  --cache-control max-age=60

# Menginvalidasi cache CloudFront
echo "Menginvalidasi cache CloudFront..."
aws cloudfront create-invalidation \
  --distribution-id YOUR_DISTRIBUTION_ID \
  --paths "/*"

echo "Deployment selesai!"

Buat file tersebut dapat dijalankan dan jalankan:

chmod +x deploy.sh
./deploy.sh

Contoh GitHub Actions

Untuk repositori GitHub, buat .github/workflows/deploy.yml:

name: Deploy to AWS S3

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
      
      - name: Build
        run: hugo --gc --minify
      
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      
      - name: Deploy to S3
        run: |
          aws s3 sync public/ s3://your-bucket-name/ \
            --delete \
            --cache-control max-age=60          
      
      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"          

Pemantauan dan Optimisasi

Aktifkan Logging

Konfigurasikan logging S3 dan CloudFront untuk melacak pola akses:

# Aktifkan logging akses S3
aws s3api put-bucket-logging \
  --bucket your-bucket-name \
  --bucket-logging-status file://logging.json

Atur Alarm CloudWatch

Pantau deployment Anda dengan CloudWatch:

aws cloudwatch put-metric-alarm \
  --alarm-name high-error-rate \
  --alarm-description "Alert on high error rate" \
  --metric-name 4xxError \
  --namespace AWS/CloudFront \
  --statistic Sum \
  --period 300 \
  --threshold 10 \
  --comparison-operator GreaterThanThreshold

Menyelesaikan Masalah Umum

File Tidak Terupdate

Jika perubahan tidak muncul:

1. Periksa status invalidasi cache CloudFront
2. Verifikasi apakah flag --delete digunakan dalam perintah sync
3. Bersihkan cache browser atau uji dalam mode incognito
4. Periksa izin bucket S3

Deployment Lambat

Optimalkan kinerja sync:

• Gunakan --exclude dan --include untuk melewatkan file yang tidak diperlukan
• Pertimbangkan menggunakan --size-only untuk perbandingan yang lebih cepat
• Gunakan unggah paralel dengan --cli-read-timeout dan --cli-write-timeout

Kesalahan Izin

Pastikan pengguna IAM Anda memiliki:

• Izin akses bucket S3
• Izin invalidasi CloudFront (jika berlaku)
• Kebijakan bucket yang benar dikonfigurasi

Ringkasan Praktik Terbaik

1. Selalu gunakan --delete untuk menjaga S3 sejalan dengan build lokal Anda
2. Tetapkan header cache yang sesuai berdasarkan jenis file
3. Gunakan CloudFront untuk deployment produksi
4. Otomatisasi deployment dengan pipeline CI/CD
5. Pantau biaya - hati-hati terhadap biaya invalidasi CloudFront
6. Versi deployment Anda - tag rilis untuk rollback yang mudah
7. Uji lokal terlebih dahulu - verifikasi build Hugo sebelum deployment

Sumber Daya Terkait

Untuk informasi lebih rinci tentang deployment Hugo, lihat panduan komprehensif tentang mendeploy situs web yang dihasilkan Hugo ke AWS S3, yang mencakup opsi dan konfigurasi deployment tambahan.

Ketika menulis konten Anda, ingatlah untuk menggunakan blok kode Markdown yang tepat untuk contoh kode, dan merujuk pada Kartu Perintah Markdown Komprehensif untuk panduan format.

Tautan Berguna

• Mendeploy situs web yang dihasilkan Hugo ke AWS S3
• Menggunakan Gitea Actions untuk mendeploy situs web Hugo ke AWS S3
• Kartu Perintah Hugo
• Kartu Perintah Markdown
• Menggunakan Blok Kode Markdown

Referensi Eksternal

• Dokumentasi Hosting Website Statik AWS S3
• Referensi Perintah S3 AWS CLI
• Strategi Kontrol Cache CloudFront Terbaik
• Dokumentasi Resmi Hugo
• Panduan Invalidation CloudFront