Memahami Alur Kerja Hugo dan Cara Membuat Postingan

Tulisan kelima dari Tutorial Membuat Website Berkelas Modal Ceban

Pindah dari suatu sistem ke sistem kerja baru memang terasa berat. Apalagi sudah sangat sangat sangat nyaman dengan CMS WordPress, kenapa musti move on ke SSG Hugo? Ekosistem CMS WordPress pun sudah menjadi yang terbesar didunia. WP sudah berusia 20 tahun, sudah mature, sudah teruji oleh berbagai macam ragam website.

Pindah ke sistem baru yang belum matang menghabiskan banyak waktu. Butuh effort lebih untuk menyelesai masalah—troubleshooting minim dokumentasi—yang ujung-ujungnya belum tentu juga diterima klien.

Saya sendiri juga begitu, di awal-awal mempelajari sistem Hugo betul-betul sangat membingungkan. Bahkan menghabiskan waktu berhari-hari untuk sekadar memahami cara kerja sistem Hugo, entah karena minim tutorial dari konten lokal.

Sempat putus asa juga kenapa belum bisa “menaklukan” sistem Hugo. Bahkan mau taubat balik ke CMS WordPress. Namun, karena sudah tekad bulat mantap “murtad” dari CMS WordPress, akhirnya saya ketemu “aha moment” setelah baca kembali dokumentasi Hugo.

Mau tahu aha moment saya saat mempelajari sistem Hugo? Mengetahui workflow alias alur kerjanya. Ternyata SSG Hugo itu simpel kalau sudah paham alur kerjanya walaupun seorang web developer buta bahasa Go, bahasa ibu code pemograman Hugo.

Untuk itu, setelah menginstal binari Hugo, jangan dulu membuat konten baru atau pasang theme Hugo seperti saran kebanyakan tutorial, ada baiknya kita pahami dulu “how Hugo it work”.

Melanjutkan tutorial sebelumnya, kita sudah berhasil memasang Hugo dan membuat web baru rembele.my.id. Isinya direktori web baru juga masih kosong dan belum ada penambahan dan sedikitpun. Sampai di sini, website tersebut bisa langsung kita running.

Caranya, kembali ke app VSCode, lalu aktifkan jendela Terminal dengan klik menu Terminal → New Terminal.

Melalui Jendela Terminal, ketik perintah:

$ hugo server

Buka browser, akses http://localhost:1313/

Tampilannya blank???

Iya, nggak apa-apa tampilannnya kosong, itu bertanda web servernya berhasil running.

Selanjutnya, buat file baru dengan nama index.html di dalam folder layouts.

Lalu masukkan kode markup di bawah ini dan save.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rembele.my.id</title>
</head>
<body>

    <h1>Hello world!</h1>

</body>
</html>

Selanjutnya, buka dan refresh browser. Hasilnya akan seperti ini:

Hore… Browser sudah berhasil menampilkan text “Hello world!”.

Konten “Hello world!” yang berhasil dirender browser berasal dari teks template. Terus bagaimana cara menampilkan konten asli dari “database”?

Pertanyaan yang bagus.

Kini saatnya untuk menampilkan konten Hugo new post yang sebenarnya. Sebelum itu, tambahkan beberapa konten posting baru.

Cara Create Posting Baru Website Hugo

Werdpress meme hugo user create new post using cmd

Berikut cara membuat posting baru dengan SSG Hugo. Masih dari jendela Terminal VSCode, tekan tombol Ctrl + C untuk menghentikan sementara server localhost:1313 terlebih dahulu.

Kemudian lanjut ketik perintah berikut untuk membuat new posts:

$ hugo new posts/lorem-ipsum-dolor-sit-amet.md

Hasilnya, Hugo akan meng-generate sebuah folder baru posts sekaligus meng-create file baru lorem-ipsum-dolor-sit-amet.md di dalamnya sebagai sub direktori content.

content/
└── posts/
    ├── lorem-ipsum-dolor-sit-amet.md
    ├── lorem-ipsum-dolor-sit-amet-2.md
    └── lorem-ipsum-dolor-sit-amet-3.md

Penampakan hasil screenshoot seperti berikut:

