Membuat Situs dan Memahami Struktur Hugo

Disini kita akan belajar cara membuat situs hugo menggunakan perintah di terminal dan belajar struktur dasar dari situs hugo yang kita buat.

Setelah sebelumnya kita belajar cara untuk menginstall Hugo di perangkat Desktop dan Mobile. Sekarang sudah waktunya kita mulai pembelajaran yang sesungguhnya.

Pertama, buka terminal, cmd, atau termux kalian. Setelah itu kita akan membuat sebuah situs baru menggunakan perintah dari Hugo. Gunakan perintah dibawah ini:

1hugo new site namasitus

Ubah “namasitus” sesuai dengan nama situs, web atau blog yang ingin kamu buat. Karena sekarang kita masih dalam tahap belajar, maka kita bisa memberikan nama “belajarhugo”.

1hugo new site belajarhugo

Struktur Root Hugo

 1belajarhugo
 2    |
 3    ├── archetypes
 4    |       ├── default.md
 5    |
 6    ├── config.toml
 7    ├── content
 8    ├── data
 9    ├── layouts 
10    |      ├── _default
11    |      ├── partials
12    |      ├── 404.html
13    |      ├── index.html
14    |
15    ├── public
16    ├── static
17    └── themes

Di hugo, ada beberapa folder dan file yang perlu kamu ketahui. Ini penting!, karena kedepannya kita akan sering menggunakannya.

Baca dan pahami fungsi dari folder dan file yang saya jelaskan disini. Kamu juga bisa bertanya lewat kolom komentar dibawah.

archetypes

Folder archetypes berisi file bernama “default.md”. File ini digunakan untuk mengatur semua file markdown yang terdapat di dalam folder content.

config.toml

Diantara struktur root hugo (maksudnya folder/file seperti gambar struktur diatas). Hanya config.toml yang merupakan sebuah file bawaan hugo.

Walaupun kedepannya kita bisa menambahkan file baru. Tapi, file config.toml adalah file wajib yang harus selalu ada didalam struktur root hugo.

File config.toml merupakan sebuah file yang digunakan untuk mengatur atau mengkonfigurasi situs hugo secara global atau keseluruhan.

Kita dapat mengatur nama situs, url situs, tema situs, dan masih banyak lagi yang bisa kita lakukan menggunakan file ini.

Kita bahkan juga dapat memasukkan nilai kustom (teks, gambar, file, dll) sesuai kebutuhan dan keinginan kita.

content

Kalian mungkin nanti akan bertanya, bagaimana cara membuat sebuah postingan atau artikel di hugo?.

Kita abaikan dulu pertanyaan ini, karena kedepannya kita akan belajar caranya. Sekarang saya akan menjelaskan tempat dimana postingan tersebut akan disimpan.

Postingan atau artikel yang kita buat akan tersimpan di dalam folder content. Artinya, folder content ini akan kita gunakan untuk menyimpan berbagai postingan/artikel.

Artikel tersebut dihasilkan melalui perintah hugo new postingan1.md. Kata postingan1 pada perintah tersebut, secara default akan menjadi judul dari artikel.

Kita dapat mengubah ketentuannya melalui file default.md di folder archetypes.

Kita bisa mengelompokkan setiap postingan ke beberapa kategori atau bagian dengan cara menyimpannya di sebuah folder dengan nama yang sesuai.

Postingan atau artikel kita:

1content
2    ├── postingan1.md
3    ├── postingan2.md

Jika kita ingin mengelompokkan sebuah postingan ke kategori tertentu. Kita bisa membuat sebuah folder dengan nama kategorinya dan meletakkan postingan didalam folder tersebut.

Contoh postingan dengan kategori blog:

1content
2    ├── blog
3          ├── postingan3.md
4          ├── postingan4.md

Kedua contoh diatas merupakan sebuah gambaran singkat tentang kegunaan atau fungsi folder content.

Kedepannya kita akan membahas cara untuk membuat sebuah postingan atau artikel di situs hugo yang sudah kita buat sebelumnya (situs belajahugo tadi).

Kita akan menggunakan perintah bawaan hugo untuk membuat postingan/artikel-nya.

Terdapat beberapa alasan kenapa kita harus menggunakan perintah dari hugo untuk hal sederhana seperti membuat postingan atau artikel (nanti akan saya jelaskan seiring kita belajar).

