Linux#

Untuk instalasi Hugo di Linux, kita hanya perlu mengetikkan beberapa perintah di terminal sebagai berikut:

Debian/Ubuntu-based

1
sudo apt install hugo

Fedora-based

1
sudo dnf install hugo

Arch-based

1
sudo pacman -S install hugo

Untuk distro Linux lainnya yang non-Debian/Arch/Fedora-based, tinggal menyesuaikan dengan package manager yang ada di distro tersebut. Yang jelas, yang harus dipastikan adalah bahwa program Hugo yang akan diinstal tersebut tersedia di official repository masing-masing distro.

Setelah proses instalasi selesai, kita dapat memastikan program Hugo sudah terinstall di sistem kita dengan melihat berapa versi Hugo tersebut, melalui perintah berikut:

1
hugo version

Kebetulan di laptop saya, versi yang terinstall adalah Hugo v0.113.0.

1. Membuat website#

Secara sederhana, hanya 6 perintah yang diperlukan untuk menciptakan website Hugo sebagai berikut:

1
hugo new site quickstart
2
cd quickstart
3
git init
4
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/papermod
5
echo "theme = 'papermod'" >> hugo.toml
6
hugo server

Berikut adalah penjelasan baris perbaris dari kumpulan perintah tersebut:

1
hugo new site quickstart

digunakan untuk membuat struktur direktori (directory structure) website kita yang tersimpan dalam folder/direktory quickstart.

1
cd quickstart

masuk ke direktori quickstart yang baru saja dibuat.

1
git init

menginisialisasi direktori quickstart sebagai direktori git.

1
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/papermod

mengkloning tema papermod ke direktori themes, dan menambahkannya sebagai git submodule di project kita.

1
echo "theme = 'papermod'" >> hugo.toml

menambahkan tema papermod di file konfigurasi website, hugo.toml.

1
hugo server

memulai Hugo development server. Default server-nya ada di localhost port 1313. Tekan Ctrl+c untuk menyetop development server-nya.

Tampilan website Hugo yang baru saja kita buat dengan tema papermod:

2. Menambahkan konten#

Untuk menambahkan page baru untuk website Hugo, kita dapat mengetikkan perintah berikut:

1
hugo new post/postingan-pertama.md

Hugo akan membuat file baru bernama postingan-pertama.md di direktori content/post. Buka file tersebut.

Yang perlu diperhatikan adalah value dari draft adalah true. Secara default, Hugo tidak mem-publish konten yang masih berbentuk draft ketika kita mem-build website-nya nanti.Jadi, jika kita ingin konten tersebut terpublikasikan, kita hanya perlu mengganti value draft tadi ke false.

Berikutnya, silakan tambahkan isi postingan tersebut dengan syntax markdown. Misalnya, saya akan tambahkan

1
## Pengenalan
2

3
Halo! Ini adalah teks **tebal**, dan ini adalah teks *miring*.
4

5
Tutorial belajar Hugo bisa langsung ke website [Hugo](https://gohugo.io) ya!

Simpan filenya, kemudian kita dapat memulai server development Hugo-nya dengan perintah berikut (terutama untuk menampilkan file yang masih berupa draft):

1
hugo server --buildDraft
2
hugo server -D

3. Mengkonfigurasi website#

Untuk mengkonfigurasi website, kita dapat membuka file konfigurasi (hugo.toml) di direktory ‘root’ proyek Hugo kita.

1
baseURL = 'http://example.org/'
2
languageCode = 'en-us'
3
title = 'My New Hugo Site'
4
theme = 'papermod'

Kita dapat mengubah value baseURL ke alamat URL dimana kita akan meng-hosting website Hugo kita. Misalnya, saya akan mengganti value baseURL-nya ke ‘https://abwildan.github.io/’ karena nanti saya akan mem-publikasikan website hugo ini di Github. Tapi, untuk sementara, karena kita belum akan mempublikasikan website kita ke manapun, jadi, kita akan meng-comment variabel baseURL ini.

Begitu juga dengan variabel title, kita dapat mengganti value-nya dengan apapun karena itu yang akan menjadi judul website kita dan tampil di pojok kiri atas website. Misalnya, saya akan ganti judul website-nya dengan ‘Website Wildan’.

Untuk melihat perubahan yang sudah dibuat, silakan di-save, dan jalankan perintah seperti sebelumnya:

1
hugo server -D

Maka, semua perubahan tadi akan tampak sebagai berikut:

1
#baseURL = 'https://abwildan.github.io'
2
languageCode = 'en-us'
3
title = 'Website Wildan'
4
theme = 'papermod'

4. Mempublikasikan website#

Ketika kita memublikasikan website, Hugo akan membuat seluruh situs statis di direktori public di root proyek, termasuk file HTML, dan aset seperti gambar, berkas CSS, dan berkas JavaScript.

Ketika memublikasikan website, biasanya kita tidak ingin menyertakan konten draft. Jadi, yang akan di-publish adalah konten yang tidak berstatus draft. Perintahnya sederhana.

1
hugo