💡 ULASAN & REFERENSI • DIPERBARUI: 28 October 2026 • REDAKSI AZWINN

Tutorial Hugo SSG: Instalasi, Konfigurasi, dan Deploy Website

Hugo adalah generator situs statis (Static Site Generator/SSG) berbasis Go (Golang) yang menawarkan kecepatan kompilasi luar biasa tinggi dan fleksibilitas manajemen konten menggunakan format Markdown. Panduan teknis ini menguraikan langkah demi langkah instalasi, pembuatan struktur direktori, penambahan tema, konfigurasi parameter, hingga proses publikasi situs secara mandiri ke layanan hosting.

Persiapan Awal dan Instalasi Hugo

Sebelum menjalankan Hugo, pastikan sistem operasi Anda (Windows, macOS, atau Linux) telah terpasang aplikasi Git dan Go (disarankan versi 1.18 atau yang lebih baru). Hugo didistribusikan dalam dua varian utama: versi standar dan versi extended (sangat direkomendasikan karena mendukung kompilasi aset SCSS/Sass dan pipes tingkat lanjut).

Tabel Perintah Instalasi Berdasarkan Sistem Operasi

Sistem Operasi Alat / Manajer Paket Perintah Terminal
macOS Homebrew brew install hugo
Windows Chocolatey choco install hugo-extended
Linux (Debian/Ubuntu) APT sudo apt install hugo

Langkah 1: Membuat Situs Baru

Buka terminal atau command prompt pada komputer Anda, lalu jalankan perintah berikut untuk menginisialisasi kerangka proyek situs baru:

hugo new site nama-situs
cd nama-situs

Perintah tersebut akan menghasilkan struktur direktori standar Hugo yang terdiri dari folder content, layouts, themes, static, dan file konfigurasi utama hugo.toml.

Langkah 2: Menambahkan Tema

Hugo memerlukan tema tampilan agar situs langsung dapat diakses dengan antarmuka yang rapi. Cara paling aman adalah menggunakan sistem Git Submodule agar tema tetap mudah diperbarui.

  1. Inisialisasi repositori Git lokal: 
    git init
  2. Tambahkan tema pilihan (contoh menggunakan tema PaperMod) ke dalam folder themes: 
    git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/papermod
  3. Buka file hugo.toml dan aktifkan tema tersebut dengan menambahkan baris konfigurasi: 
    theme = 'papermod'

Langkah 3: Membuat Konten Pertama

Konten pada Hugo ditulis dalam format Markdown (.md). Untuk membuat artikel baru, gunakan perintah generator bawaan:

hugo new posts/artikel-pertama.md

Buka file yang baru saja dibuat di dalam direktori content/posts/artikel-pertama.md menggunakan teks editor (seperti VS Code), lalu ubah parameter draft: true menjadi draft: false dan tambahkan teks di bawah bagian front matter:

---
title: "Artikel Pertama Saya"
date: 2026-03-30T10:00:00+07:00
draft: false
---

Ini adalah paragraf konten pertama yang ditulis menggunakan format Markdown di Hugo SSG.

Langkah 4: Menjalankan Server Lokal

Untuk melihat pratinjau situs secara langsung di browser, jalankan perintah server pengembangan:

hugo server -D

Flag -D berfungsi agar draf artikel (drafts) ikut dirender. Buka browser dan akses alamat http://localhost:1313/ untuk melihat hasil perubahan secara real-time.

Langkah 5: Membangun dan Deploy Situs

Ketika situs sudah siap dipublikasikan ke internet, jalankan perintah build untuk menghasilkan file statis murni (HTML, CSS, JS) di dalam folder public/:

hugo --minify

Folder public/ tersebut berisi seluruh aset siap unggah yang dapat ditempatkan ke layanan penyedia hosting statis gratis seperti GitHub Pages, Netlify, atau Vercel.

Troubleshooting Masalah Umum

  • Perintah hugo command not found: Pastikan path instalasi Hugo telah didaftarkan ke dalam Environment Variables sistem operasi Anda.
  • Tema tidak muncul atau berantakan: Periksa kembali penulisan nama folder tema di dalam file hugo.toml apakah sudah persis sama dengan nama folder di direktori themes/.

🔍 Orang Lain Juga Mencari Ini