
Untuk mulai membuat blog dengan hugo sebenarnya sangat sederhana, ada beberapa tahapan inti di tutorial kali ini yang akan saya bahas.
Dimulai dari persiapan, tahapan menginstall hugo, memahami perintah dasar penggunaan hugo, hingga memasang tema untuk blog dan menjalankan blog di web browser.
Persiapan & Installasi
Hugo akan menjadi engine untuk blog kita dimana hugo akan memanajemen konten, melakukan proses build bagian-bagian blog, dan menjalankan proses livereload pada browser saat kita membangun blog.
Hugo dapat dijalankan di sistem operasi seperti:
- macOS (Darwin) for x64, i386, and ARM architectures
- Windows
- Linux
- OpenBSD
- FreeBSD
Untuk dapat menginstall hugo, sebenarnya ada beberapa metode yang dapat digunakan, akan tetapi saya lebih merekomendasikan menggunakan metode dengan Package manager karena lebih mudah dipahami. Sederhananya adalah memudahkan kita untuk melakukan install atau ketika suatu saat kita akan memperbarui hugo ke versi terbaru.
Sedikit tips, kalian wajib menginstall
Git di sistem kalian karena kita akan sering menggunakan git baik untuk melakukan clone tema hingga melakukan deploy blog ke repository. Jalankan perintah berikut untuk mengetahui apakah Git sudah terinstall di sistem.
git --version
Lanjut! Kita harus menginstall Package manager terlebih dahulu. Package manager yang akan digunakan berbeda-beda di setiap sistem operasi. Saat menginstall Package manager pastikan koneksi internet dalam keadaan stabil.
Windows
Package manager yang dapat kalian gunakan untuk menginstall hugo di sistem operasi Windows adalah Chocolatey atau Scoop. Kalau kalian sudah menginstall salah satu dari Package manager diatas, buka Command Prompt As Administrator dan jalankan perintah berikut untuk menginstall Hugo.
Chocolatey:
choco install hugo -confirm
Atau versi extended dari Hugo yang memungkinkan kalian menggunakan versi Sass/SCSS:
choco install hugo-extended -confirm
Scoop:
scoop install hugo
Versi extended untuk Sass/SCSS:
scoop install hugo-extended
MacOS & Linux
Untuk sistem operasi macOS atau Linux, package manager yang saya sarankan adalah Homebrew, saya sendiri juga sering menggunakan package manager ini untuk menginstall software open-source lainnya.
Petunjuk install Homebrew untuk MacOS dan Linux dapat dibaca disini.
Oke, setelah package manager terinstall, jalankan perintah berikut di terminal Linux atau MacOS kalian.
brew install hugo
Membuat Blog Hugo
Oke, sampai di tahapan ini saya anggap proses Installasi Hugo sudah selesai.
Untuk memudahkan proses kalian dalam memanajemen struktur folder sehingga tidak tercampur dengan file-file atau folder-folder yang tidak ada hubungannya dengan proyek kalian, saya sangat menyarankan membuat folder khusus untuk menyimpan proyek Hugo kalian.
Setelah folder selesai dibuat, masuk ke direktori tersebut dengan CMD atau terminal dan ketikkan perintah berikut:
hugo new site namablogkamu
- Perintah untuk membuat project baru
Maka secara otomatis Hugo akan men-generate struktur direktori dan file sebagai berikut didalam folder blog kalian.
- Struktur Direktori Blog Hugo
Memasang Tema Hugo
Sampai tahapan ini sebenarnya blog sudah bisa dijalankan di web browser, akan tetapi karena konten didalamnya masih kosong, maka hanya halaman kosong yang akan tampil di browser.
Oleh karena itu kita perlu melakukan kustomisasi blog dengan memasang tema yang bisa dipilih di halaman tema hugo.
Sebagai contoh, saya akan menggunakan Paper sebagai tema untuk blog yang saya buat. Langkahnya adalah melalui CMD atau terminal kalian, masuk ke direktori namablogkamu/themes
yang ada didalam blog hugo kalian, kemudian clone repo temanya dengan perintah berikut.
git clone https://github.com/nanxiaobei/hugo-paper.git
- Perintah untuk clone tema
Setelah proses clone selesai, maka folder tema akan berisi dengan folder tema yang sudah di clone tadi.
- Clone tema berhasil
Setelah selesai melakukan clone, copy file config.toml
yang ada di direktori namablogkamu/themes/hugo-paper/exampleSite/config.toml
kemudian paste & replace file config.toml
ke direktori namablogkamu/config.toml
Agar konten postingan didalamnya tidak kosong, maka salin juga folder content yang ada didalam exampleSite kemudian paste dan replace namablogkamu/content
, maka blog kamu sudah memiliki contoh artikel.
Mengakses Blog Secara Lokal
Agar kalian dapat mengakses blog secara lokal melalui localhost di web browser, jalankan perintah berikut.
Hugo server
Ketikkan localhost:1313
di web browser kalian, dan jika tidak ada masalah maka blog kalian sudah dapat dijalankan secara lokal dengan tema yang sudah di download sebelumnya.
