Halo Kawan Deuxly!
Pernah nggak sih kamu merasa overwhelmed saat pertama kali membuka teks editor setelah menginstal Hugo? Di panel kiri, berderet folder dengan nama-nama asing: archetypes, assets, content, layouts, dan teman-temannya. Rasanya seperti masuk ke kokpit pesawat tanpa buku manual.
Bagi pengguna WordPress, kita terbiasa dimanjakan. Kita nggak perlu tahu di mana database disimpan atau di mana file inti berada. Tapi di Hugo—dan dunia Static Site Generator (SSG) pada umumnya—file dan folder ADALAH database kamu.
Memahami struktur direktori Hugo bukan sekadar hafalan. Ini adalah tentang memahami logika dan hierarki. Jika kamu paham konsep ini, kamu bisa memanipulasi tema deuxlytheme (atau tema apapun) sesuka hati tanpa takut merusak kode aslinya.
Di artikel ini, kita akan membedah anatomi Hugo dengan cara yang berbeda: kita akan melihat bagaimana folder-folder ini saling berkomunikasi untuk merakit website kamu. Yuk, kita mulai petualangannya!
The "Brain": Pusat Kendali Situs (Config)
Sebelum kita masuk ke folder, kita harus hormat dulu pada satu file yang menjadi "Jenderal" dari semua operasi: File Konfigurasi.
Biasanya bernama hugo.toml, config.toml, atau hugo.yaml, file ini duduk santai di root directory (folder paling luar).
Mengapa Ini Penting?
Hugo tidak akan melakukan apapun tanpa instruksi dari file ini. Saat kamu mengetik perintah hugo server, hal pertama yang dilakukan Hugo adalah membaca file ini untuk menjawab pertanyaan:
"Apa nama situs ini?" (title)
"Di mana URL dasarnya?" (baseURL)
"Tema apa yang harus dipakai?" (theme)
Kesalahan kecil di sini (misalnya salah ketik nama tema) akan membuat seluruh struktur folder di bawahnya tidak berguna karena Hugo akan crash duluan.
Segitiga Emas: Content, Themes, dan Layouts
Inilah bagian yang paling sering bikin bingung pemula. Ada tiga folder yang mengatur tampilan dan isi website kamu. Mari kita lihat hubungannya.
1. content/ (Bahan Baku Utama)
Di sinilah "jiwa" website kamu berada. Berbeda dengan CMS dinamis yang menyimpan artikel di database MySQL, Hugo menyimpan tulisanmu sebagai file teks sederhana (Markdown) di dalam folder content/.
Konsep Penting: Organisasi Mencerminkan URLStruktur folder di dalam content akan menjadi struktur URL website kamu secara otomatis.
File: content/posts/belajar-hugo.md
URL: deuxly.id/posts/belajar-hugo/
Hugo sangat fleksibel. Kamu bisa membuat folder bersarang (nested) sedalam apapun, dan Hugo akan tetap merendernya dengan rapi. Di sinilah kamu juga bisa memanfaatkan Page Bundles (menaruh artikel dan gambarnya dalam satu folder khusus) agar manajemen file lebih rapi.
2. themes/ (Paket Desain Pihak Ketiga)
Folder ini adalah tempat kamu menyimpan karya orang lain (atau karya kamu sendiri yang dibungkus jadi tema). Di dalamnya, ada struktur folder yang mirip dengan root directory kamu (ada layouts, static, assets sendiri).
Peraturan Tak Tertulis:Anggap folder themes ini sebagai zona "Read-Only". Kalau kamu mengunduh tema dari GitHub, jangan pernah mengedit file di dalamnya langsung. Kenapa? Karena saat kamu melakukan git pull untuk update tema, semua editanmu akan hilang tak berbekas.
Lantas, kalau mau ganti warna atau layout gimana? Jawabannya ada di folder berikutnya.
3. layouts/ (Ruang Kustomisasi & Override)
Ini adalah folder favorit para tinkerers (tukang oprek). Folder layouts di root directory kamu punya kekuatan super bernama Override.
Logika Hugo Lookup Order:Saat Hugo hendak menampilkan halaman, dia akan mencari file desain dengan urutan prioritas:
Cek dulu di folder layouts/ (milikmu). Ada nggak file yang diminta?
Kalau nggak ada, baru cek di folder themes/nama-tema/layouts/.
Kalau nggak ada juga, baru tampilkan error atau fallback default.
Jadi, jika kamu ingin mengubah tampilan header, jangan edit themes/tema-kamu/layouts/partials/header.html. Tapi, copy file tersebut, lalu paste ke layouts/partials/header.html di root folder kamu. Edit file copasan itu. Hugo akan otomatis memilih versimu!
Manajemen Aset: Static vs Assets
Dua folder ini sering tertukar fungsinya karena sama-sama menyimpan gambar, CSS, dan JS. Padahal, cara kerja di belakang layarnya sangat berbeda.
static/ (Jalur Ekspres)
Folder static itu ibarat kurir kilat. Apapun yang kamu taruh di sini, Hugo akan mengambilnya dan menaruhnya langsung ke folder hasil akhir (public) tanpa bertanya, tanpa mengubah, dan tanpa memproses apapun.
Cocok untuk: File robots.txt, verifikasi AdSense, favicon, file PDF untuk di-download user, atau gambar yang sudah terkompresi.
Cara Akses: File di static/img/logo.png bisa diakses langsung di domain.com/img/logo.png.
assets/ (Pabrik Pengolahan / Hugo Pipes)
Folder assets adalah pabrik pengolahan. File yang masuk sini biasanya adalah bahan mentah yang perlu "dimasak" dulu.
Fitur ini disebut Hugo Pipes.
Kamu punya file SCSS? Taruh di assets, nanti Hugo akan mengkompilasinya jadi CSS biasa dan meminifikasinya (minify) agar ukurannya kecil.
Kamu punya gambar foto ukuran 5MB? Taruh di assets. Kamu bisa coding di layout agar Hugo otomatis melakukan resize, crop, atau mengubah formatnya jadi WebP saat website di-build.
Jadi, kalau kamu peduli soal Core Web Vitals dan kecepatan loading, belajarlah menggunakan folder assets daripada sekadar static.
Folder Pendukung: Pahlawan Tanpa Tanda Jasa
Selain folder utama di atas, ada beberapa folder yang fungsinya spesifik namun sangat membantu produktivitas kamu sebagai penulis dan pengelola web.
archetypes/ (Template Generator)
Bayangkan kamu punya format standar untuk setiap review produk: harus ada parameter "harga", "rating", dan "link pembelian" di bagian atas artikel (Front Matter).
Daripada copy-paste manual dari artikel lama setiap kali bikin baru, kamu bisa membuat template di folder archetypes.Saat kamu mengetik hugo new review/hp-baru.md, Hugo akan melihat archetypes/review.md dan membuatkan file baru yang sudah lengkap dengan struktur data yang kamu butuhkan. Hemat waktu, anti lupa!
data/ (Penyimpanan Data Terstruktur)
Hugo memang flat-file CMS, tapi bukan berarti dia bodoh soal data. Folder data/ memungkinkan kamu menyimpan informasi dalam format YAML, JSON, atau TOML.
Contoh kasus: Kamu ingin menampilkan "Daftar Partner" di homepage. Daripada menulis HTML manual yang susah diedit, buatlah file partner.json di folder data.Lalu di layout HTML, kamu tinggal panggil fungsinya: _"Hugo, tolong ambil data dari partner.json dan buatkan list-nya."_Hasilnya rapi, mudah diupdate, dan kodingan tetap bersih.
i18n/ (Internasionalisasi)
Ini singkatan dari internationalization. Kalau blog kamu mau keren dengan fitur dua bahasa (misal: Indonesia & Inggris), folder ini tempatnya menyimpan kamus terjemahan. Kamu bisa mengatur agar tombol "Read More" berubah jadi "Baca Selengkapnya" otomatis saat pengunjung mengganti bahasa.
Folder Output: Jangan Disentuh!
public/
Ini adalah folder Tujuan Akhir. Saat kamu menjalankan perintah hugo (tanpa embel-embel server), Hugo akan:
Membaca Config.
Mengambil Content.
Menggabungkan dengan Layouts/Themes.
Memproses Assets.
Menyalin Static.
MENCETAK HASILNYA ke folder public.
Isi folder inilah yang kamu upload ke hosting. Peringatan Keras: Jangan pernah mengedit file di dalam public. Itu sia-sia. Begitu kamu build ulang, editanmu akan tertimpa. Editlah selalu di folder sumbernya (content atau layouts).
resources/
Folder ini sering muncul tiba-tiba dan bikin bingung. Isinya apa? Ini adalah cache.Saat Hugo memproses gambar (resize/crop) dari folder assets, hasilnya disimpan sementara di sini. Tujuannya agar saat kamu build ulang website, Hugo tidak perlu memproses gambar yang sama dua kali. Ini yang bikin Hugo super cepat!
Kesimpulan: Struktur Adalah Kunci Fleksibilitas
Mempelajari struktur direktori Hugo di deuxly.id ini mungkin terasa teknis banget. Tapi percayalah, ini adalah investasi ilmu yang mahal harganya.
Banyak blogger yang menyerah pakai Hugo karena merasa "susah ngedit tampilan". Padahal, kuncinya cuma satu: Paham Hierarki Folder. Begitu kamu mengerti bahwa file di layouts mengalahkan file di themes, dan file di assets bisa dimanipulasi sesuka hati, kamu akan menyadari betapa powerful-nya CMS ini.
Struktur folder Hugo dirancang bukan untuk menyusahkan, tapi untuk menjaga agar website kamu tetap terorganisir, mudah dikelola (maintainable), dan siap untuk skala besar.
Jadi, jangan takut untuk mengulik folder-folder tersebut. Semakin kamu sering "tersesat" di dalamnya, semakin hafal jalan pulangnya.
Happy Hugo-ing, dan sampai jumpa di tutorial Deuxly berikutnya!
Checklist Singkat untuk Pemula
Biar nggak lupa, simpan checklist fungsi folder ini:
Mau nulis artikel? -> Buka content/
Mau ganti logo/gambar statis? -> Masuk static/
Mau ubah struktur HTML header/footer? -> Cek layouts/
Mau ubah konfigurasi dasar? -> Edit hugo.toml
Mau bikin format artikel otomatis? -> Atur archetypes/
Mau upload ke hosting? -> Upload isi folder public/
Top comments (0)