Mengelola Konten di Hugo
Setelah proyek Hugo berhasil dibuat dan dijalankan, langkah berikutnya adalah belajar bagaimana menambahkan dan mengelola konten di situs menggunakan Markdown serta menyusun konten dengan baik menggunakan kategori dan tag.
Apa itu Markdown dan Bagaimana Menulis Konten Menggunakan Markdown
Markdown adalah bahasa markup ringan yang digunakan untuk menulis teks yang mudah dibaca dan dikonversi ke format HTML. Dalam Hugo, konten seperti artikel atau halaman ditulis menggunakan file Markdown dengan ekstensi .md.
Sintaks Dasar Markdown
Berikut beberapa sintaks Markdown yang sering digunakan di Hugo:
| Fungsi | Sintaks | Contoh |
|---|---|---|
| Heading | #, ##, ###, dst. |
## Ini adalah Heading 2 |
| Bold (tebal) | **teks** |
**Teks Tebal** |
| Italic (miring) | *teks* |
*Teks Miring* |
| Link | [teks](url) |
[Google](https://google.com) |
| Gambar |  |
 |
| Daftar Berurut | 1., 2., 3. |
1. Item pertama |
| Daftar Tidak Berurut | -, * |
- Item pertama |
| Kode Inline | `code` |
code |
| Blok Kode | ```bahasa-kode\nteks\n``` |
```bash\nhugo server\n``` |
Contoh Konten Markdown
---
title: "Halo Dunia"
date: 2024-06-17T12:00:00+00:00
tags: ["panduan", "hugo"]
categories: ["Tutorial"]
draft: false
---
## Selamat Datang di Situs Hugo
Ini adalah contoh konten pertama di Hugo.
### Fitur Utama
- Ringan
- Cepat
- Mudah digunakan
[Kunjungi Hugo](https://gohugo.io)
Membuat Halaman dan Postingan Baru
Untuk membuat konten di Hugo, gunakan perintah:
hugo new [path/ke/file.md]
1. Membuat Postingan Baru
hugo new posts/artikel-pertama.md
Output:
File artikel-pertama.md akan dibuat di dalam folder content/posts/.
2. Membuat Halaman Baru
Untuk membuat halaman di luar postingan, misalnya halaman “Tentang Kami”:
hugo new tentang.md
Output:
File tentang.md akan dibuat di dalam folder content/.
Menambahkan Metadata dengan Front Matter
Front Matter adalah bagian metadata yang ditulis di bagian atas file Markdown. Metadata ini digunakan Hugo untuk mengatur properti konten seperti judul, tanggal, status draf, kategori, dan tag.
Front Matter bisa ditulis dalam format YAML, TOML, atau JSON.
Contoh Front Matter (YAML):
---
title: "Artikel Pertama Saya"
date: 2024-06-17T12:00:00+00:00
draft: false
tags: ["Hugo", "Markdown"]
categories: ["Tutorial"]
---
| Properti | Deskripsi |
|---|---|
title |
Judul halaman atau postingan. |
date |
Tanggal pembuatan konten. |
draft |
Status konten (true untuk draf). |
tags |
Daftar tag untuk konten. |
categories |
Kategori utama konten. |
Catatan:
- Konten dengan
draft: truetidak akan muncul di situs produksi. - Properti
tagsdancategoriesmembantu menyusun konten.
Menyusun Konten dengan Kategori dan Tag
Kategori dan tag digunakan untuk mengorganisir konten agar lebih mudah dinavigasi oleh pengguna
a. Menambahkan Kategori dan Tag di Front Matter
Tambahkan properti tags dan categories di Front Matter seperti berikut:
---
title: "Tutorial Hugo"
date: 2024-06-17
categories: ["Panduan"]
tags: ["Hugo", "Pemula"]
---
- Kategori bersifat lebih umum, misalnya: Panduan, Blog, Berita.
- Tag bersifat lebih spesifik, misalnya: Hugo, Markdown, Static Site.
b. Menyusun Konten di Folder
Untuk menjaga struktur proyek rapi, letakkan konten di dalam subfolder seperti posts/ atau kategori/. Contoh struktur:
content/
├── posts/
│ ├── artikel-pertama.md
│ ├── artikel-kedua.md
├── tutorials/
│ ├── hugo-pemula.md
├── tentang.md
c. Menampilkan Kategori dan Tag di Template
Untuk menampilkan daftar kategori atau tag pada halaman situs, gunakan variabel Hugo dalam file template. Contoh:
<p>Kategori: {{ .Params.categories }}</p>
<p>Tags:
{{ range .Params.tags }}
<span>{{ . }}</span>
{{ end }}
</p>
Kesimpulan
Mengelola konten di Hugo mudah dan efisien berkat dukungan Markdown untuk menulis teks, Front Matter untuk metadata, dan fitur kategori serta tag untuk mengorganisir konten. Dengan memahami sintaks Markdown dan perintah dasar Hugo, kamu bisa mulai menulis artikel atau halaman dengan cepat dan terstruktur. 🚀