Mengenal Hugo SSG, Framework untuk Membuat Website Statis

Last Updated on October 31, 2023 by

Hugo atau dikenal juga dengan Hugo SSG adalah HTML dan CSS website generator dengan bahasa pemrograman Go Lang atau Go. Dengan Hugo SSG, kita dapat menciptakan static site atau website statis.

Hugo adalah sebuah open-source framework yang saat ini begitu populer di kalangan developer dan programmer. Developer Hugo pun mengklaim, Hugo lebih cepat dibanding SSG lain seperti Jekyll, Middleman, dan Octopress.

Hugo pertama kali dibuat oleh Steve Francia di tahun 2013, yang kemudian mendapat peningkatan besar pada fitur dan performa setelah dikembangkan oleh developer yang dipimpin oleh Bjørn Erik Pedersen sejak tahun 2015.

Saat ini Hugo telah dilisensi dibawah Apache License 2.0. Framework ini memiliki keunggulan diantaranya, cepat, mudah digunakan, dan dapat dikonfigurasi. Hugo SSG mengambil direktori dengan konten dan template dan membuatnya menjadi situs web HTML lengkap.

Hugo SSG mengandalkan Markdown file dengan materi depan untuk metadata, dan Anda dapat menjalankan Hugo dari mana pun. Hal ini membuat Hugo SSG berfungsi dengan baik untuk host bersama dan sistem lain yang Anda tidak memiliki akun dengan hak istimewa. Hugo SSG pun dapat merender situs web berukuran sedang dalam sepersekian detik.

Aturan praktis yang baik adalah setiap konten dirender dalam waktu sekitar 1 milidetik. Hugo dirancang agar berfungsi dengan baik untuk semua jenis situs web termasuk blog, tumbles, dan dokumen.

Berikut langkah mudah membuat website dengan Hugo Static Site:

1. Menginstal Hugo SSG

Anda dapat mengunjungi www.gohugo.io lalu klik Quick Start, di sana telah disediakan tutorial lengkap menginstal Hugo lengkap untuk semua OS.

• MacOS dan Linux, gunakan package manager homebrew

brew install hugo

• MacPorts, dapat menginstal Hugo dengan mengikuti one-liner dibawah ini

port install hugo

• Windows gunakan package manager chocolatey

choco install hugo –confirm

• Scoop, dapat dilakuan sebagai berikut

scoop install hugo

atau

scoop install hugo-extended

2. Create New Site

Setelah Anda menginstal Hugo, Anda dapat langsung membuat website baru dengan kode sebagai berikut:

hugo new site ProyekSaya

Perintah ini akan membuat proyek atau folder baru sesuai dengan nama yang Anda ketikkan. Silakan buka text editor untuk melihat instalasi Hugo.

3. Create New Page

Membuat halaman baru pada website Anda dapat mengetik

hugo new posts/post-pertama.md

File yang sudah Anda buat pun akan berisi:

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

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.

4. Menambahkan Tema

Setelah membuat website, tentu websitemu belum mempunyai tema atau template dasar yang dapat dilihat. Oleh karena itu, Anda membutuhkan git dalam menginstalnya, namun Anda juga dapat menggunakannya tanpa menginstal git. Hanya saja, penggunaan git lebih memudahkan Anda.

Anda dapat melihat tema pada https://themes.gohugo.io/ di sini Anda akan menemukan banyak list tema yang cocok. Anda juga dapat membuat tema Anda sendiri dengan mengetik “hugo new theme <THEMENAME>” pada command. Pada contoh ini, kami menggunakan tema Ananke:

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

Penjelasan:

git init

Agar dapat mengambil tema berdasarkan link gitnya.

git submodule add..

link repo pada git submodule add adalah link tema yang kita ambil. Anda dapat memilih salah satu dan mengganti link repo di atas berdasarkan info tema yang Anda pilih.

Catatan untuk pengguna non-git

• Jika Anda belum memasang git, Anda dapat mengunduh arsip versi terbaru tema ini dari: https://github.com/budparr/gohugo-theme-ananke/archive/master.zip
• Ekstrak file .zip tersebut untuk mendapatkan direktori “gohugo-theme-ananke-master”.
• Ubah nama direktori itu menjadi “ananke”, dan pindahkan ke direktori “themes /”.

Setelah memilih tema, hal selanjutnya yang harus dilakukan adalah mengkonfigurasikan tema dengan menjalankan:

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

5. Menambahkan Beberapa Konten

Untuk menambahkan konten Anda dapat membuatnya secara manual dengan contoh sebagai berikut

