Diantara kalian pasti sudah tidak asing lagi dengan berbagai platform blogging yang sudah ada, seperti Blogger (blogspot), WordPress, Tumblr, dan yang lainnya. Dari beberapa platform tersebut, yang memiliki banyak pengguna adalah Blogger dan WordPress. Bahkan, saya-pun masih menggunakan platform Blogger untuk blogging dengan domain lain. Bagaimana dengan WordPress? WordPress juga memiliki platform sendiri yang beralamat wordpress.com. Sebagai platform blogging, keduanya menurut saya cukup bagus. Namun WordPress memiliki kelebihan tersendiri dengan CMS-nya, yang mana penggunanya lebih bisa leluasa dengan pengaturan konten yang ada di blognya. WordPress versi CMS sendiri bisa diunduh secara gratis pada alamat wordpress.org. Dan pada kesempatan kali ini, saya akan membahas cara membuat blog namun bukan pada kedua platform tersebut, namun dengan Hugo.

Hugo merupakan sebuath CMS untuk membuat static site. Kebanyakan pegiat IT seperti saya sudah tidak asing dengan static site, karena biasanya kami membuat portofolio dan meng-hostingnya di Github. Mungkin dari sini awal mula berkembangnya trend penggunaan static site yang sebelumnya hanya mencangkup dokumentasi, hingga kini merambah dalam blog. Penggunaan Hugo untuk blogging cukup simpel menurut saya, karena format yang digunakan adalah markdown. Hal ini pasti sudah tidak asing bagi kalian yang menggeluti dunia IT. CMS Hugo sendiri mungkin lebih banyak penggunanya dari para developer, maka dari itu pastikan sudah memiliki Git sebelum membuat blog dengan Hugo. Jadi saya tidak merekomendasikan bagi kalian yang awam dengan koding.

Instal Hugo

Untuk menginstal Hugo cukup mudah, namun saya akan menggunakan cara yang paling mudah yaitu dengan menggunakan binary (hasil compile) dari Hugo. Kita bisa men-downloadnya sesuai platform yang kita gunakan. Pada tutorial ini, saya menggunakan sistem operasi Windows 10. Bila dari kalian menggunakan OS yang berbeda, bisa menyesuaikan. Pada saat tulisan ini dibuat, versi terbaru dari Hugo adalah versi 0.79.0.

Berikut adalah cara instalasi Hugo

  • Masuk ke daftar rilis Hugo di Github di https://github.com/gohugoio/hugo/releases.

  • Kemudian pilih sesuai OS yang digunakan dan extract ke folder kosong.

    Karena saya menggunakan Windows 10, maka saya memilih hugo_0.79.0_Windows-64bit.zip. Daftar rilis hugo

  • Buka command prompt (CMD) pada folder tersebut.

  • Masukkan perintah berikut untuk membuat blog baru, secara otomatis Hugo akan meng-generate file yang dibutuhkan untuk membuat blog. Hasil Generate Hugo

hugo new site . --force

Sampai disini, Hugo sudah terinstal dengan baik.

Instal Tema Hugo

Untuk pilihan tema yang bisa dipakai, bisa dilihat di https://themes.gohugo.io/. Sebagai contoh, saya akan menggunakan tema ghostwriter.

Instal Tema dengan Git

Instal tema dengan perintah berikut menggunakan git

git clone https://github.com/jbub/ghostwriter.git themes/ghostwriter

Konfigurasi Penggunaan Tema

Konfigurasi tema yang dipakai pada file config.toml yang ada di root directory. Sehingga isi dari config.toml kurang lebih akan seperti ini dan jangan lupa untuk mengatur kode konfigurasi tersebut sesuai blog kalian.

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ghostwriter"

Cek Penggunaan Tema

Instalasi tema sudah berhasil, cek hasil instalasi tema dengan perintah

hugo server

Secara default, kita bisa mengaksesnya melalui http://localhost:1313/

Membuat Postingan di Hugo

Untuk membuat postingan di Hugo cukup mudah, cukup dengan perintah hugo new post/<slug dari postingan>.md. Sebagai contoh, gunakan perintah berikut:

hugo new post/hello-world.md

Hugo secara otomatis akan membuat file ke folder content/post/ berdasarkan isi dari file yang ada di archetypes/default.md. Secara default file yang digenerate berisi seperti ini:

---
title: "Hello World"
date: 2020-12-13T08:48:40+07:00
draft: true
---

Jadi apabila ingin menambahkan hal lain agar muncul saat membuat postingan, kita atur pada file archetypes/default.md ini.

Pada tutorial ini, maka hugo meng-generate file bernama hello-world.md yang merupakan file untuk mengisi postingan pada blog yang kita buat. Coba ubah isi file tersebut dengan menghapus draft: true atau diganti dengan draft: false, dan isi di baris paling bawah dengan isi dari postingan yang dibuat.

Berikut adalah isi dari file hello-world.md yang sudah saya ubah:

---
title: "Hello World"
date: 2020-12-13T08:48:40+07:00
draft: false
---

Halo semua, ini merupakan postingan pertama saya.

Berikut penampakan setelah pembuatan postingan di Hugo. Halaman depan: Tampilan halaman depan

Halaman posting: Tampilan halaman post

Tambahan, saat meng-compile halaman hugo tidak akan menggenerate postingan yang memiliki draft: true. Jadi kalau kalian sudah selesai dalam membuat postingan, ganti draft: true dengan draft: false atau dihapus saja. Namun bila saat membuat postingan ingin melihat dari tulisan yang dibuat dalam keadaan draft: true, bisa dengan perintah hugo server --buildDrafts atau cukup dengan hugo server -D.

Deploy / Hosting Hugo

Tahap terakhir yaitu bagaimana cara mendeploy atau meng-hostingkan static file yang dibuat oleh Hugo. Tahap ini akan saya publish di lain waktu karena hal ini bersifat teknis dan static site sendiri bisa di-hosting ke banyak provider seperti Github, Gitlab, Firebase, dan masih banyak lainnya. Jadi nanti akan saya perbaharui tulisan ini sehingga kalian bisa memilih akan mendeploy blog kalian sesuai ke hosting provider yang kalian kehendaki.

Berikut adalah cara untuk menghostingkan static site Hugo:

Penutup

Demikian tulisan saya mengenai cara membuat blog menggunakan Hugo. Tulisan ini mungkin sedikit sulit untuk dipahami, maka dari itu bakal ada berbagai perubahan pada tulisan ini agar lebih nyaman dibaca dan mudah dipahami.