deuxly.dev: Setelah berhasil install Hugo di tutorial sebelumnya, sekarang saatnya kita bedah struktur folder Hugo. Banyak yang bingung: Gambar taruh mana? Cara edit tema gimana?
Di sini aku bakal jelasin folder-folder Penting aja, biar kamu bisa langsung fokus nulis tanpa pusing mikirin hal yang belum perlu.
Daftar Isi
Struktur Folder di Hugo
Pas kamu jalanin hugo new site, Hugo bikin struktur kayak gini. Tapi tenang, kita cuma bakal sering main di 4 folder yang aku tandain (PENTING):
blog-saya/
├── archetypes/ ← Template dasar artikel
├── content/ ← (PENTING) Rumah semua artikel kamu
├── layouts/ ← (PENTING) Tempat edit HTML/Tampilan
├── static/ ← (PENTING) File gambar/aset mentah
├── themes/ ← (PENTING) Folder tema (Jangan diedit langsung!)
├── public/ ← Hasil generate website (Otomatis)
└── hugo.yaml ← File Konfigurasi UtamaPahami 4 Folder Penting di Hugo
Biar nggak bingung, anggap aja Hugo ini kayak kantor redaksi:
Content (Ruang Penulis)
Di sinilah semua tulisanmu disimpan. Formatnya Markdown (.md).
- Artikel Blog: Masuk ke
content/posts/ - Halaman About/Contact: Masuk langsung di
content/about.md
Static (Gudang Aset)
Tempat naruh file yang ngga perlu diolah sama Hugo, kaya gambar logo, favicon, atau file PDF.
- Kalau kamu taruh gambar di
static/logo.png. - Maka link-nya nanti jadi
blogmu.com/logo.png. - Ingat: Jangan masukin nama folder
staticpas manggil file-nya.
Themes (Gudang Template)
Ini tempat tema yang kamu punya (misal: PaperMod).
themes/. Kenapa? Kalau temanya update, editan kamu bakal hilang ketimpa.Layouts (Ruang Layout)
Kalau kamu mau ngubah struktur HTML (misal: nambahin script iklan di <head>), kamu bikin filenya di sini. File di sini bakal Nimpa file bawaan yang ada di tema.
Workflow Cara Nulis Artikel
Di Hugo, kita ngga pake dashboard login kaya di wordpress atau blogger. Kita full pake terminal biar keren (dan lebih cepet).
Membuat File Baru
Buka terminal VS Code (Ctrl + J), ketik:
hugo new posts/judul-artikelmu.mdPerintah ini bakal otomatis bikin file baru lengkap dengan tanggal dan format bakunya.
Memahami Front Matter
Di bagian paling atas artikel, ada area yang diapit garis ---. Nah, itu namanya Front Matter.
---
title: "Judul Artikel Kamu"
date: 2025-12-28
draft: true
tags: ["Tutorial"]
---draft: true: Ini harus dipantau pas mau publish artikel. Selama statusnyatrue, artikel ngga bakalan muncul di blog final.- Ubah jadi
falsekalau udah siap tayang. - Atau jalankan server pake mode draft:
hugo server -D. Arti-Ditu adalahDraft
Manajemen Gambar yang Rapi
Ada dua cara buat naruh gambar di Hugo. Pilih yang paling cocok buatmu:
Folder Static (Klasik)
Cocok buat gambar umum kayak logo atau background.
- Taruh gambar di
static/images/foto.jpg. - Panggil di artikel:
.
Page Bundles (Recommended)
Cocok buat artikel yang gambarnya banyak biar ngga nyampur. Caranya, bikin folder dengan nama artikel di dalam content/posts/.
Strukturnya jadi gini:
content/posts/tutorial-hugo/
├── index.md (Wajib nama index.md)
├── cover.jpg
└── diagram.pngPanggilnya simpel: . Lebih rapi, kan?
Troubleshooting Umum
Kalau ada yang ngga beres, cek 3 hal ini dulu:
- Artikel Ga Muncul?
Cek
draft: truedi Front Matter. Pastiin udahfalseatau server jalan pake-D. - Gambar 404/Rusak?
Cek path-nya. Kalau taruh di
static, panggil pake/di depannya (absolute path). Perhatikan huruf besar/kecil (Case Sensitive). - Edit Tema Ga Ngaruh?
Pastikan kamu ngedit di folder
layoutsroot, bukan di dalam folderthemes.
Cheat Sheet Perintah Hugo
Simpan daftar perintah ini biar ngga lupa:
| Perintah | Fungsi |
|---|---|
hugo new posts/nama.md | Bikin artikel baru |
hugo server -D | Jalanin preview (termasuk draft) |
hugo | Build website final (folder public) |
hugo --minify | Build final versi optimasi (lebih ringan) |
Gimana? Struktur folder Hugo sebenernya logis kalau udah paham polanya.
Next Step: Blog udah jalan, struktur udah paham. Tapi kok tampilannya masih kaku dan masih bawaan pabrik? Di artikel selanjutnya, kita bakal belajar Custom Tampilan Hugo. Aku bakal ajarin cara ganti font, warna, dan nambahin menu navigasi biar blog kamu punya identitas unik.
