Hugo, framework untuk membuat website statis

Ada banyak perlombaan di dunia "static site generator", salah satu yang sangat populer adalah hugo, dengan "jualan" utama di landing pagenya "the world's fastest framework for building websites" atau diterjemahkan "framework tercepat di dunia untuk membuat website". Normalnya saya akan bilang, setiap framework pasti punya klaimnya masing-masing, tapi setelah saya menggunakannya, ternyata hugo berhasil membuktikan janjinya! sangat cepat!

Kita berkenalan dulu sedikit tentang hugo dan fitur apa saja yang dia punya, sebelum kita lompat ke cara membuat websitenya

Apa itu Hugo

Hugo adalah proyek open source yang dimulai oleh Bjørn Erik Pedersen yang saat ini sudah disponsori oleh banyak perusahaan. Tidak mudah tentunya untuk sebuah proyek open source bisa sampai ke tahap tersebut. Ini menjadi salah satu bukti, kalau banyak orang yang sudah terbantu dengan Hugo.

Dibuat dengan bahasa Go Lang , bahasa modern yang terkenal dengan kecepatannya, hugo akan membantu kamu membuat website statis tanpa perlu menunggu lama dalam waktu build-nya.

Apa yang bisa dibuat dengan Hugo

Seperti membuat blog pada platform besar seperti wordpress, kamu bisa melakukan banyak hal di sini. Seperti sistem kategori, menu dinamis, mengurus SEO dan masih banyak lagi. Karena itu membuat website dengan Hugo akan terasa sangat fleksibel seperti membuat website dengan bahasa dinamis lainnya.

Seperti SSG(static site generator) pada umumnya, pengguna bisa menggunakan markdown saat ingin menulis kontennya, sayangya markdown dikenal memiliki beberapa keterbatasan, seperti tidak bisa memasukkan iframe. Hugo mengatasi ini dengan fitur "shortcodes" nya, di mana ada beberapa kode yang sudah disediakan dan bisa kita buat sendiri untuk dimasukkan ke markdownnya. Seperti menampilkan iframe, tag figure pada HTML, embed konten sosial media, dan lainnya.

Kamu juga bisa mengambil konten dari file JSON dengan Hugo jika kamu membutuhkannya.

Bagaimana cara install Hugo

Hugo bisa digunakan di semua OS pada umumnya seperti: macOS, Windows, Linux, OpenBSD, FreeBSD.

MacOS dan Linux

bisa menggunakan package manager homebrew

brew install hugo

Windows

menggunakan package manager chocolatey

choco install hugo -confirm

atau menggunakan scoop

scoop install hugo

Jika sudah menginstall, kamu bisa konfirmasi berhasil dengan mengetik hugo version .

Jika sudah ada output yang terlihat, berarti instalannya berhasil.

Ini informasi lengkap cara install hugo

Membuat website dengan Hugo

Langsung saja cara membuat website baru dengan hugo

hugo new site namaProyekMu

Perintah di atas akan membuat proyek/folder baru sesuai nama yang kamu masukkan. Silahkan buka text editor untuk melihat instalan dari Hugo.

Membuat halaman baru di Hugo

Untuk membuat halaman baru di websitemu

hugo new posts/post-pertama.md

Ini isi dari file tersebut. Kamu bisa mulai menulis postingan di bawah baris yang sudah ada.

---
title: "Post Pertama"
date: 2020-08-15T09:44:10+08:00
draft: true
---

Ini tambahan dari kamu.
Ini halaman pertama.

Kamu berhasil membuat satu halaman baru yang lokasinya ada di dalam folder content/posts.

Baris --- adalah informasi dari file tersebut, yang bisa berisi banyak hal. Pada kasus ini adalah judul dari kontennya, tanggal dibuat dan apakah dia draft atau bukan. Draft berarti kontennya hanya bisa terlihat oleh kamu (pembuatnya).

Kamu bisa mempublishnya dengan mengganti nilai draft menjadi false.

---
title: "Post Pertama"
date: 2020-08-15T09:44:10+08:00
draft: false
---

Memberikan Tema Hugo

Saat ini website kamu belum punya tema atau template dasar yang bisa kamu lihat. Untuk itu kamu membutuhkan git jika belum menginstallnya.

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Penjelasan perintah:

git init

Di sini kita menginsialisasi repo baru. Agar bisa mengampil tema berdasarkan link git nya

git submodule add ..

Kita mengimport tema baru bernama "ananke". Ada banyak pilihan tema Hugo yang bisa kamu ambil di themes Hugo . Kamu tinggal memilih salah satunya dan mengganti link repo github di atas berdasarkan info tema masing-masing.

Di bawah folder "themes" kamu sekarang, sudah banyak informasi mengenal tema tersebut.

Beritahu website kamu untuk menggunakan tema ini dengan menambahkan

theme = "ananke" di file config.toml kamu

atau cukup jalankan

echo 'theme = "ananke"' >> config.toml

Menjalankan server Hugo

Sekarang kita jalankan website kamu.

hugo server

Website kamu sudah jadi! silahkan intip di http://localhost:1313/ atau baca output dari command tersebut tentang informasi lokasi localhost kamu

Screen Shot 2020-08-15 at 10.26.14 AM.png

Tulisa "my new hugo site" tersebut adalah judul standar yang ada di file config.toml yang bisa kamu ganti sendiri di config.toml bagian title="judul website kamu"

Kalau kamu mau menampilkan konten yang masih dalam bentuk draft cukup menambahkan -D

hugo server -D

Bagaimana cara mengganti tema Hugo

Kamu bosan atau menyesal dengan pilihan tema hugo kamu? Tenang dia ngga YOLO ko, alias cuma bisa satu kali. Kamu bisa kembali ke daftar tema themes Hugo dan melakukan hal yang sama seperti sebelumnya.

Cukup copy paste command git submodule salah satu temanya untuk menginstall.

Kalau sudah berhasil di folder themes kamu sekarang sudah ada lebih dari satu tema.

Untuk menggantinya sendiri tinggal ke file konfigurasi config.toml dan mengganti nilai theme = "nama tema pilihan kamu"

Kita akan bermain lagi dengan Hugo di artikel lainnya!

Meta: bagaimana cara install Hugo SSG, apa itu Hugo, cara membuat blog dengan Hugo, cara membuat webiste statis dengan Hugo