Membuat Static Web Menggunakan Hugo

Hugo itu apa?

Hugo adalah salah satu Static Site Generator (SSG) yang ditulis menggunakan bahasa Go (aka Golang). Hugo termasuk salah satu SSG yang populer dan memungkinkan kita untuk membuat website yang cepat dan responsif. Dengan build dan load yang cepat, serta struktur file yang sederhana, Hugo menjadi pilihan yang ideal untuk membangun website statis yang menarik.

Kali ini, saya akan memberikan tutorial langkah demi langkah dalam membuat website menggunakan Hugo. Dari mengenal konsep dasar Hugo, menginstal perangkat lunak yang diperlukan, hingga mempersiapkan local development environment. Selanjutnya, kita akan pelajari struktur direktori Hugo dan memberikan penjelasan tentang cara membuat konten dan tata letak website kita.

Setelah kita menguasai dasar-dasar pembuatan konten dan tata letak di Hugo, maka next kita bahas topik yang lebih lanjut, termasuk penggunaan tema, pengaturan konfigurasi website, dan penyesuaian halaman statis.

Perlu diketahui, web saya ini menggunakan Hugo dan saya push ke Github untuk mempermudah dalam mem-publish. Adapun untuk hosting, saya tempatkan di Cloudflare tanpa memerlukan biaya langganan atau bulanan.

Menyiapkan Local Development

Untuk installasi awal, kita bisa buka halaman resmi dari Hugo di https://gohugo.io/installation/ Install dan sesuaikan dengan Sistem Operasi atau mesin yang kita gunakan di perangkat kita

Dalam hal ini saya menggunakan MacOS dan install menggunakan Package Manager yaitu homebrew. Maka saya jalankan perintah berikut di aplikasi terminal bawaan MacOS:

brew install hugo

Perintah di atas akan menginstall versi extended edition dari Hugo. Tunggu dan pastikan installasi berjalan dan berhasil. Untuk memastikan apakah installasi berhasil, bisa menggunakan perintah berikut di terminal:

hugo version

Jika aplikasi menampilkan versi dari Hugo, berarti installasi sudah ok dan kita bisa menggunakan local komputer kita untuk membuat Static Web menggunakan Hugo