Cara Membuat Website Statis dengan Hugo untuk Pemula

Apa itu Hugo?

Hugo adalah framework generator situs statis yang ditulis dalam bahasa Go. Hugo memproses file Markdown menjadi halaman HTML statis yang dapat diakses dengan kecepatan tinggi. Keunggulannya meliputi kecepatan pembuatan, fleksibilitas, dan skalabilitas.

Panduan ini menjelaskan langkah-langkah membuat website menggunakan Hugo, mulai dari instalasi hingga proses publikasi. Cocok untuk pemula yang mencari solusi untuk membuat website yang ringan, cepat, dan mudah dikelola.

Website Hugo dapat di-deploy ke Firebase (seperti website ini), selain itu juga bisa dihosting melalui platform lain seperti GitHub, GitLab, atau Netlify.

Install Hugo Extended

Sebelum memulai pembuatan website dengan Hugo, pastikan Hugo sudah terinstal di sistem.

1. Unduh Hugo versi terbaru dari github.com/gohugoio/hugo/releases.

2. Disarankan untuk mengunduh versi extended, karena beberapa tema hanya mendukung versi tersebut.

3. Instalasi untuk berbagai sistem operasi:

   • Windows

     • Install menggunakan Winget dengan perintah:

       winget install --id=Hugo.Hugo.Extended  -e

     • Atau, gunakan file binary yang diunduh dari halaman rilis. Ekstrak dan pindahkan file binary ke PATH.

   • Linux

     • Jika menggunakan distribusi berbasis Arch, gunakan perintah berikut untuk menginstal Hugo Extended:

       sudo pacman -S hugo

     • Untuk Linux berbasis Debian atau Ubuntu, gunakan file binary yang diunduh dari halaman rilis.
     • Catatan: Pastikan untuk mengunduh hugo_extended_$VERSION_linux-$ARCH.deb
       (Tidak direkomendasikan untuk versi LTS, direkomendasikan untuk linux yang berbasis rolling releases, seperti Debian Sid)
     • Untuk distro lainnya bisa mengunduh hugo_extended_$VERSION_linux-$ARCH.tar.gz. Ekstrak dan pindahkan file binary ke PATH. (Direkomendasikan untuk versi LTS)

   • MacOS

     • Instal menggunakan Homebrew dengan perintah:

       brew install hugo

4. Setelah instalasi selesai, verifikasi apakah Hugo telah terpasang dengan benar. Jalankan perintah berikut:

hugo version

Membuat Website Dengan Hugo

Untuk membuat website menggunakan hugo, pertama harus membuat project hugo terlebih dahulu. Berikut langkah-langkahnya:

Membuat project Hugo

Untuk membuat poject hugo bisa menggunakan perintah hugo new site nama_project. Contoh:

hugo new site reza

Project baru akan memiliki struktur direktori dasar seperti berikut:

1
.
2
├── archetypes
3
│   └── default.md
4
├── assets
5
├── content
6
├── data
7
├── i18n
8
├── layouts
9
├── static
10
├── themes
11
└── hugo.toml

• content/ : berisi konten website dalam format markdown.
• data/ : berisi data tambahan yang digunakan dalam website.
• layouts/ : berisi template HTML untuk website.
• static/ : berisi file statis seperti gambar, CSS, dan JS.
• themes/ : berisi tema yang digunakan dalam website.
• hugo.toml : berisi konfigurasi website.

Menginstall dan Menambahkan Tema

Hugo menggunakan tema untuk tampilan website. Pilih tema dari https://themes.gohugo.io/. Misalnya, di tutorial ini menggunakan tema PaperMod.

1. masuk ke direktori project hugo cd reza, lalu jalankan perintah dibawah ini.

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

   git init digunakan untuk membuat repository git baru, sedangkan git submodule add digunakan untuk menambahkan tema PaperMod ke dalam project hugo.

2. Perbarui file hugo.toml untuk menggunakan tema tersebut:

   1
   theme = "PaperMod"

3. Jika tema memerlukan konfigurasi tambahan, ikuti panduan yang tersedia di dokumentasi tema.

Membuat Postingan Website

Semua postingan website hugo terdapat di folder content/post atau content/posts. Untuk menambahkan postingan baru, gunakan perintah berikut:

hugo new posts/judul-postingan.md

Perintah diatas akan membuat file markdown baru di folder content/posts dengan nama judul-postingan.md. Edit file markdown tersebut sesuai dengan kebutuhan artikel yang akan ditulis.

1
---
2
title: 'Judul Postingan'
3
date: 2025-01-28T10:00:00+07:00
4
draft: true # Ubah menjadi false jika sudah siap dipublikasikan
5
---
6

7
Ini adalah isi postingan.
8

9
- List item 1
10
- List item 2
11

12
**Teks tebal**
13

14
[Eza](https://eza.web.id)

Menjalankan Server Lokal

Untuk menjalankan server lokal Hugo, gunakan perintah berikut:

hugo server -D

Sekarang, buka browser dan akses http://localhost:1313 untuk melihat website yang sedang dibuat. Setiap perubahan yang dilakukan pada file markdown akan langsung terlihat pada server lokal dan browser akan refresh otomatis.

Publikasi Website

Setelah selesai mengkonfigurasi project hugo, postingan, dan tema, website siap untuk dipublikasikan.
Untuk itu project perlu di-generate terlebih dahulu dengan perintah:

hugo

Untuk menghasilkan website statis yang siap di-deploy. File hasil generate akan berada di folder public.
Folder public dapat di-deploy ke berbagai platform hosting seperti Firebase, GitHub Pages, Netlify, dll.

Hosting Website Statis Berbagai Platform

Kesimpulan

Dengan menggunakan Hugo, dapat membuat website statis yang cepat, ringan, dan mudah dikelola. Panduan ini memberikan langkah-langkah dasar untuk memulai, mulai dari instalasi hingga publikasi. Selamat mencoba dan semoga berhasil!