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

       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

1. Membuat project Hugo

Untuk membuat website dengan hugo bisa menggunakan perintah

1
2

hugo new site nama-website
cd nama-website

Project baru akan memiliki struktur direktori dasar sebagai berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── i18n
├── layouts
├── static
├── themes
└── hugo.toml

• content/: Direktori untuk menyimpan kontent seperti posting blog, halaman dan lainnya.
• layouts/: Direktori untuk menyimpan template HTML.
• static/: Direktori untuk menyimpan file statis seperti gambar, CSS dan JavaScript.
• themes/: Direktori untuk menyimpan tema yang akan dipasang.
• hugo.toml: File konfigurasi utama hugo, bisa dalam format JSON, TOML atau YAML.

2. Memilih dan Menerapkan Tema

Hugo menggunakan tema untuk tampilan website. Pilih tema dari https://themes.gohugo.io/. Misalnya, menggunakan tema PaperMod. Di dalam direktori website, jalankan perintah berikut:

1
2

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

Kemudian, edit file hugo.toml dan tambahkan baris berikut:

1

theme = "papermod"

3. Membuat Konten

Konten di Hugo ditulis dalam format Markdown. Untuk membuat postingan baru, gunakan perintah:

1

hugo new posts/judul-postingan.md

Ini akan membuat file Markdown di direktori content/posts/. Buka file tersebut dan tulis konten. Contoh isi file Markdown:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

---
title: "Judul Postingan"
date: 2024-10-27T10:00:00+07:00
draft: true # Ubah menjadi false jika sudah siap dipublikasikan
---

Ini adalah isi postingan.

- List item 1
- List item 2

**Teks tebal**

[Link ke website lain](https://www.example.com)

4. Menjalankan Website Secara Lokal

Untuk melihat tampilan website secara lokal, jalankan perintah:

1

hugo server

Buka browser dan kunjungi http://localhost:1313. Tampilan website akan terlihat. Setiap perubahan pada konten atau tema akan otomatis direfresh di browser.

5. Membangun Website untuk Produksi

Setelah selesai mengembangkan website, bangun website untuk produksi dengan perintah:

1

hugo

Perintah ini akan menghasilkan file-file statis website di direktori public/. Unggah isi direktori public/ ini ke hosting.

Hosting hugo website

Dibawah ini adalah postingan untuk hosting website kita ke firebase:

1. Hosting hugo website ke Firebase