Membuat Proyek Hugo Pertama

Setelah lingkungan kerja siap, langkah berikutnya adalah membuat proyek Hugo pertama. Pada bagian ini, kamu akan belajar cara membuat situs baru, memahami struktur direktori, dan menjalankan situs secara lokal.

Membuat Situs Baru

Untuk memulai proyek Hugo, buka terminal atau command line, lalu jalankan perintah:

hugo new site nama-proyek

Contoh:

hugo new site blog-saya

Perintah ini akan membuat folder dengan struktur proyek Hugo secara otomatis.

Struktur Direktori Hugo

Setelah perintah dijalankan, Hugo akan membuat struktur direktori seperti berikut:

blog-saya/
├── archetypes/      # Template konten default  
├── content/         # Tempat menyimpan semua file konten  
├── layouts/         # Template halaman  
├── static/          # File statis seperti CSS, JS, gambar  
├── themes/          # Folder untuk theme  
├── config.toml      # File konfigurasi utama  
└── data/            # File data opsional (JSON, YAML, TOML)  

Penjelasan Struktur Folder:

• archetypes/: Template dasar untuk konten baru, seperti artikel atau halaman.
• content/: Tempat menulis konten situs menggunakan file Markdown.
• layouts/: File template untuk mengatur tampilan halaman.
• static/: Folder untuk aset statis seperti CSS, JavaScript, dan gambar.
• themes/: Menyimpan theme yang digunakan di proyek Hugo.
• config.toml: File konfigurasi utama untuk mengatur situs seperti title, theme, dan lainnya.

Menambahkan Theme ke Proyek

Untuk membuat situs terlihat menarik, tambahkan theme ke dalam proyek. Kamu bisa menggunakan theme yang sudah ada dari Hugo Themes.

Langkah-langkah Menambahkan Theme:

1. Buka direktori proyek:

   cd blog-saya
   

2. Tambahkan theme menggunakan Git Submodule (contoh: theme “ananke”):

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

3. Aktifkan theme dengan mengedit file config.toml:

   theme = "ananke"
   title = "Blog Saya" # Ganti dengan nama situs
   

Menulis Konten Pertama

Buat konten pertama di folder content/ menggunakan perintah:

hugo new posts/halo-dunia.md

Hugo akan membuat file Markdown dengan struktur berikut:

---
title: "Halo Dunia"
date: 2024-06-17T12:00:00+00:00
draft: true
---

Penjelasan Metadata (Front Matter):

• title: Judul konten.
• date: Tanggal pembuatan konten.
• draft: Status konten. Jika true, konten hanya muncul saat mode draft diaktifkan.

Catatan: File akan disimpan di folder content/posts/.

Menjalankan Server Hugo Lokal

Untuk melihat hasil proyek Hugo di browser, jalankan perintah berikut:

hugo server

Output di Terminal:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Buka browser dan akses http://localhost:1313. Situs Hugo kamu akan tampil dengan konten yang sudah dibuat.

Kesimpulan

Membuat proyek Hugo sangat sederhana: inisialisasi situs, tambahkan theme, dan mulai menulis konten. Dengan perintah dasar seperti hugo new dan hugo server, kamu bisa langsung melihat hasilnya di browser. Hugo menawarkan pengalaman pengembangan cepat dan fleksibel, cocok untuk pemula yang ingin membangun situs statis. 🚀