Double klik file lorem-ipsum-dolor-sit-amet.md. Pada baris ke 7 di bawah kode front matter, copas beberapa paragraf teks, lalu save.

Berikutnya, dari jendela Terminal jalankan lagi perintah hugo server dengan tambahan flag -D.

$ hugo server -D

Arti perintah hugo server -D untuk merender semua konten posting termasuk yang masih berstatus mode draft : true.

Hasilnya masih sama, browser masih belum menampilkan isi konten posting baru.

Untuk itu, kita harus melakukan beberapa tambahan file template sebagai syarat Hugo untuk bisa merender konten posting.

Masih di app VSCode, di dalam folder layouts create folder baru bernama _default .

Di dalam folder baru _default create file baru lagi bernama baseof.html.

Buka file baseof.html lalu insert code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>{{ .Title }}</title>

</head>
<body>

  {{ block "main" . }}
		<!-- The part of the page that begins to differ between templates -->
  {{ end }}

</body>
</html>

Berikutnya, buka file index.html.

Kemudian replace baris code sebelumnya menjadi seperti berikut ini:

{{ define "main" }}
    
    <main>

        {{ range .Site.RegularPages }}

        <article>

            <h1>{{ .Title }}</h1>

            {{ .Content }}

        </article>

        {{ end }}
        
    </main>

{{ end }}

Jangan lupa save. Kemudian buka dan refresh browser. Kalau tidak error, hasil render browser akan tampil seperti berikut ini:

Next, edit konfigurasi website dengan klik file config.toml.

Silahkan ganti parameter config sesuai nama proyek website masing masing:

baseURL = 'http://rembele.my.id/'
languageCode = 'en-us'
title = 'Rembele.my.id'

Jangan lupa simpan, kemudian buka dan refresh kembali browser kalian.

Apa yang berubah, title website di tab browser akan berubah sesuai dengan title yang di-input di dalam file config.toml.

Hingga sampai pada tahap ini, mudah-mudahan sudah ada jawaban tentang pertanyaan, how Hugo it work, kan?

Penjelasan File Template dan Syntax Code Hugo

Untuk mengakses fungsi, variable dan parameter Go template menggunakan tanda double bracket {{ }}.

Jadi, kalau anda buka file theme terdapat kode di dalam double bracket {{ }} tandanya, kode tersebut syntax template Hugo.

Secara default file-file template theme Hugo sudah dimodularkan, artinya setiap bagian file template dipecah menjadi file terpisah, sehingga memudahkan dalam pengembangan theme.

Arti dan fungsi file template Hugo:

baseof.html → File struktur dasar template Hugo. File induk yang akan menampung semua file partial—kumpulan template modular website yang telah terpecah menjadi komponen terpisah.
index.html → File body template homepage yang akan menampilkan konten beranda utama.
Ada banyak file template lainnya seperti file header.html, footer.html dan file partial komponen website lainnya, akan kita bahas pada tutorial lanjutan, cara membuat theme Hugo sendiri.

Arti dan fungsi Syntax Code Hugo:

{{ .Title }} → Sesuai namanya, syntax code ini akan menampilkan judul website. Bila berada dalam blok code looping, akan menampilkan judul posting.
{{ block "main" . }} {{ end }} → Blok code ini sebagai ‘hooks’ untuk menampung isi yang terkait di dalam blok kode {{ define "main" }} {{ end }} file index.html.
{{ define "main" }} <article> </article> {{ end }} → Apapun yang diisi dalam blok kode ini, akan tampilkan ke dalam blok code {{ block "main" . }} {{ end }} file induk baseof.html.
{{ range .Site.RegularPages }} {{ end }} → Blok kode yang ada keyword range berfungsi untuk handle penerimaan data, macam ‘the loop’ post template WP. Sedangkan variabel .Site.RegularPages berfungsi untuk mengekstrak page content.
{{ range .Site.RegularPages }} {{ .Title }} {{ end }} → Sama seperti fungsi title sebelumnya, bilacode {{ .Title }} berada dalam scoop range akan menampilkan judul posting.
{{ .Content }} → Syntax code Hugo untuk menampilkan isi posting.