Hugo Blog: Mengelola Konten Blog dengan Struktur yang Rapi

Setelah mencoba Hugo untuk pertama kali (My First Post) dan bereksperimen dengan tampilan menggunakan Tailwind CSS, satu hal yang mulai terasa penting adalah bagaimana mengelola blog secara lebih rapi dan berkelanjutan.

Menggunakan Hugo sebagai blog bukan cuma soal membuat website statis yang cepat, tapi juga tentang bagaimana mengelola konten blog dengan struktur yang rapi dan scalable. Hugo menyediakan sistem yang fleksibel untuk mengatur artikel, halaman, dan layout blog sesuai kebutuhan.

Disini saya akan sedikit membahas mengenai tahap lanjutan dalam menggunakan Hugo sebagai blog: membuat pages blog, mengatur layout list dan single post, serta menyusun struktur konten yang masuk akal untuk jangka panjang.

Struktur Blog di Hugo

Di awal menggunakan Hugo, khususnya pada pages blog terasa lebih sederhana: cukup membuat file Markdown di folder content. Namun, seiring bertambahnya tulisan, saya mulai menyadari bahwa Hugo sebenarnya menyediakan konsep blog yang cukup matang, asalkan strukturnya dimanfaatkan dengan benar.

Secara default, Hugo menggunakan folder content sebagai pusat semua konten. Untuk blog, biasanya struktur yang digunakan seperti ini:

content/
├── blog/
│   ├── my-first-post.md
│   ├── hugo-tailwind.md
│   └── hugo-blog.md
├── about/
│   └── index.md
├── projects/
│   ├── my-first-project.md
│   ├── nama-project-1.md
│   └── nama-project-2.md
└── contact/

Setiap file Markdown di dalam folder blog akan dianggap sebagai artikel blog. Folder ini otomatis menjadi sebuah section bernama blog.

Nah keuntungan dr pendekatan ini apa?

• Ya pastinya struktur konten mudah dipahami
• URL blog akan konsisten (namadomain/blog/judul-artikel)
• Mudah dikembangkan ke kategori atau seri tulisan

Membuat Pages Blog Secara Manual

Saat mau menulis artikel baru, biasanya saya tidak langsung membuat file kosong. Hugo menyediakan perintah: hugo new blog/judul-artikel.md

Perintah ini akan:

• Membuat file Markdown
• Mengisi front matter default
• Menempatkan artikel langsung di section blog

Ini sangat membantu menjaga konsistensi dalam penulisan blog kita.

Lalu Bagaimana Mengatur Front Matter untuk Artikel Blog?

Nah untuk membuat artikel blog, kita perlu menggunakan setup Front Matter di bagian atas file Markdown. Apa itu Front matter? Front matter ini adalah bagian penting dalam setiap halaman blog. Selain judul dan tanggal, biasanya saya gunakan untuk kebutuhan SEO dan pengelompokan konten. Singkatnya mah, Front matter ini berfungsi sebagai metadata pada artikel. Contoh sederhana:

---
title: "Hugo Blog"
date: 2024-01-01
draft: false
tags: ["hugo", "blog"]
categories: ["web development"]
authors: ["aboedhiprasojo"]
---

Fungsi front matter buat apa?

• Yang pasti untuk mengontrol status publish atau (draft) pada artikel kita
• Bisa untuk mengelompokkan artikel berdasarkan tags & categories
• Membantu SEO melalui title dan metadata

Awas, hati-hati ketika mau setup draft konten kalian.

Jika draft konten artikel blog kalian masih dalam kondisi True maka artikel kalian tidak akan muncul di halaman daftar artikel blog, tidak ikut ter-build, dan tidak bisa diakses di website publik. Nah, untuk memunculkan artikel blog, kalian ubah menjadi False ya.

Contoh front matter artikel yang belum dipublikasikan:

Agar artikel blog bisa tampil di website, pastikan kalian sudah mengubah status draft menjadi false:

Nah bisa kalian lihat kan perbedaan format draft disini?

Membuat dan Mengatur Halaman Blog

Halaman /blog/ biasanya menampilkan halaman daftar artikel. Di Hugo, halaman ini menggunakan template list. Hugo secara otomatis membuat halaman list untuk setiap section. Untuk blog, halaman ini biasanya berada di:

layouts/
└── blog/
    ├── list.html
    └── single.html

Halaman ini digunakan untuk:

• Menampilkan daftar artikel
• Menampilkan ringkasan (summary)
• Pagination

Lalu bagaimana sih cara penggunaan data Hugo di halaman list/list.html?

{{ range .Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  <p>{{ .Summary }}</p>
{{ end }}

atau mau yang lebih lengkap bisa seperti ini:

{{ define "main" }}
  <h1>Blog</h1>

  {{ range .Pages }}
    <article>
      <h2>
        <a href="{{ .RelPermalink }}">
          {{ .Title }}
        </a>
      </h2>

      <p>{{ .Summary }}</p>
    </article>
  {{ end }}
{{ end }}

Nah disinilah semua artikel blog akan dirender sebagai daftar artikel. Dan tampilan akhirnya bakal seperti ini:

Tinggal kalian utak-atik sendiri aja, desain tampilan blog kalian mau gimana.

Lalu bagaimana Setup Pada Single Page/Single.html?

Setiap artikel blog yang akan dibuat & publish nantinya, ini akan menggunakan template single.html.

Contoh penggunaan single.html:

{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  <time>{{ .Date.Format "02 Jan 2006" }}</time>

  <div class="content">
    {{ .Content }}
  </div>
</article>
{{ end }}

Template ini biasanya saya kombinasikan dengan Tailwind CSS (seperti yang sudah dibahas di artikel sebelumnya), sehingga fokus artikel ini murni pada alur konten blog, bukan styling. Layout ini digunakan untuk menampilkan:

• Judul artikel
• Tanggal publish
• Konten utama blog kita
• Navigasi artikel (prev / next) → jika diperlukan

Hugo memisahkan logika list dan single, sehingga desain blog bisa lebih terstruktur dan konsisten.

Hasil tampilan web artikelnya seperti ini:

Jika tampilan ini kurang memuaskan, bisa kalian utak-atik sendiri ya!

Summary: Preview Artikel / Ringkasan Singkat

Untuk menjaga tampilan blog tetap bersih, saya menggunakan fitur summary Hugo.. yaitu potongan pendek dari isi artikel yang ditampilkan di halaman list.

Ada dua cara membuat summary:

1. Otomatis (berdasarkan jumlah kata)
2. Manual menggunakan separator:

Hugo adalah static site generator yang sangat fleksibel untuk blog personal.
<!-- more -->
Pada artikel ini saya membahas bagaimana mengelola halaman blog di Hugo...

Manfaat summary:

• Preview artikel lebih ringkas
• Cocok untuk halaman list
• Lebih ramah SEO & user experience

Mengelola Kategori dan Tag Blog

Hugo pun mendukung taxonomy seperti: categories & tags. Dengan menambahkan taxonomy, kalian akan mendapatkan manfaat seperti halaman kategori otomatis hingga bisa mengarsip artikel berdasarkan topik yang kalian set.

Contohnya:

Ini akan sangat membantu jika blog kita sudah mulai berkembang dan artikelnya semakin banyak.

Penutup

Mengelola blog di Hugo bukan soal kompleksitas, tapi soal struktur dan konsistensi. Dengan memahami konsep section, list page, single page, dan front matter, Hugo menjadi alat yang sangat powerful untuk blog personal.

Untuk website portfolio, pendekatan ini membuat blog tetap ringan, terorganisir, dan siap berkembang tanpa kehilangan kendali.