Cara Membuat Tema Hugo dari Nol

March 25, 2021

Ini adalah tutorial membuat tema Hugo dari nol. Hugo sudah mempermudah kita untuk bereksperimen dengan menyediakan perintah untuk membuat tema baru.

Alasan Membuat Tema Baru

Kode tema yang digunakan masih berantakan.
Kode CSS-nya masih murni dari tema yang disediakan oleh Hugo.
Ingin belajar membuat tema sendiri

Membuat Tema Baru di Hugo

Hugo sudah menyediakan perintah untuk membuat tema baru:

hugo new theme [name]

Sebagai contoh, saya akan membuat tema bernama misterthree.

hugo new theme misterthree

Maka akan ada direktori baru di dalam direktori themes.

Hugo sudah membuatkan 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:

misterthree/
├── 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 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>