• Teches

Hugo-ing (from Zero to Hero)

Membuat Website via Hugo

Pengenalan singkat tentang Hugo

Hugo adalah framework yang memungkinkan setiap orang untuk membuat dan mengelola website mereka.

Secara teknis, Hugo adalah static site generator. ¹

Secara umum, website dibagi 2: dynamic & static site dan itu disesuaikan dengan kebutuhan atau tujuan dibuatnya website tersebut. Tapi, umumnya, static site memang banyak digunakan sebagai:

• Personal blog posts
• Documentasi pages
• Portofolio pages, dan lain sebagainya.

Instalasi Hugo

Hugo dapat diinstal di sistem operasi apapun, Windows, Mac, atau Linux dapat menginstall Hugo. Tapi, kali ini, karena saya menggunakan Linux sebagai sistem operasi dasar, maka saya hanya akan membatasi instalasi Hugo di Linux saja.

Linux

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

Debian/Ubuntu-based

sudo apt install hugo 

Fedora-based

sudo dnf install hugo 

Arch-based

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:

hugo version

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

Bikin Hugo-site (lima menit)

Tutorial ini akan terbagi menjadi 4 bagian, yaitu Membuat website,menambahkan konten, mengkonfigurasi website, mempublikasikan website².

Sebagai prasyarat keberhasilan, versi Hugo yang terinstall harus yang extended edition, v0.112.0 atau yang terbaru.

Kita akan banyak menggunakan perintah atau command via terminal untuk mengoperasikan Hugo. Pengetahuan tentang basic git juga diperlukan.

1. Membuat website

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

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

Berikut adalah penjelasan baris perbaris dari kumpulan perintah tersebut:

hugo new site quickstart

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

cd quickstart

masuk ke direktori quickstart yang baru saja dibuat.

git init

menginisialisasi direktori quickstart sebagai direktori git.

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.

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

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

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:

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

## Pengenalan

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

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):

hugo server --buildDraft
hugo server -D

3. Mengkonfigurasi website

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

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
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:

hugo server -D

Maka, semua perubahan tadi akan tampak sebagai berikut:

#baseURL = 'https://abwildan.github.io'
languageCode = 'en-us'
title = 'Website Wildan'
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.

hugo