Memiliki sebuah blog atau website pribadi merupakan salah satu langkah yang perlu dilakukan oleh seseorang untuk memperkenalkan dirinya kepada orang lain dengan cara yang menarik. Dengan adanya blog atau website ini, kamu dapat “memperkenalkan” diri kamu secara mudah, cepat dan ideal. Tentu saja sebuah blog atau halaman website pribadi biasanya berisi mengenai pengenalan diri kamu, kontak kamu, dan beberapa tulisan, karya atau portofolio yang pernah kamu buat.

Nah, sebagai seorang programmer, membuat blog pribadi seharusnya menjadi hal yang mudah untuk dikerjakan. Apalagi jika kamu cukup menguasai bahasa pemograman yang biasa dipakai dan kamu mampu untuk merancang tampilan dari blog atau halaman website yang akan kamu buat, maka bukanlah sebuah hal yang mustahil bagi kamu untuk segera memilikinya. Lalu bagaimana jika kamu kurang mahir untuk membuatnya tetapi kamu ingin memilikinya? Atau jika kamu malas untuk merancang tampilan dari blog kamu dan kamu takut hasil yang kamu kerjakan tidak bagus. Mungkin tulisan ini dapat membantu kamu.

Ada salah satu cara untuk membuat blog atau website kamu dengan cepat dan mudah, yaitu dengan menggunakan Hugo.

Hugo adalah framework static site generator yang membantu kamu membuat website dengan cepat. Kalau diartikan langsung, SSG bisa disebut penghasil website statis. Pada dasarnya SSG adalah istilah umum untuk sebuah alat atau software yang bisa menghasilkan halaman statis.

Yap kita bisa membuat blog atau website dengan menggunakan HUGO.

Jika anda baru mendengar HUGO, ini adalah artikel yang paling tepat untuk anda baca.

Karena tutorial yang akan diberikan dalam tulisan ini berisi step by step cara membuat blog atau website Hugo dengan mudah sehingga para pemula bisa mengikutinya sampai berhasil.

Salah satu kelebihan HUGO adalah bisa dihosting ke mana saja bahkan dengan gratis?

Jika anda pernah membuat blog menggunakan WordPress atau Blogger, maka alurnya akan bebeda jika sudah berkenalan dengan HUGO.

Karena HUGO sebenarnya adalah static site generator, berbeda dengan blog yang dibuat dengan WordPress yaitu dynamic content.

Tanpa panjang lebar, mari langsung saja ke langkah-langkahnya.

Hugo Blog

1. Install Git, Go, dan Hugo

Kita siapkan terlebih dahulu apa saja yang kita perlukan

  • Git - Untuk upload dan deploy Hugo ke repository git
  • Go - Bahasa pemograman Go
  • Hugo - Mesin SSG untuk membuat blog atau website

Install Git

Untuk menginstal Git di Linux, silahkan ketik perintah berikut.

apt install git

Setelah itu, periksa versi yang terinstal dengan perintah:

git --version

Install Go

Ada dua cara yang bisa dilakukan untuk menginstal Go di Linux.

  • Menginstal melalui apt atau manajemen paket yang lainnya
  • Menginstal manual dengan men-download dari website resminya.

Untuk menginstal melalui apt, silahkan ketik perintah berukut:

apt install go

Setelah itu periksa versi yang terinstal dengan perintah:

go version

Hugo juga bisa diinstal melalui apt dan manual, tapi saya lebih menyarankan menginstal manual. Karena versi yang di repositori apt, masih versi lama.

Install Hugo

Silahkan buka repositori hugo, ambil versi Hugo yang akan diinstal.

Sebagai contoh:

Saya akan menginstal versi Hugo 0.24.1 di Linux 64-bit:

wget https://github.com/gohugoio/hugo/releases/download/v0.24.1/hugo_0.24.1_Linux-64bit.deb

{{- admonition -}} Gunakan versi hugo terbaru {{- / admonition -}}

Setelah itu instal dengan dpkg atau apt deb:

apt deb hugo_0.24.1_Linux-64bit.deb

Setelah itu…

buka terimal baru dan ketik perintah:

hugo version

Jika muncul seperti ini:

