Agung Pratama - Blog

My Blog Setup - Sepintas Tentang Hugo Configuration Setting

March 22, 2019 7 minutes

Di post sebelumnya, saya telah mendeskripsikan step by step membuat blog dengan Gitlab Page + Hugo + Gitlab CI, hingga mempulikasikannya ke website yang bisa diakses oleh publik di https://<user>.gitlab.io/<repo-name>, dalam kasus saya: https://bangau1.gitlab.io/my-blog/ (ini bukan blog sebenarnya, hanya demo blog saja)

Hugo dan Struktur Konten

Sebelum kita masuk lebih jauh mengenai konfigurasi setting dari Hugo, saya akan terlebih dahulu menjelaskan struktur konten dari Hugo, spesifiknya struktur yang disediakan oleh template Hugo dari Gitlab.

├── config.toml
├── content
│   ├── _index.md
│   ├── page
│   │   └── about.md
│   └── post
│       ├── 2015-01-04-first-post.md
│       ├── 2015-01-15-pirates.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
│   └── favicon.ico
└── themes
    └── beautifulhugo

config.toml file

Ini adalah file konfigurasi utama dari Hugo, dengan format berupa toml. Di sini ada setting terkait:

  • informasi mengenai website itu sendiri, contohnya informasi Author and link sosial media (contoh: Facebook, Twitter, GitHub, Gitlab, dll)
  • setting konfigurasi dari sistem website itu dan parameter-parameter terkait dengan tema website yang dipakai

Untuk file ini, selain toml format, kita juga bisa menggunakan format lainnya : yaml dan json.

content directory

Ini adalah lokasi konten dari website berada, terdiri dari 2 subfolder:

  • page Sebuah folder di mana kita dapat menaruh halaman yang berdiri sendiri, tidak akan menampilkan halaman-halaman lainnya. Contohnya: halaman Tentang Saya, Portofolio, dll.
  • post Seluruh konten yang ditaruh di folder ini akan ditampilkan berurutan sesuai tanggal posting. Di sinilah tempat penulis menulis postingan blognya.

Selain 2 subfolder di atas, ada juga sebuah file istimewa _index.md. Kegunaan dari file ini untuk menampilkan sticky content yang terus akan kelihatan di setiap pagination. Contoh pemakaian sticky content ini adalah: pemberitahuan mengenai aturan berkomentar di website ini, pemberitahuan penting buat pembaca, dll.

resources directory

Sejujurnya, saya masih belum tahu banyak kegunaan folder ini. Yang saya tahu, ini digunakan oleh Hugo untuk men-generate file asset (javascript, image, dll) yang telah mengalami post-processing (contoh: thumbnail processing).

static directory

Dibanding dengan folder resources, di folder static kamu dapat menaruh file statis apapun, seperti ikon avatar website, beberapa foto yang sering digunakan oleh halaman-halaman website, dll.

themes

Kalau folder yang ini sudah jelas ya 😄, untuk tema website atau blog. Kalau memakai Hugo Template dari Gitlab, standarnya menggunakan tema beautifulhugo.

Konfigurasi Penting Hugo

Coba lihat file config.toml, di sini kamu akan menemukan konfigurasi standar yang diberikan dari template Hugo dari Gitlab, seperti berikut:

baseurl = "https://bangau1.gitlab.io/my-blog/"
contentdir    = "content"
layoutdir     = "layouts"
publishdir    = "public"
title = "Beautiful Hugo"
canonifyurls  = true

DefaultContentLanguage = "en"
theme = "beautifulhugo"
metaDataFormat = "yaml"
pygmentsUseClasses = true
pygmentCodeFences = true
#disqusShortname = "XXX"
#googleAnalytics = "XXX"

[Params]
  subtitle = "Hugo Blog Template for GitLab Pages"
  logo = "img/avatar-icon.png"
  favicon = "img/favicon.ico"
  dateFormat = "January 2, 2006"
  commit = false
  rss = true
  comments = true
#  gcse = "012345678901234567890:abcdefghijk" # Get your code from google.com/cse. Make sure to go to "Look and Feel" and change Layout to "Full Width" and Theme to "Classic"

#[[Params.bigimg]]
#  src = "img/triangle.jpg"
#  desc = "Triangle"
#[[Params.bigimg]]
#  src = "img/sphere.jpg"
#  desc = "Sphere"
#[[Params.bigimg]]
#  src = "img/hexagon.jpg"
#  desc = "Hexagon"

[Author]
  name = "Some Person"
  email = "youremail@domain.com"
  facebook = "username"
  googleplus = "+username" # or xxxxxxxxxxxxxxxxxxxxx
  gitlab = "username"
  github = "username"
  twitter = "username"
  reddit = "username"
  linkedin = "username"
  xing = "username"
  stackoverflow = "users/XXXXXXX/username"
  snapchat = "username"
  instagram = "username"
  youtube = "user/username" # or channel/channelname
  soundcloud = "username"
  spotify = "username"
  bandcamp = "username"
  itchio = "username"
  keybase = "username"


[[menu.main]]
    name = "Blog"
    url = ""
    weight = 1

[[menu.main]]
    name = "About"
    url = "page/about/"
    weight = 3

[[menu.main]]
    identifier = "samples"
    name = "Samples"
    weight = 2

[[menu.main]]
    parent = "samples"
    name = "Big Image Sample"
    url = "post/2017-03-07-bigimg-sample"
    weight = 1

[[menu.main]]
    parent = "samples"
    name = "Math Sample"
    url = "post/2017-03-05-math-sample"
    weight = 2

