Hugo

Introduction Hugo

Hugo adalah salah satu Site Static Generator (SSG) paling populer saat ini. Penggunaannya sangat sederhana, efesien dan mudah untuk dideploy. Instalasi, clone theme dari github ataupun dari official website Hugo, edit file configuration kemudian deploy selanjutnya web statis anda sudah jadi.

Di artikel ini akan dijelaskan how-to membangun web statis dengan hugo di komputer lokal.

Step1. Instalasi

Instal Hugo

Buka terminal dan jalankan perintah berikut :

brew install hugo

untuk memastikan proses instalasi berhasil jalan perintah berikut di terminal :

hugo version

Instal Git

Unduh file exe git di situs resminya Git, sesuaikan dengan sistem operasi komputer anda. Jalankan instalasi git sampai selesai.

Buka terminal dan jalankan perintah berikut untuk memastikan apakah git sudah terinstal dengan benar.

git --version

Setelah Hugo dan Git selesai diinstal kita lanjutkan ke langkah selanjutnya.

Step2. Build Web Statis dengan Hugo

Sekarang kita akan membangun web statis dengan hugo di komputer lokal terlebih dahulu.

Set up the Site

Tentukan folder yang akan dijadikan tempat menyimpan project website anda. Kemudian buka terminal pada pada folder tersebut dan jalankan perintah hugo untuk membuat site baru. Pada contoh ini saya akan menyimpannya di folder hugo dengan nama project Websiteku

E:\hugo
? hugo new site Websiteku

dengan perintah di atas hugo menggenerate sebuah folder Websiteku dan semua folder dan file yg dibutuhkan untuk sebuah web statis.

new site hugo

Struktur folder yang digenerate oleh perintah hugo di atas bisa kita lihat seperti berikut :

struktur_web_hugo

Sekarang kita sudah berhasil membuat sebuah project web statis dengan hugo. Mari kita pelajari kegunaan dari masing-masing folder dan file pada struktur folder site statis hugo di atas. Di sini saya akan membahas beberapa yang penting menurut saya.

  • config.toml : ini adalah file tempat membuat semua konfigurasi website statis hugo. Anda dapat mempelajari dokumentasi lengkapnya di sini Configure Hugo

  • content : Semua kontent dari website anda baik itu post, halaman akan disimpan di dalam folder ini.

  • themes : theme yang digunakan oleh website statis anda akan disimpan di dalam folder ini.

Baik, sekarang lanjutkan dengan memilih theme untuk project webiste hugo.

Memilih dan Menginstal Theme

Hugo menyediakan banyak theme yang gratis maupun yang premium untuk kita gunakan. Anda dapat melihatnya di sini. Untuk project ini saya menggunakan theme “hello-friend-ng”. Mari kita install theme.

Ada 2 cara untuk menginstal theme pada hugo :

  1. Dengan cara mendownload langsung theme kemudian letakkan di dalam folder theme pada project hugo.
  2. Melakukan cloning dari repository theme di github ke dalam folder theme project hugo.

Di sini saya menggunakan cara yang kedua.

Buka terminal pada folder project hugo kemudian jalan perintah git untuk melakukan cloning.

E:\hugo\Websiteku
? git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

Setelah selesai cloning makan theme sudah tersedia di dalam project kita dan siap untuk kita gunakan.

cloning_theme

Setelah theme diinstal selanjutnya kita konfigurai pada file configuration.toml supaya theme dapat digunakan. Hal ini dapat kita lakukan dengan mengganti carra mereplace file config.toml yang ada di dalam root folder Websiteku dengan file config.toml yang ada di dalam folder themes/hello-friend-ng/exampleSite/. Ini adalah file configurasi bawaan dari themenya.

Kita Lanjutkan dengan membuat content/post di project hugo.

Membuat post/kontent di Hugo

Untuk membuat postingan di hugo adalah dengan menjalan perintah berikut pada direktori tempat porject hugo kita :

E:\hugo\Websiteku
? hugo new post\post1.md

Penjelasan :

hugo new

perintah untuk membuat post/konten di hugo

post\post1.md

post adalah folder tempat menyimpat content ini otomatis digenerate di dalam folder content dan post1.md adalah nama file kontent.

dengan perintah di atas kita sudah berhasil membuat kontent pada web hugo

post1

Selanjutnya kita buka file post1.md dengan text editor seperti notepad dan edit bagian draft ubah nilainya menjadi false supaya menjadi publish saat website dijalankan, dan tambahkan teks sebagai isi dari kontent.

---
title: "Post1"
date: 2021-11-10T21:50:30+07:00
draft: false
---

Ini Adalah Contoh Postingan di Hugo

Selanjutnya menjalankan server hugo supaya website bisa diakses. Jalankan perintah berikut pada terminal di direktori project hugo.

E:\hugo\Websiteku
? hugo server

hugo akan membuild website sesuai dengan konfigurasi pada file config.toml dan memberitahu website dapat diakses pada http://localhost:1313/

hugo_server

Sekarang mari kita akses webiste kita pada browser

localhost_post1

Selamat, anda sudah berhasil membuat web statis dengan hugo pada komputer lokal.