Membuat Theme Hugo
Untuk membuat theme di Hugo, ikuti langkah-langkah berikut:
1. Inisialisasi Hugo Site
Jika belum punya site Hugo, buat site baru:
hugo new site mysite
cd mysite
2. Buat Folder Theme Baru
Gunakan perintah ini untuk membuat theme baru:
hugo new theme mytheme
Ini akan membuat struktur dasar theme di folder themes/mytheme.
3. Struktur Theme
Pastikan struktur minimal seperti ini:
mysite/
├── themes/
│ └── mytheme/
│ ├── layouts/
│ │ ├── index.html # Template halaman utama
│ │ ├── _default/
│ │ │ └── single.html # Template untuk halaman konten
│ ├── static/ # CSS, JS, gambar
│ ├── assets/ # File mentah (optional)
│ ├── theme.toml # Informasi theme
4. Buat Template Utama
Edit layouts/index.html untuk halaman utama:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Site.Title }}</title>
</head>
<body>
<h1>Welcome to {{ .Site.Title }}</h1>
{{ range .Site.RegularPages }}
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
{{ end }}
</body>
</html>
Buat juga layouts/_default/single.html untuk halaman konten:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
<div>{{ .Content }}</div>
</body>
</html>
5. Aktifkan Theme
Di file config.toml di root site, tambahkan:
theme = "mytheme"
6. Tambahkan Konten
Buat konten baru untuk mengetes theme:
hugo new posts/my-first-post.md
- Jalankan Server Hugo
Untuk melihat hasilnya di browser:
hugo server
Kesimpulan:
Buat theme baru dengan hugo new theme, atur template di layouts/, dan aktifkan theme di config.toml.