Mengenal 9 Directory Structure Hugo Sebelum Membangun Situs

kumiskiri March 9, 2023 March 9, 2023 9 min read

Nah, ini nih, fitur andalan dari Hugo yang bikin beda! Directory Structure Hugo yang jadi senjata rahasia buat bikin web makin oke. Penataan struktur direktori yang bener bisa bikin performa web makin ciamik, pengalaman pengguna makin asyik, enak dikelola, dan mendukung perkembangan website.

Yuk, kita bahas tentang Directory Structure Hugo mulai dari konsep dasarnya dan panduan langkah-langkah untuk merancang struktur direktori yang pas buat situs.

Sebenarnya, Apa Sih Directory Structure Hugo Itu?

Directory Structure Hugo itu adalah cara ente natain letak folder dan berkas di web. Struktur direktori di Hugo itu ngatur posisi folder dan berkas dalam satu hirarki. Ada beberapa folder utama yang penting buat dijadiin temen karib dalam struktur direktori Hugo:

├── archetypes
├── assets
│ ├── css
│ ├── js
│ └── img
├── content
├── data
├── layouts
├── static
└── themes
config.toml

Baca Juga: Cara Membuat Blog Hugo Static Site Generator

Directory Structure Hugo Archetypes

Archetypes di Hugo itu adalah folder yang isinya template-template keren buat bikin konten baru di situs ente. Nah, folder ini berguna banget buat ngatur struktur dan format konten baru dengan mudah dan cepat.

Ada beberapa file di dalam folder Archetypes yang berguna banget, contohnya:

default.md: Template buat bikin halaman baru.
post.md: File ini jadi template buat bikin postingan blog baru.
page.md: Jadi template buat bikin halaman statis baru di situs.
custom.md: Khusus yang bisa kustomisasi sesuai kebutuhan website.

Setelah bikin file baru pake template archetype, tinggal edit file itu dan tambahin konten yang ente mau. Dengan bantuan archetype, bisa pastiin setiap konten punya format dan struktur direktori Hugo yang konsisten.

Directory Structure Hugo Asset

Folder assets di Hugo itu jadi tempat buat nyimpen berbagai file terkait tampilan web, misalnya gambar, video, atau file CSS. Biasanya, folder ini ditempatin di dalam folder static dalam struktur direktori Hugo.

Di folder assets ini, ente bisa nyimpen berbagai macam file, misalnya:

Gambar: Semua gambar yang bakal digunakan di situs, kayak logo, foto, atau ilustrasi.
CSS: Tempat buat nyimpen file CSS yang ngebantu ngatur tampilan web. File CSS ini yang nentuin style dan susunan elemen.
JS: Di folder ini, bisa nyimpen file JavaScript yang bisa bikin web ente makin interaktif dan punya fitur keren.
Font: Nah, di folder ini bisa nyimpen file-file font yang mau ente pake.
Video: Ente bisa nyimpen video-video yang bakal ditampilin.
Audio: Buat nyimpen file audio yang bakal ente sajikan.

Nah, sekarang atur file-file itu sesuai kebutuhan ente. Jangan lupa masukin semua file yang terkait desain dan fungsionalitas situs ente ke folder assets. Jadi, web ente lebih mudah dikelola dan dikembangkan.

Directory Structure Hugo Content

Folder content itu adalah tempat buat nyimpen semua konten yang mau ditampilin di web, mulai dari artikel, halaman, sampe postingan blog. Biasanya, setiap file konten di Hugo ada metadata yang berisi informasi tentang konten itu sendiri, kayak judul, kategori, atau tanggal publikasi.

Ada beberapa folder di dalam folder content yang penting buat diketahui:

Post: Di folder ini, bisa nyimpen semua postingan blog.
Pages: Bisa nyimpen halaman-halaman statis.
Article: Buat nyimpen semua artikel yang mau ditampilin.
Event: Nyimpen semua informasi tentang acara atau kegiatan yang ada di web.
Produk: Buat nyimpen informasi tentang produk yang mau ditampilin.

Biasanya, setiap file konten di Hugo ditulis dalam format Markdown atau HTML. Dengan format ini, bisa nulis konten dengan mudah dan cepat, dan tambahin elemen desain kayak gambar atau video.

Directory Structure Hugo Data

Folder data itu tempat buat nyimpen file-file data dalam format YAML, JSON, atau CSV yang bakal digunakan buat nyimpen data statis yang mau ditampilin di situs. Data yang ada di folder data bisa berupa daftar, konfigurasi, atau informasi tentang produk, layanan, dan sebagainya.

