Berkenalan Dengan Struktur Tema Hugo

June 24, 2021 9 min read

Salah satu langkah pertama untuk memulai membuat sebuah tema website adalah mengenali struktur sebuah tema pada web framework yang ingin Kamu gunakan. Pada jenis web framework apapun, Kamu harus memahami dan mengenali strukturnya. Sehingga nanti ketika merancang dan membangun tema tidak akan kesulitan.

Nah, pada kesempatan kali ini Kita akan coba berkenalan dengan struktur tema dari web framework milik Hugo. Seperti yang Kita tahu, bahwa Hugo merupakan Static Site Generator paling cepat seperti yang di klaimnya.

Pada awalnya, Saya juga kebingungan dengan struktur dan direktori dari Hugo yang satu ini. Walaupun sudah membaca dokumentasinya di website resmi Hugo1, namun masih saja kurang paham secara keseluruhan. Karena masih ada beberapa yang kurang jelas dan detail, sehingga Saya harus mencobanya sendiri langsung untuk membuktikannya.

Salah satu alasan tulisan ini dibuat juga adalah sebagai arsip pribadi atau bisa membantu Kalian juga yang sedang membangun website atau blog menggunakan Hugo. Jika Kalian tertarik ingin membuat blog pribadi menggunakan Hugo , silakan baca terlebih dahulu artikel Saya sebelumnya.

Struktur Dasar Hugo

Berikut ini adalah stuktur atau direktori yang pertama kali dibuat oleh Hugo dengan perintah ini.

hugo new site nama_website

Maka, secara default Hugo akan di-generate secara otomatis struktur atau direktorinya seperti ini.