data

Folder atau direktori data digunakan untuk menyimpan data tambahan untuk situs. Kita dapat menganggap folder data seperti sebuah database versi kecil yang berisi file-file yang kita butuhkan untuk situs.

Umumnya data-data (file) yang kita simpan di dalam folder data akan digunakan pada postingan atau artikel.

File didalam folder atau direktori data haruslah berformat .yaml, .json, .xml, atau .toml.

Nantinya data (file) tersebut dapat diakses melalui site variable yang akan kita pelajari setelah kita masuk ke materi variable hugo. Sekarang kita harus fokus ke pembahasan tentang struktur hugo.

layouts

Folder atau direktori layouts merupakan salah satu direktori yang akan paling sering kita gunakan saat kita belajar hugo.

Alasannya adalah karena folder atau direktori ini kita gunakan untuk membuat struktur (HTML) situs hugo.

Halaman utama (home page), halaman daftar konten/artikel, halaman error 404 dan halaman lainnya diatur di dalam folder layouts ini.

Didalam folder layouts, kita akan memerlukan dua folder yang paling penting. Folder tersebut adalah:

1. Folder _default digunakan untuk menyimpan file-file HTML yang mengatur setiap struktur halaman pada situs hugo.
2. Folder partials digunakan untuk menyimpan file-file HTML yang khusus untuk bagian-bagian tertentu dari situs hugo.
   Sebagai contoh, file header.html untuk menentukan bagian header situs, file footer.html untuk menentukan bagian footer situs.

public

Folder atau direktori public berisi file-file yang akan ditampilkan ke pengguna atau pengunjung situs. File-file ini dihasilkan hugo melalui perintah hugo di terminal.

Kita tidak perlu terlalu memikirkan folder ini karena folder ini hanya akan kita gunakan setelah kita selesai membangun situs hugo.

Folder public inilah yang nanti akan kita upload ke web server.

Beberapa penyedia penyimpanan awan (cloud storage) mungkin tidak membutuhkan folder public karena mereka sudah menyediakan fitur (baris perintah) yang dapat kita gunakan untuk menjalankan perintah hugo tadi.

Sebagai contoh, github yang terintegrasi dengan netlify, dan penyedia layanan lainnya.

static

Saat membuat sebuah situs (website, blog, atau lainnya). Umumnya kita memerlukan CSS untuk mengatur dan memperindah tampilan situs dan beberapa kode javascript untuk mengatur elemen agar interaktif.

Karena itu, hugo menyiapkan sebuah folder atau direktori khusus yang dapat kita gunakan untuk menyimpan kode-kode tersebut.

Folder atau direktoori tersebut bernama static. Kita bisa secara langsung meletakkan file CSS dan Javascript kita di dalam folder static.

Atau kita juga dapat membuat folder sesuai dengan jenis file didalamnya.

Sebagai contoh, folder dengan nama CSS berisi file-file CSS dan folder dengan nama JS berisi file-file javascript.

Selain untuk menyimpan kode css dan javascript, kita juga dapat menyimpan semua foto, gambar, dan video di folder static ini.

Misalnya untuk menempatkan gambar. Kita hanya perlu membuat folder bernama images yang isinya adalah kumpulan gambar yang kita butuhkan.

themes

Folder terakhir adalah folder themes. Seperti namanya, folder ini digunakan untuk menyimpan tema, lebih tepatnya tema hugo.

Tema digunakan untuk mengatur tampilan dan struktur situs hugo.

Kita dapat mengubah tampilan, struktur dan tata letak situs hanya dengan mengganti tema (tanpa takut kehilangan konten atau data situs).

Tema yang kita gunakan bisa kita buat sendiri atau dengan menggunakan tema buatan orang lain.

Kita juga dapat secara langsung mengerjakan proyek situs hugo kita tanpa harus terikat/menggunakan folder themes. Cukup dengan menyimpan semuanya di folder root hugo.

Kesimpulan

Setelah kita belajar struktur root hugo dan cara membuat situs hugo. Kita akan lanjut ke materi selanjutnya yaitu membuat beberapa kata dan menyisipkan sebuah gambar ke situs hugo yang kita buat.