Belajar Hugo, Part 1

Artikel pertama dari seri “Learn ” dibuka dengan Hugo, Static Site Generator (SSG) yang digadang-gadang lebih cepat, aman, dan … well, murah.

Meski baru banget belajar pada tanggal 31 Juli 2021 kemarin, sebetulnya ini bukan pertama kali saya mendengar tentang Hugo. Dulu, dulu sekali, kawan saya Yudi sering cerita tentang ini. Tapi ya, dulu itu saya cuma iya-iya aja karena sama sekali enggak paham. Gimana mau paham, wong beberapa tahun lalu mah CSS aja belum bisa. Nah, sekarang saya sudah lebih siap.

Oh ya, ini bukan tutorial. Anda tidak akan mendapati “how to install bla bla bla”. Ini adalah proses dan progres saya belajar.

---

Latar Belakang

Blog ini dulunya tidak berniche tekno , dulu isinya random sekali mulai dari puisi tidak jelas, cerita keseharian, tip-tip penulisan, sampai racauan tentang politik. Agar kondusif dan sesuai niche, ratusan konten sengaja saya hapus. Tapi ada banyak sekali konten yang rasanya sayang jika dibuang karena -setidaknya menurut saya- masih memberikan manfaat untuk peradaban umat manusia (anjir!).

Pun, saya tidak selalu mood menulis tentang tekno. Butuh ruang untuk jeda dan kembali pada cinta pertama: puisi, cerpen, dan tetek bengek soal sastra.

Maka konten-konten tentang kepenulisan dan sastra yang dulu di-take down akan dipindahkan ke blog baru: wisatakata. Blog inilah yang kemudian jadi semacam personal project.

Memilih bahasa pemrograman yang akan digunakan untuk membuat website bukan tentang mana yang paling canggih, melainkan tentang bahasa program mana yang paling sesuai. Tentang permasalahan macam apa yang ingin kita pecahkan.

Untuk itulah subbab ini dibuat. Sebagai gambaran latar belakang dan masalah-masalah yang ingin saya pecahkan.

• Saya mau blog ini tetap TLD (Top Level Domain) tapi tidak mau memakai WordPress karena tidak ada waktu untuk maintenance dan segala macam. Juga terkendala masalah hosting a.k.a ndak ada duit kalau pakai WP. Hahahaha. Lagi pula, lama-lama bosen juga pakai WP.
• Sudah mencoba pakai Blogspot tapi aing aral menghadapi kelakukan inline CSS di post editor-nya. Pun, Blogspot tidak bisa memfasilitasi tampilan yang saya inginkan.
• Saya ingin blog ini mudah digunakan karena akan dipakai berdua oleh saya dan Salwa, anak saya yang sekarang sudah mulai rajin menulis blog.
• Tidak ada fitur lain yang diperlukan. Menggunakan blogging platform yang sudah ada dengan segala macam built in function jelas bukan solusi.
• Dari sisi tampilan, saya ingin punya keleluasaan membuat konten dengan tampilan custom tapi tetap dengan semantic HTML yang sesuai.
• Sempat terpikir untuk menggunakan Laravel, tapi saya belum bisa dan sepertinya akan overkill kalau pakai Laravel.

---

Alasan Memilih Hugo

Setelah mempertimbangkan banyak hal, dari sekian banyak Static Site Generator, akhirnya saya memilih Hugo karena beberapa alasan:

• Cocok untuk blog.
• Bisa TLD.
• Hosting gampang, bisa pakai Netlify atau Git yang gratis.
• Tidak perlu repot ngoding file HTML.
• Saya punya keleluasaan mengatur tampilan.
• Untuk CRUD (Create, Read, Update, and Delete) bisa diintegrasikan dengan CMS seperti Forestry sehingga mudah digunakan oleh Salwa. Saat development, saya masih menggunakan Markdown. Nanti saja pakai CMS mah kalau sudah selesai.
• Bisa dipasang tracking code seperti Google Analytics dan Google Search Console .
• Digadang-gadang lebih cepat. Tapi ini baru bisa diketahui kalau nanti sudah diunggah ke live server.

