Arsitektur: Website Sangat Hemat Biaya dengan Hugo + S3 + CloudFront + Cloudflare
4 min read Architecture

Arsitektur: Website Sangat Hemat Biaya dengan Hugo + S3 + CloudFront + Cloudflare

Banyak perusahaan masih beranggapan bahwa website company profile, blog, atau bahkan news portal harus selalu dibangun di atas stack yang berat: server aplikasi, database, autoscaling, hingga tim ops yang siaga 24/7. Padahal, untuk mayoritas use case konten, pendekatan ini overkill dan mahal.

Artikel ini membahas sebuah arsitektur statis modern yang:

  • Sangat murah
  • Skalabel secara global
  • Hampir tanpa maintenance
  • Aman untuk SEO, AdSense, dan trafik besar

Stack utama yang digunakan: Hugo → S3 → CloudFront → Cloudflare

Pendekatan ini sudah terbukti stabil untuk blog teknis, company profile, hingga portal berita berbasis konten.

Gambaran Besar Arsitektur

[ Admin / Editor ]
        |
        | create / edit content
        v
+---------------------+
|   Admin Panel / CMS |
| (UI untuk editor)   |
+---------------------+
        |
        | save / publish
        | generate markdown + HTML
        v
+---------------------+
|   Hugo Service      |
| (Build Layer)       |
+---------------------+
        |
        | hugo build
        v
+------------------+
|       S3         |
| Static Hosting   |
+------------------+
        |
        | origin
        v
+------------------+
|   CloudFront     |
| Global CDN (AWS) |
+------------------+
        |
        | cached content
        v
+------------------+
|   Cloudflare     |
| DNS + CDN + WAF  |
+------------------+
        |
        v
[ End Users / Visitors ]

Diagram di atas menunjukkan bahwa server hanya ada di layer admin & build, bukan di runtime user request.

Peran Setiap Komponen

1. Admin Panel / Editor Layer

Layer ini adalah satu-satunya komponen yang bersifat dinamis dan hanya digunakan oleh internal (admin/editor).

Fungsi utama:

  • UI untuk menulis & mengedit artikel
  • Menyimpan draft
  • Mengelola metadata (title, slug, tag, author, publish date)
  • Mengizinkan HTML bebas di dalam konten

Saat editor menekan Save / Publish:

  • Konten dikonversi menjadi Markdown + embedded HTML
  • Admin panel tidak menyajikan konten ke publik
  • Admin panel hanya bertugas mengirimkan task ke Hugo Service

Dengan pendekatan ini:

  • Admin panel tidak perlu scalable
  • Tidak perlu high availability
  • Tidak menjadi bottleneck trafik

2. Hugo Service – Build & Generation Layer

Hugo di sini tidak berjalan sebagai tool manual, tetapi sebagai service khusus untuk build.

Perannya:

  • Menerima task generate dari admin panel
  • Menambahkan atau memperbarui file Markdown
  • Menjalankan proses hugo build
  • Menghasilkan HTML statis terbaru

Karakteristik penting:

  • Tidak diakses publik
  • Bisa berjalan sebagai container
  • Bisa dipicu via API, message queue, atau webhook

Semua kompleksitas dipindahkan ke tahap build, bukan runtime.

Hugo berperan sebagai mesin build:

  • Admin atau editor menulis konten dalam Markdown
  • Diperbolehkan menyisipkan HTML bebas untuk kebutuhan khusus (diagram, embed, callout, schema)
  • Semua logic diproses saat build, bukan saat user request

Output Hugo hanyalah:

  • HTML
  • CSS
  • JavaScript

Tidak ada runtime dependency.

3. Amazon S3 – Static Object Storage

S3 digunakan sebagai:

  • Penyimpanan hasil build Hugo
  • Origin untuk CloudFront

Keunggulan utama:

  • Biaya sangat rendah
  • Tidak ada server
  • Sangat stabil

S3 tidak tahu apa itu artikel atau halaman — ia hanya menyajikan file.

4. CloudFront – Global CDN AWS

CloudFront berfungsi sebagai:

  • CDN global
  • TLS termination
  • Cache HTML statis

Manfaat utama:

  • Latency rendah
  • Request ke S3 sangat minim
  • Skalabilitas otomatis tanpa konfigurasi rumit

5. Cloudflare – Edge Layer & Proteksi

Cloudflare ditempatkan di depan CloudFront, bukan menggantikannya.

Fungsinya:

  • DNS
  • CDN tambahan (edge caching)
  • WAF & bot protection
  • DDoS protection

Hasilnya:

  • Trafik ke CloudFront semakin sedikit
  • Biaya AWS makin ditekan
  • Keamanan meningkat

Alur Kerja Konten

  1. Admin menulis artikel dalam Markdown
  2. HTML bebas dapat disisipkan jika diperlukan
  3. Hugo melakukan build statis
  4. Hasil build di-upload ke S3
  5. Cache CloudFront & Cloudflare di-refresh
  6. User mengakses konten dari edge terdekat

Tidak ada request yang memicu proses server-side.

Kenapa Arsitektur Ini Sangat Murah?

Apa yang Tidak Ada

  • Server aplikasi
  • Database
  • Autoscaling group
  • Runtime CPU & memory
  • Patch OS
  • Cold start

Apa yang Dibayar

  • Storage (S3)
  • Bandwidth (CDN)
  • Request statis

Untuk kebanyakan company profile & blog:

Biaya bulanan bisa turun hingga puluhan kali lipat dibanding arsitektur tradisional.

Cocok untuk Use Case Apa Saja?

Sangat Cocok

  • Company profile
  • Blog engineering
  • Blog marketing
  • Documentation site
  • News portal berbasis artikel
  • Multi-subdomain content

Kurang Cocok

  • Aplikasi dengan login kompleks
  • Transaksi real-time
  • Dashboard interaktif berbasis data dinamis

Namun bahkan pada kasus tersebut, konten statis tetap bisa dipisahkan menggunakan arsitektur ini.

SEO, AdSense, dan Keamanan

Karena output berupa HTML murni:

  • SEO sangat optimal
  • Crawl Google sangat cepat
  • Aman untuk AdSense
  • Mudah menambahkan JSON-LD

Ditambah Cloudflare:

  • Rate limit
  • Bot protection
  • HTTPS otomatis

Kesimpulan

Arsitektur Hugo + S3 + CloudFront + Cloudflare adalah contoh nyata bahwa:

Website perusahaan tidak harus mahal untuk bisa cepat, aman, dan skalabel.

Dengan memindahkan seluruh kompleksitas ke build time, perusahaan bisa:

  • Menghemat biaya
  • Mengurangi beban operasional
  • Fokus pada konten, bukan server

Untuk banyak use case konten, ini bukan kompromi — ini solusi ideal.