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 Scoop dengan perintah:

       1	scoop install hugo-extended

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

       1	sudo pacman -S hugo

     • Untuk Linux berbasis Debian atau Ubuntu, gunakan file binary yang diunduh dari halaman rilis lalu ekstrak dan pindahkan file binary ke PATH

   • MacOS

     • Instal menggunakan Homebrew dengan perintah:

       1	brew install hugo

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

1

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:

1

hugo new site reza

Project baru akan memiliki struktur direktori dasar seperti berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

  reza/
  ├── archetypes/
  │   └── default.md
  ├── assets/
  ├── content/
  ├── data/
  ├── i18n/
  ├── layouts/
  ├── static/
  ├── themes/
  └── 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 themes.gohugo.io. Misalnya, di tutorial ini menggunakan tema PaperMod.

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

   1 2	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"

Membuat Postingan Website

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

1

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
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---
date = '2025-08-03T14:37:23+07:00'
draft = false
title = 'Judul Postingan'
---

Ini adalah contoh postingan dalam format markdown.

- Item 1
- Item 2

Ini adalah *code* dengan **Go** *syntax highlighting*

'''go
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
'''

Ini adalah [hyperlink](https://eza.web.id)

Menjalankan Server Lokal

Untuk menjalankan server lokal Hugo, gunakan perintah berikut:

1

hugo server -D

Jika tidak ada error, 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.