nama_website/
|-- archetypes/
|-- content/
|-- data/
|-- layouts/
|-- static/
`-- config.toml

Itu adalah struktur atau direktori standar yang diberikan Hugo pada saat pertama kali Kamu membuatnya. Namun, sebenarnya struktur tersebut bisa ditambah lagi sesuai kebutuhan.

Struktur Umum Tema Hugo

Misalnya Kamu ingin menambahkan tema pada Hugo, maka Kamu harus menambahkan folder themes pada direktorinya. Dan semua tema Hugo disimpan pada direktori tersebut. Lalu, jika Kamu menggunakan tema, maka direktori lain pada root folder seperti archetypes, data, layouts, dan static menjadi tidak terpakai. Justru hanya direktori content saja yang dipakai saat menggunakan tema Hugo.

Direktori seperti archetypes, data, layouts, static, dan yang lainnya akan dipakai dan di eksekusi sesuai tema yang dipilih pada pengaturan config.toml. Sehingga direktori-direktori tersebut akan berfungsi dan bekerja sesuai temanya masing-masing.

Dibawah ini adalah struktur atau direktori sebuah website Hugo yang umum biasa dipakai untuk merancang dan membangun tema. Adapun tambahan lainnya pada sebuah struktur ini dimaksudkan untuk keperluan modifikasi tema sesuai yang Kita inginkan. Jadi struktur atau direktori ini bisa bertambah dan berkurang. Itu bisa disesuaikan sesuai kebutuhan Kalian.

Agar lebih mudah mengenali dan mempelajarinya, Saya akan singkirkan (namun tidak menghapusnya) direktori seperti archetypes, data, layouts, static, dan yang lainnya pada root folder sebagai contoh pembelajaran. Alasannya karena direktori tersebut tidak terpakai, justru yang akan dipakai ada pada folder setiap tema. Sehingga direktorinya menjadi seperti ini.

nama_website/
|-- content/
|-- public/
|-- themes/
|   `-- nama_tema/
|       |-- archetypes/
|       |   |-- blog.md
|       |   `-- default.md
|       |-- assets/
|       |   |-- css/
|       |   |   |-- bootstrap.css
|       |   |   `-- style.css
|       |   `-- js/
|       |-- config/
|       |-- data/
|       |-- i18n/
|       |-- layouts/
|       |   |-- _default/
|       |   |   `-- markup/    
|       |   |   |   |-- render-image.html
|       |   |   |   `-- render-link.html
|       |   |   |-- _baseof.html
|       |   |   |-- list.html
|       |   |   |-- single.html
|       |   |   `-- summary.html
|       |   |-- partials/
|       |   |   |-- head.html
|       |   |   |-- header.html
|       |   |   |-- sidebar.html
|       |   |   |-- footer.html
|       |   |   `-- script.html
|       |   |-- shortcodes/
|       |   |-- taxonomy/
|       |   |   |-- category.html
|       |   |   `-- tag.html
|       |   |-- hero.html
|       |   |-- about.html
|       |   |-- 404.html
|       |   |-- index.html
|       |   `-- robots.txt
|       |-- resources/
|       `-- static/
`-- config.toml

Penjelasan Struktur Tema Hugo

Berikut adalah penjelasan lengkap dari setiap direktori diatas, sebagai berikut :

  • content : Tempat disimpannya semua konten pada website Hugo, seperti artikel, halaman statis, dan yang lainnya. Konten ditulis dengan markdown format. Misalnya Saya membuat section khusus halaman blog, contact, dan about pada direktori content, maka akan seperti ini.

    content/
|-- blog/
|   |-- artikel-pertama/
|   |   `-- index.md
|   |-- artikel-kedua/
|   |   `-- index.md
|   |-- artikel-ketiga/
|   |   `-- index.md
|   `-- _index.md
|-- about/
|   `-- _index.md
`-- contact/
    `-- _index.md
    Aapabila penulisan format nama konten diawali dengan tanda _ atau underscore seperti _index.md, maka Hugo akan menggangap bahwa konten tersebut adalah halaman list atau list.html. Sebaliknya, jika penulisan format nama normal tanpa _, maka dianggap sebagai halaman single atau single.html.

  • public : Direktori yang akan muncul ketika akan mengubah website menjadi halaman statis. Dan isi pada halaman inilah yang nantinya Kamu deploy atau hosting ke server websitemu. Perintah untuk membuat halaman statis pada Hugo cukup ketik saja hugo pada terminal.

  • themes : Daftar tema Hugo yang ingin digunakan disimpan disini, lalu untuk menggunakannya tinggal mengaturnya pada config.toml.

    • archetypes : Direktori untuk mengatur format dari konten pada front matter. Pada contoh diatas Saya membuat 2 format, satu dengan nama _default.md dan kedua dengan nama blog.md. Format _default.md untuk mengatur format bawaan front matter, contohnya sepert ini.

      hugo new contact.md
      Maka, secara otomatis akan membuat file contact.md pada direktori content/contact.md dengan format yang telah diatur seperti ini.
      ---
title: "Contact"
date: 2021-06-24T08:55:14+07:00
lastmod: 2021-06-24T08:55:14+07:00
draft: true
---
      Kemudian Saya akan membuat konten dengan menggunakan format blog.md, contohnya seperti ini.
      hugo new blog/artikel-pertama/index.md
      Maka, secara otomatis akan membuat file index.md pada direktori content/blog/artikel-pertama/index.md dengan format yang telah diatur seperti ini.
      ---
title: "Artikel Pertama"
date: 2021-06-24T08:58:23+07:00
lastmod: 2021-06-24T08:58:23+07:00
featuredPost: false
draft: false
author: username_penulis
image: path_gambar
featuredImage: false
category:
    - Category1
tag:
    - Tag1
description: isi deskripsi pencarian
keyword: kata kunci
---

    • assets : Direktori tempat untuk menyimpan aset seperti, css, js, dan sejenisnya yang ingin Kamu proses lagi untuk keperluan modifikasi menggunakan Hugo Pipes2. Misalnya Kamu ingin menjadikan beberapa file css menjadi satu buah file css saat di publikasikan, maka Saya sarankan Kamu simpan asetnya disini untuk diproses lagi. Jika hanya file aset biasa, lebih baik Kamu simpan di direktori static. Berikut ini adalah contoh penggunaan untuk pemanggilan aset dari direktori assets.

      {{ $bootstrap := resources.Get "css/bootstrap.min.css" }}
{{ $style := resources.Get "css/style.css" }}
{{ $styleBundle := slice $bootstrap $style | resources.Concat "css/bundle.css" }}