Di folder data ini, biasanya ada beberapa file kayak:

Menu.yml: Berisi informasi tentang menu di web, kayak nama menu, tautan, atau urutannya.
Config.yml: Bisa atur konfigurasi website, kayak judul situs, deskripsi, atau kontak.
Products.yml: Nyimpen informasi tentang produk yang mau ditampilin, kayak nama produk, harga, deskripsi, atau gambar.
Services.json: Nah, di file ini, ente bisa nyimpen informasi tentang layanan yang ditawarkan, kayak nama layanan, deskripsi, atau harga.

Directory Structure Hugo Layouts

Folder layouts itu tempat buat nyimpen template HTML, CSS, dan JavaScript yang bakal digunakan buat nentuin tampilan dan layout ente. Template ini digunakan buat kontrol tampilan di setiap jenis halaman web, kayak halaman depan, halaman postingan blog, atau halaman kontak.

Ada beberapa folder di dalam folder layouts yang penting buat diketahui:

Partials: Bisa nyimpen template yang bakal digunakan buat nentuin tampilan di bagian-bagian kecil halaman, kayak header, footer, atau sidebar.
Posts: Nyimpen template buat nentuin tampilan di halaman postingan blog.
Default: Nah, di folder ini, ente bisa nyimpen template buat tampilan default di situs.

Buahkan judul halaman di template, bisa pake variabel .Title, dan buat nampilin isi konten di halaman, ente bisa pake variabel .Content. Selain itu, Hugo juga ada beberapa fungsi, kayak Range dan With, yang bisa dipake buat mengulang konten atau mendefinisikan variabel.

Directory structure Hugo Static

Folder static itu tempat buat nyimpen file-file statis kayak gambar, file CSS, atau file JavaScript yang bakal dipake buat bikin web. File-file yang ada di folder static nggak akan diproses sama Hugo, tapi langsung disalin ke folder akhir.

Contohnya, di folder static ini bisa nyimpen:

Gambar: Nyimpen file-file gambar dalam format JPG, PNG, GIF, atau SVG yang bakal digunakan buat tampilin grafis.
File CSS: Nah, di sini bisa nyimpen file-file stylesheet dalam format CSS yang bakal nentuin tampilan dan layout.
File JavaScript: Bisa nyimpen file-file script dalam format JavaScript yang bakal ditambahin fitur interaktif.

Folder static dalam directory structure Hugo umumnya ditempatin di dalam folder utama, jadi bisa edit dan modifikasi sesuai kebutuhan. Lewat folder static, bisa memastiin web ente tetep jalan dengan baik dan bisa diakses sama pengguna.

Directory structure Hugo Themes

Folder themes di Hugo itu berisi tema atau template situs yang bisa ente pake buat membangun situs dengan cepat dan gampang. Tema di Hugo itu sebenernya kumpulan file template HTML, CSS, dan JavaScript yang udah dibikin sebelumnya dan bisa ente sesuaikan sesuai kebutuhan.

Di dalam folder themes ini, ada beberapa folder yang penting buat diketahui:

layouts: Nyimpen template HTML, CSS, dan JavaScript yang digunakan buat nentuin tampilan dan layout.
static: Nah, di folder ini, bisa nyimpen file-file statis kayak gambar, file CSS, atau file JavaScript yang digunakan dalam tema.
archetypes: Bisa nyimpen template yang digunakan buat bikin konten baru.
data: Nyimpen file-file data kayak file CSV atau JSON yang digunakan buat nyimpen data.

Directory structure Hugo Config.toml

Config.toml itu adalah file konfigurasi utama yang digunakan buat atur dan kontrol web yang dibangun pake Hugo. Di file ini, bisa atur berbagai opsi konfigurasi kayak pengaturan situs, tema, atau metadata buat web ente.

Ada beberapa pengaturan yang bisa diatur di file Config.toml, antara lain:

Pengaturan Web: Nah, di bagian ini, bisa tentuin judul, deskripsi, URL, atau bahasa.
Pengaturan Tampilan: Nah, di bagian ini, bisa tentuin tema yang mau digunakan buat pengaturan tampilan kayak warna background, warna teks, dan sebagainya.
Pengaturan Konten: ente bisa tentuin gimana konten ditampilin kayak format tanggal, format permalinks, dan sebagainya.
Pengaturan Build: Tentuin opsi build kayak pengaturan output build, proses file, dan sebagainya.

File Config.toml ini biasanya ditempatin di direktori utama dan bisa diedit pake editor teks kayak Visual Studio Code atau Sublime Text. Dengan file Config.toml ini, bisa dengan gampang atur dan kontrol biar jalan dengan baik dan sesuai preferensi ente.

