Cara Membuat Hugo Themes
- Oka bRionZ
- Web development
- June 26, 2025
Table of Contents
Cara Membuat Hugo Themes: Panduan Langkah demi Langkah
Hugo adalah generator situs statis yang cepat dan fleksibel. Salah satu kelebihannya adalah kemampuan untuk membuat tema kustom sesuai kebutuhan. Berikut panduan lengkap membuat tema Hugo dari awal.
Prasyarat
Sebelum mulai, pastikan Anda telah menginstal:
- Hugo (versi extended untuk SCSS/Sass)
- Git (opsional, untuk manajemen versi)
- Editor kode (VS Code, Sublime Text, dll.)
Langkah 1: Membuat Struktur Proyek
Buat direktori baru untuk tema Anda dan inisialisasi proyek Hugo.
# Buat folder proyek
mkdir my-hugo-theme && cd my-hugo-theme
# Inisialisasi tema
hugo new theme mytheme
Struktur folder tema yang dihasilkan:
mytheme/
├── layouts/ # Template HTML
├── static/ # Aset statis (CSS, JS)
├── archetypes/ # Template konten default
├── assets/ # File SCSS/JS (di-compile)
└── theme.toml # Metadata tema
Langkah 2: Konfigurasi Dasar
Edit theme.toml untuk mendefinisikan metadata tema:
name = "MyTheme"
author = "Nama Anda"
license = "MIT"
homepage = "https://github.com/username/mytheme"
tags = ["minimal", "blog"]
Langkah 3: Membuat Layout Halaman
Hugo menggunakan file HTML di folder layouts/ untuk merender konten.
Contoh: layouts/_default/baseof.html
File ini adalah template dasar yang membungkus semua halaman.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>{{ .Site.Title }}</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
{{ block "main" . }}{{ end }}
</body>
</html>
Contoh: layouts/_default/single.html
Template untuk halaman tunggal (misalnya posting blog).
{{ define "main" }}
<article>
<h1>{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>
</article>
{{ end }}
Langkah 4: Menambahkan Gaya CSS
Buat file CSS di static/css/style.css atau gunakan SCSS di assets/scss/.
Contoh SCSS (assets/scss/main.scss):
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 1rem;
}
article {
max-width: 800px;
margin: 0 auto;
}
Hugo akan secara otomatis mengompilasi SCSS jika menggunakan versi extended.
Langkah 5: Menambahkan Partials (Komponen Reusable)
Gunakan partials untuk komponen yang dipakai berulang (header, footer, dll.).
Contoh: layouts/partials/header.html
<header>
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
<nav>
<a href="/about">Tentang</a>
</nav>
</header>
Sisipkan partial di template dengan:
{{ partial "header.html" . }}
Langkah 6: Menguji Tema
- Buat situs demo:
hugo new site demo && cd demo - Link tema ke folder
themes/:git init git submodule add ../my-hugo-theme/mytheme themes/mytheme - Tambahkan
theme = "mytheme"diconfig.toml. - Jalankan server:Buka
hugo server -Dhttp://localhost:1313untuk melihat hasil.
Langkah 7: Publikasi Tema (Opsional)
- Unggah ke GitHub/GitLab.
- Tambahkan ke Hugo Themes Showcase .
Tips Tambahan
- Gunakan variabel Hugo (e.g.,
{{ .Site.Params.background }}) untuk konfigurasi fleksibel. - Dokumentasikan tema dengan file
README.md. - Contoh tema referensi: Ananke .
Dengan langkah-langkah di atas, Anda bisa membuat tema Hugo yang ringan dan disesuaikan dengan kebutuhan! 🚀
