Hugo : Generator Web Statik Berbasis Golang

Hugo merupakan generator web statik menggunakan bahasa golang. Statik disini dalam artian tidak menggunakan database, melainkan berupa flat file. Web yang dihasilkan dari hugo memiliki kecepatan akses yang cepat, dan penggunaannya cukup sederhana dan mudah dikonfigurasi. Bahkan karena menggunakan bahasa golang, dikatakan lebih cepat dibanding generator web statik lainnya.

Hugo membagi web yang dihasilkan berupa content dan template, lalu men-render-nya menjadi html. Hugo menggunakan file format markdown. Generator dilakukan melalui command di terminal. Namun mudah untuk di implementasikan. Hugo dapat di implementasikan untuk membuat web blog, company profile atau dokumentasi.

Install Hugo

Hugo dikembangkan golang, maka hugo bisa digunakan pada windows, linux dan mac. Dengan perbedaan platform, maka cara instalasi pun berbeda. Disini saya akan memberikan info instalasi dilakukan di linux.

Hugo dapat install melalui snap. Selama linux distribusi anda sudah memiliki snap, maka melalui snap anda dapat menginstall hugo

snap install hugo

jika anda menggunakan ubuntu dan turunannya, anda dapat menginstall langsung melalui apt-get

apt-get install hugo

selain melalui tool package manager, cara sulitnya bisa melakukan kompilasi dari source code. Karena biasanya, jika menginstall melalui package manager tidak akan menjamin akan mendapatkan versi terbaru.

Untuk memverifikasi hugo sudah berhasil di install, adalah dengan menjalankan perintah hugo untuk mengetahui versi hugo yang digunakan.

hugo -v

jika anda berhasil mendapatkan respon berupa versi hugo, maka hugo sudah bisa digunakan.

Memulai Hugo

Untuk memulai menggunakan hugo, maka kita perlu membuat project site baru.

hugo new site webbaru

dengan menjalankan perintah diatas, maka akan membuat direktori baru dengan nama webbaru.

Konfigurasi

setelah berhasil membuat project baru. Konfigurasi bisa diset pada file config.toml, anda perlu melakukan konfigurasi atas web tersebut, seperti url, judul web, seperti :

baseURL = "https://example.org/"
languageCode = "en-us"
title = "web baru hugo"

Menginstall theme

Langkah selanjutnya adalah kita perlu menentukan theme yang ingin digunakan, karena secara default hugo tidak memiliki theme sama sekali. Tapi jangan khawatir karena hugo menyediakan banyak pilihan theme yang bisa digunakan.

Oh ya, untuk meng-install theme ini, pastikan pada mesin anda sudah tersedia git. Rasanya tidak mungkin anda sebagai programmer tidak menggunakan git saat ini 🙂

Untuk pilihan theme bisa dilihat di https://themes.gohugo.io/

Anda bisa langsung menginstall semua theme yang tersedia untuk hugo

git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes

atau install satu theme saja, dengan melalui link theme tersebut. Pindahkan terminal anda ke dalam direktori theme yang terdapat didalam proyek web yang baru dibuat.

cd themes
git clone URL_TO_THEME

penggunaan theme ini bisa dilakukan melalui dua cara. Melalui command diterminal atau diset melalui file konfigurasi.

theme = theme-name

melalui terminal

hugo -t themename

untuk testing hasil instalasi theme kita bisa langsung menjalankan web

hugo server

jika anda menggunakan localhost, maka di browser anda lansung menjalankan localhost dengan port 1313

localhost:!313

tapi jika melalui server seperti vps, maka perlu mendefinisikan alamat url

hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/

jika tidak ada kendala, maka anda bisa melihat web dengan theme yang digunakan tanpa content.

Membuat halaman dan content

Untuk membuat halaman sangat mudah, misal kita membuat halaman about

hugo new about.md

lalu dengan format markdown untuk isi halaman about tersebut

+++
categories = ["page"]
date = "2018-04-19T16:58:58-05:00"
title = "about"

+++

setting atau metadata yang digunakan, disebut juga “front matter”. Selain front matter diatas, ada beberapa tambahan front matter yang bisa ditambahkan

• date: tanggal yang digunakan
• description: deskripsi dari halaman
• draft: akan menjadi draft jika di set menjadi true
• slug: silahkan set ini jika anda ingin menggunakan slug kustom sendiri
• publishdate: ini bisa diset jika anda ingin dipublish akan datang
• title: judul halaman

selanjutnya mari kita isi halaman about tersebut. Kita tambahkan setelah “+++”, menjadi seperti ini

+++
categories = ["page"]
date = "2018-04-19T16:58:58-05:00"
title = "about"

+++

Hai selamat datang!

## Ini tentang saya

hobi saya menulis

Menulis post

untuk membuat postingan, pada dasarnya sama seperti membuat halaman

hugo new post/HelloWorld.md

maka akan ditambahkan didalam direktoru posts. Untuk mengeditnya sama seperti membuat halaman

+++
categories = ["misc"]
date = "2018-04-19T17:52:41-05:00"
title = "Hallo dunia"

+++

Halo, ini tulisan pertama saya

Untuk melihat hasil content, dapat menjalankan seperti mencoba theme

hugo server

ketika menjalankan perintah diatas, hugo akan membuat direktori public. Dalam setiap melakukan perubahan content, anda perlu menghapus direktori public terlebih dahulu, lalu jalanakn hugo server.

Untuk tahu lebih banyak silahkan langsung menuju https://gohugo.io/