---

Tantangan

Apalah hidup ini tanpa ada tantangan, bukan? Belajar hal baru dan keluar dari zona nyaman jelas bukanlah tanpa risiko. Ini tantangan yang saya hadapi di awal:

1. Hugo dan SSG merupakan hal yang sama sekali baru bagi saya, jadi saya baru mulai belajar tuh tanggal 31 Juli 2021 lalu.
2. Nulis post-nya pakai Markdown, bukan WYSIWYG . Ini juga sama sekali baru buat saya. Untungnya struktur file Hugo mirip Laravel/CI.
3. Golang, bahasa pemrograman yang membangun Hugo juga sama sekali asing bagi saya. Pasti akan banyak sintaks yang tidak familiar.

Tantangannya tentu saja tidak hanya berhenti di situ. Pada prosesnya, banyak kendala yang saya hadapi. Tapi pada prosesnya pula, saya belajar untuk mencari solusi.

---

Proses dan Progres Belajar Hugo

Proses paling ideal saat membuat website (meskipun itu web personal a.k.a proyek pribadi) adalah dari desain dulu. Tidak ujug-ujug ngoding. Tapi karena haroream membuat desain UI/UX, langsung ngoding aja lah. Toh, saya sudah punya gambaran ingin web dengan tampilan seperti apa.

Saya akan membaginya sesuai timeline agar berurutan. Tiap bagian dijelaskan apa saja yang saya buat, masalah dan erornya (jika ada), serta pendekatan yang saya lakukan untuk memecahkan masalah tersebut.

31 Julis 2021 - Instal Hugo

Instal Hugo di local host

Saya belajar dari channel Youtube Kang Hilman dari Sekolah Koding. Tapi di tutorial tersebut Kang Hilman menggunakan Mac. Untuk pengguna Windows, tutorial lengkapnya ada di dokumentasi Hugo .

Instal Theme

Tadinya saya menggunakan salah satu theme yang ada di library. Tapi ada sedikit masalah.

“TOCSS … this feature is not available in your current Hugo version”.

Ini karena theme pilihan saya pakai Sass & Hugo tidak bisa compile CSS. Masalah ini belum bisa saya pecahkan, jadi saya ganti ke theme yang pakai CSS native.

Buat post baru

Belajar membuat post baru menggunakan terminal dan membiasakan diri dengan Markdwon.

1 Agustus 2021 - Membuat Theme Sendiri

Karena tidak ada theme Hugo yang sesuai dan banyak yang sudah deprecated, akhirnya saya memutuskan untuk membuat theme sendiri. Membuat theme Hugo prinsipnya sama dengan ketika membuat theme WordPress . Kalau di WP, ada index.php, header.php, footer.php, single.php. Lalu ada template parts berisi bagian-bagian kecil. Di Hugo juga sama, tapi ekstensi file-nya html.

And the journey begin ….

Karena di tutorial Kang Hilman banyak menggunakan div, saya melakukan pendekatan berbeda agar semantic HTML-nya lebih proper.

Untuk CSS layouting-nya, saya menggunakan Bootstrap. Sekarang tampilannya sudah mulai “beradab”.

2 Agustus 2021 - Menambahkan Kolom Komentar

• Menambahkan kolom komentar menggunakan Disqus
• Menambahkan pagination
• Sudah bisa pakai Markdown. Horeee.

3 Agustus 2021 - Membuat Konten Blog

Memindahkan konten dari Blogspot ke Hugo. Manual karena belum belajar cara konversi XML ke Markdownn. Pun, ingin lebih membiasakan diri cara membuat post baru di Hugo.

So far, tampilannya seperti ini:

---

Ya, sampai sini dulu. Nanti dilanjut ke artikel berikutnya. Oh ya, untuk project personal ini, saya tidak membuat target kapan harus selesai. Sakasampeurna kalau kata urang Sunda mah alias selow aja selow. (eL)