Hugo Static Site Generator v0.24 linux/arm64 BuildDate: 2017-06-21T19:32:34+08.00

Berarti kita telah berhasil menginstal Hugo.

Semua sudah beres…

Selanjutnya mari kita mulai membuat blog.

2. Membuat Blog Baru Dengan Hugo

Hugo menyediakan perintah berikut untuk membuat blog baru:

hugo new site [nama-blog]

Sebagai contoh:

Saya akan membuat blog bernama ridwankulu:

hugo new site ridwankulu

Maka Hugo akan membuatkan direktori baru beserta strukturnya.

ridwankulu/
|-- 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.

Mengenal Struktur Direktori Hugo

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

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/
|-- posts/
|   |-- 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.

      ```bash
hugo new contact.md
```

Maka, secara otomatis akan membuat file `contact.md` pada direktori `content/contact.md` dengan format yang telah diatur seperti ini.

```bash
---
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.

```bash
hugo new posts/artikel-pertama/index.md
```

Maka, secara otomatis hugo akan membuat file `index.md` pada direktori `content/blog/artikel-pertama/index.md` dengan format yang telah diatur seperti ini.

```bash
---
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 Pipes^2. 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.

      ```html
{{ $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.

```html
-link href="https://ridwankulu.eu.org/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.

      ```bash
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.

    • 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.

      • 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
        • render-image.html : Mengatur bentuk dan format gambar dalam artikel

      • 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.

      • 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. * 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.

Menambahkan Tema Hugo

Hugo memiliki banyak kontributor yang membuat tema dan disebarkan secara gratis.

Silahkan cari tema yang kalian sukai di: https://themes.gohugo.io/

Pilih tema yang mana saja.

Tapi perlu diingat:

“Baca dulu dokumentasi tema-nya, karena di sana ada konfigurasi yang harus diikuti agar temanya bisa digunakan sesuai harapan”

Contoh:

Saya akan memilih tema LoveIt, maka kita harus membuat konfigurasi seperti ini:

baseURL = "http://example.org/"

# Change the default theme to be use when building the site with Hugo
theme = "LoveIt"

# website title
title = "My New Hugo Site"

# language code ["en", "zh-CN", "fr", "pl", ...]
languageCode = "en"
# language name ["English", "简体中文", "Français", "Polski", ...]
languageName = "English"

# Author config
[author]
  name = "xxxx"
  email = ""
  link = ""

# Menu config
[menu]
  [[menu.main]]
    weight = 1
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "Posts"
    url = "/posts/"
    # title will be shown when you hover on this menu link
    title = ""
  [[menu.main]]
    weight = 2
    identifier = "tags"
    pre = ""
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
  [[menu.main]]
    weight = 3
    identifier = "categories"
    pre = ""
    post = ""
    name = "Categories"
    url = "/categories/"
    title = ""

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

Setelah itu kita tambahkan temanya…

Silahkan masuk ke direktori ridwankulu/themes melalui terminal (sesuaikan dengan nama blog-mu).

cd ridwankuku/themes/

Setelah itu, gunakan Git untuk klon repositori temanya.

git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

Tunggu sampai selesai…

Setelah itu, pindah ke direktori root blognya dan jalankan server hugo.

cd ..
hugo server

Maka hugo akan membuat server baru pada alamat http://localhost:1313.

Jika pada CMS seperti Wordpress, kita mengisi konten melalui halaman admin, maka pada Hugo kita gunakan teks editor.

Pertama:

Silahkan buat kotennya melalui terminal.

Hugo sudah menyediakan perintah hugo new untuk membuat konten.

hugo new posts/[nama-file-konten].md

Contoh:

hugo new post/apt-vs-apt-get.md

Maka file baru akan dibuat pada direktori content/post/ dengan nama apt-vs-apt-get.md.

Silahkan buka file tersebut, modifikasi dan tambahkan isinya.

Jangan lupa mengubah nilai draft pada Front Matter menjadi false.

Setelah itu, simpan, jalankan server dan coba lihat perubahannya sekarang.

Seperti itulah detail penjelasan dari struktur tema pada Hugo dan cara membuat bloh di 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!