Directory structure Hugo Public

Folder public di Hugo itu berisi file-file HTML, CSS, JavaScript, dan lain-lain yang dihasilkan dari proses pembuatan web pake Hugo. Begitu proses pembuatan selesai, folder public bakal berisi semua file yang diperlukan buat hosting di server.

Setelah file dihasilkan lewat Hugo, folder public bakal punya struktur direktori yang sama kayak folder content. Tapi bedanya, di folder public ada file-file HTML, CSS, dan JavaScript yang udah jadi dan siap dihosting di server.

Setiap kali ente ngubah situs, tinggal jalankan perintah build di terminal buat ngehasilin file baru yang bakal ditaro di folder public. Setelah proses build selesai, bisa hosting folder public di server biar ente bisa diakses oleh pengguna.

Folder public dalam directory structure Hugo juga bisa dipake buat debugging web, khususnya kalo ada masalah sama tampilan atau layout. Lewat akses file HTML, CSS, dan JavaScript yang dihasilkan di dalam folder public, ente bisa melacak dan ngatasi masalah yang muncul.

Folder Public ini biasanya ditempatin di dalam folder utama, jadi bisa ente edit dan modifikasi sesuai kebutuhan. Lewat folder Public, ente bisa memastiin tetep jalan dengan baik dan bisa diakses sama pengguna.

Hasilkan Directory Structure Hugo yang Optimal

Biar directory structure Hugo jadi yang paling keren, ente perlu pertimbangin beberapa hal yang penting. Nah, berikut panduan langkah-langkah buat bikin directory structure Hugo yang pas buat situs.

1. Pikirkan Dulu Tujuan Web

Sebelum mulai, coba pikirin dulu tujuan ente. Mau bikin blog personal atau website bisnis? Mau banyak halaman statis atau banyak postingan blog? Mau pake tema tertentu atau desain sendiri?

2. Pakailah Hierarki Direktori Structure Hugo yang Jelas

Directory structure Hugo harus punya hirarki yang jelas biar manajemen konten dan pengembangan web ente lebih gampang. Folder utama harus berisi folder terpisah buat masing-masing jenis dan fungsionalitas konten. Misalnya, folder konten harus punya folder terpisah buat halaman, postingan blog, dan berita.

3. Perlu Pertimbangkan SEO

Struktur direktori Hugo juga harus mempertimbangkan SEO. Pastiin konten ente gampang dijangkau sama mesin pencari lewat URL yang mudah dibaca dan dimengerti.

4. Pakailah kata kunci yang pas.

Contohnya, kalo ente punya situs bisnis yang jualan produk, pastiin folder produk sama laman produk mudah dijangkau sama mesin pencari lewat URL yang jelas, misalnya www.domain.com/produk/nama-produk.

5. Gunakan Tema ataupun Buat Tampilan Web Sendiri

Hugo punya banyak tema yang bisa ente pake, atau bisa juga bikin desain sendiri. Kalo pake tema, pastiin ikutin directory structure Hugo yang udah disediain sama tema itu. Kalo mau desain sendiri, buatlah struktur direktori yang sesuai dengan kebutuhan ente.

6. Pikirkan Kemampuan Kinerja Situs

Directory structure Hugo juga bisa mempengaruhi performa situs ente. Pastiin file statis ditaro di folder statis, dan konten dinamis ditaro di folder konten. Jangan taro file yang sering diubah di folder statis, karena bisa ganggu cache browser.

7. Gunakan Versi Hugo Terbaru

Pastiin ente pake Hugo versi terbaru buat memastiin web tetep aman dan performanya tinggi. Versi terbaru juga bisa ngasih fitur-fitur baru yang bisa meningkatin performa dan kepuasan pengguna.

Baca Juga: SEO Hugo: Cara Optimasi SEO pada Situs Hugo

Kesimpulan

Directory structure Hugo itu penting banget buat web yang optimal. Dalam Hugo, struktur direktorinya terdiri dari beberapa folder utama kayak archetypes, assets, content, data, layouts, static, themes, config.toml, dan folder public. Buat bikin directory structure Hugo yang ideal, harus pikirin dulu tujuan situs ente.

Selain itu, pake hirarki yang jelas, pertimbangin SEO, pake tema atau bikin desain sendiri, pikirin performa situs ente, dan pastiin pake versi Hugo yang terbaru. Dengan langkah-langkah ini, ente bisa bangun web yang optimal dengan directory structure Hugo yang pas. Selamat mencoba dan semoga bermanfaat!

Hugo