<link  href="{{ $styleBundle.RelPermalink }}" rel="stylesheet">
      Maka, kedua file css dari direktori assets akan diproses lagi untuk digabungkan menjadi satu buah files css dengan nama bundle.css. Sehingga nanti saat di publikasikan akan menjadi seperti ini.
      <link href="https://saefulrahman.my.id/css/bundle.css" rel="stylesheet">

    • config : Biasanya Hugo memiliki file untuk mengatur semua variabel dan sejenisnya pada file config.toml. Bisa juga dengan format YAML atau JSON. Nah, jika Kamu ingin mengelompokkan pengaturannya sesuai kelompoknya agar lebih unik, maka Kamu dapat menggunakan direktori ini untuk mengaturnya. Misalnya sepert ini.

      config/
`-- default/
    |-- config.toml
    |-- navbar.toml
    `-- content.toml

    • i18n : Jika pada website Hugo milikmu ingin memiliki multi bahasa, maka Kamu gunakan direktori ini sebagai tempat untuk menyimpan kamus dari bahasa apa saja yang Kamu gunakan. Misalnya Saya akan membuat file untuk bahasa inggris dengan nama en-us.yml, yang isinya sebagai berikut.

      id: 'post.comment'
  translation: 'Comment'
id: 'post.date'
  translation: 'Date'
id: 'post.toc'
  translation: 'Table of Contents'
      Untuk menggunakannya, Kamu tinggal lakukan seperti ini pada file HTML yang ingin kamu ubah sesuai bahasa yang dipilih.
      <span>{{ i18n "post.date" }}</span>

    • layouts : Direktori untuk mengatur semua struktur tema website Hugo milikmu dengan format .html. Seperti halaman depan, halaman artikel, kumpulan artikel, taxonomy, dan yang lainnya diatur disini.

      • _default : Untuk mengatur default layout sebuah halaman, jika sebuah halaman tidak didefinisikan layout-nya. Pada contoh diatas, saya membuat 4 buah file sebagai default dari layout tema yang Saya buat, sebagai berikut :

        • _baseof.html : Untuk mengatur base layout tema. Berikut ini adalah contoh isi dari file _baseof.html

          <!DOCTYPE html>
