Materi Generate Static Website With Hugo

Apa kabar semua….

Selamat datang kembali diblog saya.

Kali ini saya akan memberikan materi tentang Generate Static Website With Hugo yang telah disampaikan oleh kakak Gita Citra Puspita yang sedang bekerja sebagai Trainer dan Web Developer di Kolla.

Jangan lupa untuk persiapkan instalasi berikut ini untuk memperlancar belajar kalian:

🌼 Install Git Bash

Link: https://git-scm.com/download/win

🌼 Install Go 1.5+

Link: https://golang.org/dl/

🌼 Install govendor

Link: https://github.com/kardianos/govendor

Hari ini kita akan berkenalan dengan HUGO.

Apa itu Hugo?

Hugo adalah salah satu open source generator website statis dengan kecepatan yang baik, fleksibilitas baik, dan memberikan kemudahan pada pengguna dalam membuat statis website.

Banyak sekali jenis generator website statis, ada HUGO, phenomic, grav, Jekyll, dll

Apa bedanya HUGO dengan beberapa generator itu?

Hugo adalah Go-based templating dan Hugo dikembangkan dengan bahasa Go-lang. Hugo memiliki banyak sekali tema website statis yang bisa kita gunakan dan kita customize.

Berikut ini link kumpulan tema website yang bisa kamu gunakan pada Hugo:

https://themes.gohugo.io/

Dari hasil research kak Gita, hanya HUGO yang punya banyak variasi tema website statis. Selain menggunakan tema yang sudah ada, pengguna juga bisa membuat tema sendiri untuk website statis miliknya. Kenapa harus menggunakan Hugo? Kan banyak tuh generator webstatis selain Hugo.

Berikut ini ada beberapa keunggulan Hugo dibandingkan dengan generator website lainnya:

☘ Dokumentasi softwarenya baik

Hugo memiliki dokumentasi software yang sangat baik dan detail. Dokumentasi penjelasan tidak hanya berupa teks saja, namun ada juga video tutorialnya. Ini memberikan kemudahan pada pengguna baru untuk memahami Hugo. Dokumentasi yang baik akan memudahkan developer dalam menggunakan tools.

Berikut ini link dokumentasi HUGO:

https://gohugo.io/documentation/

Coba di cek deh. Pasti kalian akan sepakat.

☘ Sangat terstruktur untuk pengelompokan konten websitenya.

Hugo memiliki pengorganisasian konten website yang rapih.

☘ Memiliki banyak theme yang bisa di customize

HUGO memiliki banyak tema dan beberapa tema bisa di customize

☘ Supported Content Formats Markdown and Emacs Org-Mode.

Nah loh, apa itu Markdown? Webstatis jaman now bisa dibuat dengan menggunakan Markdown. Jadi tidak harus nulis pake tag-tag gitu (tag HTML).

Markdown adalah sebuah tools untuk konversi text-to-HTML yang bisa digunakan ketika membuat konten pada web. Markdown memungkinkan kita untuk membuat sebuah format html dengan sangat sederhana dan ramah lingkungan (easy-to-read dan easy-to write). Kalau kamu biasa pake github pasti pernah membuat file dengan format README dengan format *.md (format file Markdown).

Ini contoh penulisan konten website dengan menggunakan format Markdown:

Tampilan webnya seperti apa?

Seperti gambar di bawah ini:

easy-to-read dan easy-to write kan?

Selaiin Markdown, HUGO juga support Emacs Org-Mode.

Apa itu Emacs Org-Mode?

Sama seperti markdown, Org-Mode juga sebuah format penulisan teks. Nah dia bisa di generate oleh aplikasi dengan nama Emacs.

Contoh penulisan Org-Mode pada Emacs:

Display pada web:

☘ HUGO mendukung Front Matter dengan 3 format, TOML, YAML, dan JSON.

Generator pada umumnya hanya mendukung satu format Front Matter, yaitu YAML

Kalau HUGO mendukung 3 Format.

Berikut contoh dari format Front Matter pada HUGO:

Gambar di atas adalah contoh dari YAML Front Matter Format

Gambar di atas adalah contoh dari TOML Front Matter Format

Gambar di atas adalah contoh dari JSON Front Matter Format

Dari contoh di atas kita akan melihat tulisan berikut:

---

title: "spf13-vim 3.0 release and new website"

description: "spf13-vim is a cross platform distribution of vim plugins and resources for Vim."

tags: [ ".vimrc", "plugins", "spf13-vim", "vim" ]

lastmod: 2015-12-23

date: "2012-04-06"

categories:

  - "Development"

  - "VIM"

slug: "spf13-vim-3-0-release-and-new-website"

---

Tulisan

title :

pada tulisan dengan YAML itu maksudnya seperti

<title></title>

Pada halaman web page

Tulisan

description:

pada tulisan dengan YAML itu maksudnya seperti

<meta name="description">

Pada halaman web page

Dari ke-3 contoh di atas dapat kalian pahami bahwa Front Matter adalah isi pertama dari sebuah page website yang berisi informasi tentang title, dan meta data.

☘ Mendukung Shortcode yang menghandle penyisipan konten yang tidak bisa dilakukan jika menggunakan Markdown.

Ketika kita membuat website tentu kita ingin menyisipkan video tutorial, post instagram, post twitter di website statis kita. Kita tidak bisa menyisipkannya dengan menggunakan Markdown. Kalau di generator lain, mereka pasti akan memasukan tag html. Nah, kalau di HUGO tidak perlu, HUGO memiliki  shortcode untuk menyisipkan hal-hal tersebut.

Bisa kalian intip di sini:

https://gohugo.io/content-management/shortcodes/