[[menu.main]]
    parent = "samples"
    name = "Code Sample"
    url = "post/2016-03-08-code-sample"
    weight = 3

[[menu.main]]
    name = "Tags"
    url = "tags"
    weight = 3

Di sini saya tidak akan menjelaskan semuanya karena terlalu panjang nantinya 😄, hanya yang terpenting saja: bagian yang cukup untuk diubah supaya blognya berfungsi dan tampil layaknya sebuah blog yang biasa.

baseurl

Ini adalah konfigurasi yang wajib diubah agar link asset di blogmu bisa di-render dengan benar. Contohnya jika blogmu ada di url https://foo.gitlab.io/blog, maka baseurl: https://foo.gitlab.io/blog.

title

Cukup jelas ya kalau yang ini 😄

disquessShortname

Hugo tidak memiliki comment system, namun jangan khawatir karena ada aplikasi comment system dari pihak ketiga yang dapat diintegrasikan di Hugo, yakni Disqus. Nah, ini adalah konfig untuk mengaktifkan integrasi tersebut. Konfig ini awalnya tidak diaktifkan di template Hugo dari Gitlab Page. Silahkan uncomment konfig tersebut dan isi dengan short name website Disqus kamu sendiri. Caranya? Gampang banget lho, tinggal bikin akun di sana, di admin dashboard, tambahkan site baru. Dari site baru nanti akan diberikan short name yang bisa ditaruh di konfig disquessShortname ini.

googleAnalytics

Jika kamu ingin memiliki sistem analytics yang sederhana, bisa mempertimbangkan untuk memakai Google Analytics (GA), karena Hugo sendiri tidak menawarkan fitur statistik pengguna website atau blog. Dengan memakai Google Analytics, kamu dapat mendapatkan insight statistik pengguna blogmu (e.g: jumlah pengakses dari tiap halaman dari blog) dan informasi demograsi juga. Silahkan ditaruh GA id di konfig ini, biasanya dalam format: UA-xxxxxxx-xx.

enableemoji

Nah, ini adalah salah satu fitur yang saya suka dari Hugo, yaitu enableemoji. Ini akan membuat postingan blogmu lebih hidup 😸 dengan menaruh ikon emoji. Silahkan set enableemoji = true di config.toml dan voila, emoji dapat di-render dengan baik oleh browser. Contohnya di postingan kamu, bisa menulis seperti ini:

Di postingan kamu:

  • : smile_cat : (hilangkan spasi setelah dan sebelum emoji text –> :<emoji-text>:)
  • : see_no_evil :

Output:

😸

🙈

Params.subtitle

Parameter subtitle di dalam bagian [Param] diperuntukkan untuk konfigurasi subtitle blog. Contohnya: "Movie Lover, Engineer, bla bla".

Params.logo and Params.favicon

Nah untuk yang ini juga parameter penting: buat menaruh logo website dan favicon yang berada di folder static. Silahkan menaruh logo blog kamu (dan mungkin juga bisa memakai ini favicon generator) dan refer ikon tersebut di konfig terkait. Contohnya untuk blog saya:

[Params]
  subtitle = "Movie lover. Engineer. DevOps"
  logo = "avatar.jpg"
  favicon = "avatar.jpg"

Dan saya menaruh file avatar.jpg sebagai logo dan favicon di folder static

blog.agung.tech/static
├── avatar.jpg

Params.Author

Sudah jelas sekali ya, konfig ini untuk menaruh informasi author dari blog atau websitemu.

Params.menu.main

Ini adalah parameter khusus untuk mengorganisir menu paling atas dari blog. Dengan konfigurasi ini, kamu dapat mendefinisikan beberapa menu, menamakannya dan menaruhnya dalam suatu hierarki parent menu. Selain itu kamu juga dapat mensortir urutan menu berdasarkan parameter weight (nilai weight yang kecil, makan akan berada paling kiri). Contohnya bisa seperti ini:

[[menu.main]]
    name = "Blog"
    url = ""
    weight = 1

[[menu.main]]
    name = "About"
    url = "page/about/"
    weight = 2

[[menu.main]]
    name = "Tags"
    url = "tags"
    weight = 3

Okay, saya rasa sudah menjabarkan sebagian besar konfigurasi yang penting di Hugo, harapannya dengan penjelasan ini, blog kamu lebih terasa personal ya 😸

Kalau menurut kamu ada tambahan konfigurasi penting lainnya, silahkan dijabarkan di kolom komentar di bawah ya.

Testing di Environment Lokal

Untuk menge-test konfigurasi dan konten blogmu tanpa harus mempublikasikan ke publik, kamu dalam menge-test di local komputer terlebih dahulu. Ini penting sekali, kamu tidak mau kan mengubah-ngubah konfigurasi blog sehingga merusak sistem blog yang diakses oleh publik. Lebih baik di-test dulu ya:

  1. Install aplikasi Hugo CLI sesuai pentunjuk di sini
  2. Masuk ke dalam folder blog kamu melalui terminal, lalu lakukan:
hugo serve

Command tersebut akan memproses dan membangun blog kamu, dan juga mem-print informasi di mana kamu dapat mengaksesnya melalui environment lokal. Biasanya dapat diakses melalui http://localhost:1313

Gimana? Cukup simpel dan menyenangkan bukan?

What’s Next

Postingan blog selanjutnya, saya akan menjabarkan sedikit workflow dalam membuat blog post di Hugo. Stay tuned!

My Blog Setup - Setup Repositori Blog dan CI/CD
My Blog Setup - Cara Membuat Blog Post di Hugo
comments powered by Disqus
Copyright © 2019–2020 by Agung Pratama.