<html>
{{ partial "head.html" . }}
<body itemscope="itemscope" itemtype="https://schema.org/WebPage">
    {{ partial "header.html" . }
    {{ block "main" . }} {{ end }}
    {{ partial "sidebar.html" . }}
    {{ partial "footer.html" . }}
    {{ partial "script.html" . }}
</body>
</html>
          Untuk menggunakannya, tinggal seperti ini.
          {{ partial "head.html" . }}
{{ define "main" }}
{{ partial "hero.html" . }}
{{ partial "about.html" . }}
{{ end }}

        • list.html : Untuk mengatur layout bawaan dari sebuah halaman yang berisi list. Misalnya halaman post list, category list, tag list, archive list, dan yang lainnya.

        • single.html : Untuk mengatur layout bawaan dari sebuah single page, seperti halaman artikel.

        • summary.html : Saya membuat file ini untuk mengatur format ringkasan atau summary dari setiap konten artikel yang dibuat.

        • markups : Direktori ini untuk mengatur render hook pada sebuah konten Hugo. Misalnya mengatur bentuk link dan gambar pada sebuah artikel, seperti menambahkan nofollow untuk external link dan menambahkan caption pada gambar. Semua format dan aturan tersebut dibuat dalam direktori markups.

          • render-link.html : Mengatur bentuk dan format link dalam artikel. Contohnya seperti ini.
            <a 
    {{ if or (strings.HasPrefix .Destination "http") (strings.HasPrefix .Destination "#") (strings.HasPrefix .Destination "/") }} 
        href="{{ .Destination | safeURL }}"
        {{ if strings.HasPrefix .Destination "http" }} 
            target="_blank" rel="nofollow noopener noreferrer" 
        {{ end }} 
    {{ else if strings.HasPrefix .Destination "mailto" }}
        href="mailto:{{ .Text | safeHTML }}" onClick="javascript:window.open('mailto:{{ .Text | safeHTML }}', 'mail'); event.preventDefault()" 
    {{ end }} 
    {{ with .Title}} title="{{ . }}" {{ end }}>
    {{ .Text | safeHTML}}
</a>
          • render-image.html : Mengatur bentuk dan format gambar dalam artikel. Contohnya seperti ini.
            {{ if .Title }}
<figure>
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
    <figcaption>{{ .Title }}</figcaption>
</figure>
{{ else }}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
{{ end }}

      • partials : Berisi bagian-bagian kecil struktur HTML yang ingin dibuat. Disini Kamu memungkinkan untuk memecah kode-kode layout menjadi lebih kecil agar lebih efisien. Pada bagian partials saya membuat 6 buah file bagian kecil dari struktur website yang akan dibuat, yaitu head.html, header.html, sidebar.html, footer.html, dan script.html.

      • shortcodes : Pada direktori ini, Kamu bisa membuat kustom shortcodes buatan sendiri yang memang khusus ingin Kamu implementasikan pada website. Disini Kamu bebas berkreasi dan menentukan jenis, bentuk, desain, dan format dari shortcodes yang ingin dibuat. Misalnya, Saya akan membuat sebuah kustom alert dengan nama alert.html untuk menyampaikan pesan penting kepada pembaca.

        <div class="alert {{ range .Params }}{{ . }} {{ end }}">
  <p>{{ .Inner | markdownify }}</p>
</div>
        Tambahkan CSS untuk mempercantik tampilannya. Lalu, untuk menggunakannya pada front matter, seperti ini.
          {{< alert info >}}
Contoh pesan  dari alert info
{{< /alert >}}

      • taxonomy : Untuk mengatur layout untuk halaman seperti category, tags, author, dan sejenisnya.

      • 404.html : Untuk mengatur layout untuk halaman 404 atau jika halaman tidak ditemukan pada website.

      • index.html : Untuk mengatur layout halaman utama website. Contohnya seperti ini.

        {{ partial "head.html" . }}
{{ define "main" }}
{{ partial "hero.html" . }}
{{ partial "about.html" . }}
{{ end }}

      • robots.txt : Untuk mengatur robots pencarian, untuk memberi tahu ke robot pencarian apa saja yang boleh di-crawl dan tidak.

    • resources : Opsional, bisa digunakan untuk memproses file SASS tanpa preprosesor.

    • static : Untuk menyimpan file statis seperti gambar, file, css, js, dan font.

  • config.toml : Berisi semua pengaturan atau konfigurasi website Hugo.

Seperti itulah detail penjelasan dari struktur tema pada Hugo. Semoga informasi ini bisa membantu Kalian untuk cepat memahami struktur tema Hugo. Sehingga Kalian bisa lebih cepat merancang dan membangun tema menggunakan Hugo. Silakan Kalian coba sendiri dan semoga informasi ini bermanfaat!

  1. Hugo Documentation - gohugo.io  ↩︎

  2. Hugo Pipes Introduction - gohugo.io  ↩︎

Saeful Rahman
Saeful Rahman
Web Developer

Saya seorang professional Web Developer yang telah berpengalaman selama kurang lebih 6 tahun. Saya berhasil membuat website yang responsif, cepat, dan mudah digunakan. Bidang keahlian utama Saya adalah Front-End Developer, seperti CSS, HTML, dan JavaScript untuk membangun website skala kecil hingga menengah.

Related Post

Cara Menggunakan SSH di Github
June 18, 2021 3 min read

Cara Menggunakan SSH di Github

Dengan menggunakan protokol SSH, Kamu bisa terhubung dan remote ke server secara jarak jauh. Lewat kunci SSH Kamu bisa terhubung dan akses ke server t...