Cara Membuat Tema Hugo dari Nol (Meracik ulang Tema Petani Kode)
Saat ini Saya sedang menggunakan Hugo versi 0.18 dan berencana untuk meng-upgrade ke versi 0.24. Kabar baiknya, Beb sudah merilis versi 0.24 sekitar dua hari yang lalu.
Selain melakukan upgrade ke mesin terbaru, saya juga berencana meracik ulang tema Petani Kode. Karena saya rasa tema ini cukup berantakan, baik dari segi kode dan performa.
Alasan Saya ingin Membuat Tema Baru
- Kode tema yang digunakan saat ini masih berantakan.
- Kode CSS-nya masih murni ditulis dari nol dan saya ingin mencoba bereksperimen dengan SASS di Hugo.
- Penerapan AMP masih salah dan banyak yang tidak valid.
- Tema yang digunakan saat ini, tampilannya hanya bisa terlihat sempurna kalau terhubung dengan internet, sedangkan kalau digunakan secara offline tampilannya barantakan. Hal ini disebabkan karena saya menggunakan CDN (Content Delivery Network) dan font dari Google.
- Ingin belajar membuat tema dari nol, karena tema yang digunakan saat ini merupakan hasil modifikasi dari tema AMP Starter.
Membuat Tema Baru di Hugo
Hugo sudah menyediakan perintah untuk membuat tema baru:
hugo new theme [name]
Sebagai contoh, saya akan membuat tema bernama kacang
(karena saat ini lagi musim tanam kacang 😄).
hugo new theme kacang
Maka akan ada direktori baru di dalam direktori themes
.
Hugo sudah membuatkankan kita struktur direktori temanya dan tinggal dimodifikasi saja. Tapi sebelumnya, kita harus paham dulu dengan struktur direktori tersebut.
Struktur Direktori Tema Hugo
Berikut ini struktur direktori tema Hugo:
kacang/
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ └── header.html
├── LICENSE.md
├── static
│ ├── css
│ └── js
└── theme.toml
Ada tiga direktori yang dibuatkan oleh Hugo:
archetype
— direktori yang berisi template konten;layouts
— direktori yang berisi layout temanya;static
— direktori untuk menyimpan file statis seperti css, javascript, gambar, dsb.
Biar lebih jelas, mari kita bahas satu-persatu…
Archetype
Jika blog kita memiliki beberapa jenis konten, misalnya ada artikel, portofolio,
podcast, dll. maka kita harus membuatkan archetype
untuk masing-masing jenis
konten tersebut.
Di dalam direktori archetype
terdapat file default.md
yang merupakan
archetype
default yang akan digunakan ketika kita membuat konten
dengan perintah hugo new
.
Layouts
Direktori layout menyimpan file-file HTML yang merupakan struktur dasar dari tema.
Terdapat dua direktori penting di dalamnya:
_default
berisi struktur HTML untuk halaman konten. Ada dua isinya:list.html
file HTML untuk menampilkan daftar konten.single.html
file HTML untuk menampilkan satu konten.
partials
berisi bagian-bagian kecil dari struktur HTML.Partials
memungkinkan kita memecah kode-kode layout menjadi bagian kecil, sehingga lebih efisien.
Kemudian ada juga file HTML:
404.html
file HTML untuk halaman error 404 not found.index.html
file HTML untuk halaman indeks atau homepage.
Static
Direktori ini menyimpan file-file statis seperti CSS, Javascript, Gambar, dan sebagainya.
Membuat Halaman Home
Hal pertama yang harus kita lakukan adalah membuat halaman utamanya, yaitu halaman homepage.
Layout untuk halaman homepage ditentukan oleh file layouts/index.html
.
Silahkan isi file index.html
dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ .Title }}</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Selamat datang di <b>{{ .Title }}</b></p>
</body>
</html>
Ini hanya untuk percobaan saja.
Setelah itu silahkan jalankan server hugo dengan menggunakan tema tersebut.
hugo server -t kacang
Hasilnya:
Berhasil…
Selanjutnya kita tinggal modifikasi saja sesuai selera.
Baca lanjutan tutorial ini: Membuat Layout Tema Hugo: 3 Halaman Penting yang Harus Ada dalam Blog
Untuk referensi nama-nama variabel Hugo, bisa dibaca di dokumentasi Hugo.
Akhir Kata…
Pengembangan tema ini mungkin akan saya lanjutkan di tulisan terpisah. Karena saya belum membuat rancangan dan desainnya.
Sekarang yang terpenting sudah tahu cara memulainya 😄.
Terima kasih sudah membaca sampai akhir.
Referensi: Dok. Hugo — Creating a Theme.