Cara Membuat Tema Hugo dari Nol: Panduan Lengkap untuk Pemula

deuxly.id

Jan 21, 2026

4 min read

0 Views

Tema Hugo adalah komponen utama yang menentukan tampilan dan struktur sebuah website berbasis Hugo. Banyak pengguna Hugo memilih langsung memakai theme yang sudah jadi, tapi dalam beberapa kondisi, membuat tema Hugo sendiri justru jauh lebih fleksibel dan rapi.

Artikel ini akan membahas cara membuat tema Hugo dari nol, dimulai dari struktur dasar, file penting, sampai praktik terbaik agar theme mudah dikembangkan dan SEO-friendly. Cocok untuk pemula yang ingin benar-benar paham cara kerja Hugo, bukan sekadar pakai jadi.

Daftar Isi

Apa Itu Tema Hugo?

Tema Hugo adalah kumpulan template, asset, dan konfigurasi yang mengatur bagaimana konten ditampilkan di website. Theme bertugas mengubah file Markdown menjadi halaman HTML yang siap diakses pengunjung.

Di Hugo, theme bersifat modular. Artinya, kamu bisa memisahkan logika tampilan dengan konten utama. Ini membuat maintenance website jauh lebih mudah, terutama untuk blog atau dokumentasi jangka panjang.

Secara sederhana, konten ada di folder content, sedangkan cara menampilkannya diatur oleh theme melalui folder layouts.

Kapan Sebaiknya Membuat Tema Hugo Sendiri?

Membuat tema Hugo sendiri sangat disarankan jika:

Theme yang ada tidak sesuai kebutuhan
Kamu ingin struktur HTML yang lebih bersih
Butuh kontrol penuh untuk SEO dan performa
Website bersifat jangka panjang

Jika hanya ingin blog sederhana, theme jadi sudah cukup. Tapi untuk project serius, custom theme biasanya lebih stabil dan ringan.

Struktur Dasar Tema Hugo

Tema Hugo disimpan di dalam folder themes. Di dalamnya terdapat beberapa folder penting yang wajib kamu pahami.

themes/
└── deuxly-theme/
    ├── layouts/
    ├── static/
    ├── assets/
    ├── archetypes/
    └── theme.toml

Penjelasan singkat:

layouts/ → template HTML
static/ → file statis (gambar, JS, font)
assets/ → CSS/SCSS yang diproses Hugo
theme.toml → metadata theme

Nama folder theme bebas, tapi sebaiknya konsisten dan mudah dikenali.

Cara Membuat Tema Hugo dari Nol

Langkah pertama adalah membuat folder theme secara manual atau menggunakan perintah Hugo.

hugo new theme deuxly-theme

Setelah itu, hubungkan theme ke project Hugo dengan menambahkan konfigurasi berikut di config.toml atau hugo.toml.

theme = "deuxly-theme"

Jika berhasil, Hugo akan mulai membaca file layout dari theme tersebut.

Memahami Sistem Layout Hugo

Hugo menggunakan sistem template berbasis HTML dengan Go Template. File layout utama biasanya berada di folder layouts/_default/.

File penting yang sering digunakan:

baseof.html
single.html
list.html

baseof.html berfungsi sebagai kerangka utama halaman.

<!DOCTYPE html>
<html lang="id">
<head>
  {{ block "head" . }}{{ end }}
</head>
<body>
  {{ block "main" . }}{{ end }}
</body>
</html>

File single.html dan list.html akan mengisi block tersebut.

Menggunakan Partial di Tema Hugo

Partial adalah komponen kecil yang bisa digunakan berulang, seperti header, footer, atau navbar. Partial disimpan di layouts/partials/.

{{ partial "header.html" . }}

Dengan partial, struktur theme jadi lebih rapi dan mudah dirawat.

Mengatur Styling dan Asset Tema Hugo

Untuk styling, Hugo mendukung CSS biasa maupun SCSS. File bisa diletakkan di:

static/css/ (langsung)
assets/scss/ (diproses)

Disarankan memakai assets karena bisa di-minify dan dioptimasi.

Gunakan satu file CSS utama agar performa website lebih ringan.

Menghubungkan Konten dengan Theme

Konten Hugo berasal dari folder content. Di theme, kamu bisa mengakses data konten menggunakan variable seperti:

.Title
.Content
.Date
.Params

Contoh sederhana:

<h1>{{ .Title }}</h1>
<div>
  {{ .Content }}
</div>

Dengan cara ini, theme tidak perlu tahu isi konten secara spesifik.

Kesalahan Umum Saat Membuat Tema Hugo

Kesalahan ini sering terjadi pada pemula saat membuat theme Hugo.

Beberapa kesalahan yang sebaiknya dihindari:

Tidak menggunakan baseof.html
Hardcode teks dan konten
Struktur layout tidak konsisten
Tidak memanfaatkan .Site.Params

Kesalahan ini membuat theme sulit dikembangkan dan rawan error.

Tips Membuat Tema Hugo yang SEO-Friendly

Tema Hugo sangat berpengaruh ke SEO. Beberapa hal yang perlu diperhatikan:

Struktur heading rapi (H1 satu kali)
Meta title dan description dinamis
HTML semantic (header, main, footer)
Loading cepat dan ringan

Dengan theme yang rapi, konten bagus akan lebih mudah diranking oleh Google.

Penutup

Membuat tema Hugo dari nol memang membutuhkan waktu, tapi hasilnya sepadan. Kamu mendapatkan kontrol penuh atas tampilan, performa, dan SEO website.

Jika kamu serius menggunakan Hugo untuk jangka panjang, memahami cara kerja theme adalah skill wajib. Setelah theme dasar selesai, kamu bisa mengembangkannya lebih jauh sesuai kebutuhan project.

Deuxly