Instalasi dan Setup

Dalam modul ini, kita akan mempelajari cara menginstal Hugo di sistem Anda dan setup proyek pertama.

Instalasi Hugo

1. Menggunakan Package Manager

macOS (dengan Homebrew)

1

brew install hugo

Windows (dengan Chocolatey)

1

choco install hugo-extended

Linux (Ubuntu/Debian)

1

sudo apt-get install hugo

2. Instalasi Manual

Jika package manager tidak tersedia, Anda dapat mengunduh Hugo langsung dari hugo.io.

Verifikasi Instalasi

Setelah instalasi, verifikasi bahwa Hugo terinstal dengan benar:

1

hugo version

Anda akan melihat output seperti:

1

hugo v0.120.0-47b12b83+extended darwin/amd64 BuildDate=2023-12-06T10:23:09Z VendorInfo=gohugoio

Membuat Proyek Pertama

1. Membuat Site Baru

1
2

hugo new site my-website
cd my-website

2. Struktur Direktori

Setelah membuat site, Anda akan melihat struktur direktori seperti ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

my-website/
├── archetypes/
├── assets/
├── content/
├── data/
├── layouts/
├── public/
├── static/
├── themes/
└── config.toml

3. Menambahkan Theme

Hugo memerlukan theme untuk berfungsi. Anda dapat menambahkan theme dengan:

1
2

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

4. Konfigurasi Theme

Edit file config.toml dan tambahkan:

1

theme = "ananke"

Menjalankan Server Development

1. Menjalankan Server

1

hugo server -D

2. Mengakses Website

Buka browser dan kunjungi http://localhost:1313

3. Fitur Live Reload

Hugo server memiliki fitur live reload yang akan otomatis memperbarui browser ketika Anda mengubah file.

Membuat Konten Pertama

1. Membuat Post Baru

1

hugo new posts/my-first-post.md

2. Edit Konten

Buka file content/posts/my-first-post.md dan edit:

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

---
title: "My First Post"
date: 2024-01-15T10:00:00+00:00
draft: false
---

# My First Post

Ini adalah post pertama saya dengan Hugo!

## Subtitle

Konten dapat ditulis dalam format Markdown.

Build Website

1. Build untuk Production

1

hugo

2. Hasil Build

File website akan di-generate di folder public/

Tips dan Best Practices

1. Gunakan Hugo Extended

Untuk fitur yang lebih lengkap, gunakan Hugo Extended yang mendukung SCSS/SASS.

2. Organisasi File

• Simpan konten di folder content/
• Template di folder layouts/
• Asset statis di folder static/

3. Version Control

Selalu gunakan Git untuk mengelola proyek Hugo Anda.

Troubleshooting

1. Hugo tidak ditemukan

Pastikan Hugo terinstal dengan benar dan PATH sudah dikonfigurasi.

2. Theme tidak muncul

Pastikan theme sudah diinstal dan dikonfigurasi di config.toml

3. Server tidak berjalan

Periksa apakah port 1313 sudah digunakan oleh aplikasi lain.

Persiapan untuk Modul Selanjutnya

Sekarang Anda sudah memiliki Hugo terinstal dan proyek pertama yang berjalan. Dalam modul selanjutnya, kita akan mempelajari struktur proyek Hugo secara lebih detail.