author Ahmad Muhardian

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.

Rilis Hugo versi 0.24

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.

Tema Baru di Hugo

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:

  1. archetype — direktori yang berisi template konten;
  2. layouts — direktori yang berisi layout temanya;
  3. 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:

  1. _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.

    List vs Single

  2. partials berisi bagian-bagian kecil dari struktur HTML.

    Partials

    Partials memungkinkan kita memecah kode-kode layout menjadi bagian kecil, sehingga lebih efisien.

Kemudian ada juga file HTML:

  1. 404.html file HTML untuk halaman error 404 not found.
  2. 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:

Hasil percobaan tema kacang

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.