content/<CATEGORY>/<FILE>.<FORMAT>

Tambahkan metadata di dalamnya, namun Anda dapat menggunakan perintah baru untuk melakukan beberapa hal untuk Anda (seperti menambahkan judul dan tanggal).

6. Menjalankan Server Hugo

Setelah menambahkan konten, Anda dapat menjalankan website Anda. Website ini dapat dilihat di localhost atau baca output dari command tentang informasi localhost Anda. Jika Anda ingin menampilkan konten yang masih berbentuk draft, Anda dapat menambahkam –D seperti contoh berikut.

hugo server –D

7. Mengganti tema Hugo

Mengganti tema Hugo sangatlah mudah. Anda hanya perlu copy paste command git submodule salah satu temanya untuk menginstal. Jika sudah, Anda akan menemukan lebih dari satu tema pada folder themes.

Berikut ini adalah deskripsi dari perintah paling umum yang akan Anda gunakan saat mengembangkan proyek dengan Hugo.

1. Tes Instalasi

Anda dapat mengetes Hugo apakah sudah terinstal dengan baik menggunakan ‘help’ command.

hugo help

Anda akan menemukan berbagai baris yang berisi baris-baris penjelasan.

2. Command pada Hugo

Penggunaan paling umum dalam menjalankan hugo dengan direktori Anda saat ini sebagai direktori masukan. Ini menghasilkan situs web Anda ke direktori public/ secara default, meskipun Anda dapat menyesuaikan direktori keluaran dalam konfigurasi situs Anda dengan mengubah bidang publishDir. Perintah hugo membuat situs Anda menjadi publik / dir dan siap untuk di-deploy ke server web Anda:

hugo

0 draft content

0 future content

99 pages created

0 paginator pages created

16 tags created

0 groups created

in 90 ms

3. Draft, Future, dan Expired Content

Hugo mengizinkan Anda untuk mengatur draft, publishdate, dan expirydate pada konten front matter. Secara default, Hugo tidak akan mempublish:

– Konten dengan nilai future publishdate

– Konten dengan status draft: true

– Konten dengan nilai past expirydate.

Ketiganya dapat diganti selama pengembangan dan penerapan lokal dengan menambahkan flag pada hugo dan hugo server atau dengan mengubah nilai Boolean yang ditetapkan ke kolom dengan nama yang sama (tanpa-) dalam konfigurasi:

1. – –buildFuture
2. – –buildDrafts
3. – –buildExpired

4. LiveReload

Hugo memiliki LiveReload bawaan. Cara paling umum dan sederhana menggunakan Hugo saat mengembangkan situs adalah denga meminta Hugo menjalankan server dengan hugo server command. Berikut perubahannya:

hugo server

0 draft content

0 future content

99 pages created

0 paginator pages created

16 tags created

0 groups created

in 120 ms

Watching for changes in /Users/yourname/sites/yourhugosite/{data,content,layouts,static}

Serving pages from /Users/yourname/sites/yourhugosite/public

Web Server is available at http://localhost:1313/

Press Ctrl+C to stop

Hal ini akan menjalankan server web yang berfungsi penuh sembari mengawasi sistem file Anda untuk menambahkan, menghapus, atau mengubah area berikut dari proyek Anda:

• /static/*
• /content/*
• /data/*
• /i18n/*
• /layouts/*
• /themes/<CURRENT-THEMES/*
• Config

5. Disable LiveReload

LiveReload bekerja dengan memasukkan JavaScript ke dalam halaman yang dibuat oleh Hugo. Skrip membuat sambungan dari klien soket web browser ke server soket web Hugo. Namun terkadang pengguna perlu melakukan disable pada LiveReload, berikut caranya.

hugo server –watch=false

atau

hugo server –disableLiveReload

Kemudian tambahkan key-value pada file  config.toml atau config.yml seperti berikut:

disableLiveReload = true

disableLiveReload: true

6. Deploy Website Anda

Setelah menjalankan server untuk local webdevelopment, Anda perlu menjalankan final hugo tanpa bagian server dari command untuk membangun ulang situs Anda. Deploy situs hanya perlu dilakukan dengan mengkopi direktori public/ pada produksi web server.

Demikian penjelasan terkait Hugo, tutorial, serta kegunaan dasar fitur-fitur Hugo. Hugo adalah salah satu framework yang baik untuk Anda membuat website statis dan patut Anda coba khususnya bagi developer pemula.

Jika Anda tertarik untuk tahu informasi seputar teknologi aplikasi dan website, kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.