Kayal Hugo's theme for me looks modern yet calm for a blog site. I got curious somehow and trying it out. Fortunately, I really like that theme. So, here is my thoughts about it...
Beberapa hari lalu, saya merasa bosan dan ingin mencarikan suasana baru untuk blog-site saya ini. Lagipula, hampir satu tahun sudah blog-site ini lahir ke internet. Oleh karena itu, saya kira tidak ada salahnya untuk mulai mengganti beberapa pakaiannya dengan yang baru. Jadi, saya putuskan untuk ‘berwisata’ ke halaman tema hugo.
Ketika sedang khusyu’ mengamati etalase tema-tema Hugo yang keren di sana, tiba-tiba saja mata saya terpincut dengan sebuah tema yang secara suasana tampak remang-remah namun syahdu, mirip Gruvbox namun tidak bisa dibilang demikian, itulah dia, tema Kayal.
kayal demo site
Saya merasa seperti baru pertama kali melihat tema yang satu ini. Namun, ketika saya telaah lebih jauh, ternyata prasangka saya benar. Tema Kayal ini adalah tema yang relatif baru dan show up di situs tema Hugo. Berdasarkan catatan commit-nya di github, tema yang dibuat oleh Manjunath Mohan ini baru berumur 2 minggu ketika saya menulis artikel ini:
Selain desainnya yang menurut saya keren, tema Kayal ini bisa saya bilang juga mudah untuk dipasang untuk keperluan artikel saya. Memang, tidak semudah menggunakan tema saya sebelumnya (Papermod), tapi tidak sesulit yang dibayangkan juga…
Nah, di sini, saya mau coba berbagi langkah-langkah menggunakan tema Kayal ini untuk website kita. Mungkin ada juga nanti sedikit perbandingannya dengan tema Papermod (supaya saya bisa menjustifikasi klaim saya barusan tentang “tidak semudah Papermod”, hehe). Oiya, satu hal yang perlu dicatat, saya sudah memiliki artikel khusus yang membahas cara untuk membuat website dengan Hugo. Jadi, di artikel ini, saya hanya akan langsung men-tutor cara memasang dan mengkonfigurasi tema Kayal di website yang sudah kita buat sebelumnya.
INFO
Tulisan saya yang membahas langkah-langkah membuat static-site dengan Hugo bisa dikunjungi di sini:
Selanjutnya, kita perlu menghapus file config default Hugo yang ada di root direktori websitenya. Nama default file config-nya adalah hugo.toml (kecuali jika kalian sudah mengganti nama atau format filenya, maka disesuaikan):
Berikutnya, kita akan meng-copy beberapa file config tema kayal yang terdapat dalam direktori /themes../images/kayal/config/_default ke direktori root website kita di config/_default.
Terminal window
1
cp-Rthemes../images/kayal/config.
Seperti terlihat di tangkapan layar, folder config sudah berhasil di-copy ke root direktori website. Isi dari direktori config/_default tersebut ada 4, yaitu:
hugo.toml: file konfigurasi utama untuk hugo.
markup.toml: …
menus.toml: file konfigurasi untuk mengatur menu website.
params.toml: file konfigurasi untuk mengatur beberapa parameter website, seperti parameter untuk homepage, artikel, dan yang lainnya.
Tapi, kita hanya perlu fokus ke file-file konfigurasi 1, 3, dan 4 saja.
Sekarang, kita akan mulai mengkonfigurasi beberapa hal agar website kita dapat berjalan dengan lancar menggunakan tema Kayal. Pada bagian ini, saya akan menunjukkan fungsi-fungsi dari ketiga file konfigurasi tadi.
# Enable creation of robots.txt for search engine crawling.
20
enableRobotsTXT = true
21
22
# Length of default summaries.
23
summaryLength = 70
24
25
# Build drafts during site generation.
26
buildDrafts = true
27
28
[sitemap]
29
changefreq = 'daily'
30
filename = 'sitemap.xml'
31
priority = 0.5
32
33
# Google Analytics Configuration
34
# [services]
35
# [services.googleAnalytics]
36
# ID = 'G-MEASUREMENT_ID'
Pertama, kita perlu meng-uncomment baris ke-9 dan ke-11, yaitu baris title dan theme berikut:
info[Keterangan:]
Baris title adalah Judul website yang akan ditampilkan di pojok kiri website (nanti akan saya tunjukkan tangkapan layarnya). Sementara, baris theme tentu saja adalah untuk mengaktifkan tema Kayalnya.
:::
Jika sekarang kita menjalankan websitenya:
Terminal window
1
hugoserver
maka, berikut adalah penampakan awal websitenya:
Menambahkan list heading yang tampil di ToC (Table of Content) alias daftar isi
Kita hanya perlu menambahan baris berikut di dalam file config/_default/hugo.toml:
hugo.toml
1
[markup]
2
[markup.tableOfContents]
3
endLevel = 5# ganti di sini, disesuaikan dengan kebutuhan
# The main menu is displayed in the header at the top of the page.
3
# Acceptable parameters are name, page, url, pre, weight.
4
5
# Add a trailing '/' to local URLs.
6
# For example: /posts/
7
# NOT: /posts
8
9
# `pre` is an icon ID. For a list of all available icons, check [https://github.com/mnjm../images/kayal/tree/main/assets/icons]
10
11
# [[main]]
12
# name = "posts"
13
# title = "Posts"
14
# url = "/posts/"
15
# weight = 1
16
#
17
# [[main]]
18
# name = "tags"
19
# title = "Tags"
20
# url = "/tags/"
21
# weight = 2
22
#
23
# [[main]]
24
# name = "about"
25
# title = "About"
26
# url = "/about/"
27
# weight = 3
28
#
29
# [[main]]
30
# name = "github"
31
# pre = "github"
32
# name = ""
33
# url = "https://github.com/mnjm/kayal"
34
# weight = 4
Kita hanya perlu meng-uncomment baris-baris menu apa yang ingin ditampilkan. Misalkan saya ingin menampilkan 3 menu utama, yaitu menu blog, tutorial, dan about. Maka berikut adalah baris-baris yang di-uncomment:
1
[[main]]
2
name = "blog"
3
title = "Blog"# --> akan ditampilkan di website
4
url = "/blog/"# --> merujuk ke direktori content/blog
5
weight = 1# --> urutan ke-1 tampil di website
6
7
[[main]]
8
name = "tutorial"
9
title = "Tutorial"# --> akan ditampilkan di website
10
url = "/tutorial/"# --> merujuk ke direktori content/blog
11
weight = 2# --> urutan ke-2 tampil di website
12
13
[[main]]
14
name = "about"
15
title = "About"# --> akan ditampilkan di website
16
url = "/about/"# --> merujuk ke direktori content/blog
17
weight = 3# --> urutan ke-3 tampil di website
Berikut adalah penampakan website-nya setelah konfigurasi menu ditambahkan:
Silakan menambahkan, mengurangi, atau memodifikasi sesuai dengan preferensi kalian. Gunakan format seperti yang saya contohkan tersebut.
Kita bisa mengkonfigurasi beberapa hal di file params.toml ini. Kita bisa menambahkan pesan greetings, menambahkan foto, menambahkan icon di judul website, menunjukkan artikel terbaru, hingga pengaturan terkait artikelnya secara spesifik, misalnya menambahkan fitur copy code pada codeblocks, memunculkan daftar isi, dan masih banyak lagi.
Masing-masing parameter jika saya jelaskan satu persatu di artikel ini, saya jamin akan jadi terlalu panjang, (mungkin) intimidatif, dan melelahkan. Padahal, di setiap baris kodenya sudah dijelaskan sebetulnya. Jadi, silakan diamati baris perbaris kode yang akan saya lampirkan. Berikut adalah isi file konfig params.toml yang saya gunakan:
NOTE
Sebelum itu, kita akan buat 3 buah direktori konten dengan nama seperti yang sudah kita tentukan sebelumnya di bagian menu, yaitu direktori content/blog, content/tutorial, dan content/about.
Terminal window
1
mkdir-pcontent/blogcontent/tutorialcontent/about
Kemudian, mari buat sebuah file baru di masing-masing direktori tersebut.
Terminal window
1
hugonewcontentcontent/blog/perkenalan.md# membuat file baru di direktori content/blog
2
hugonewcontentcontent/tutorial/miegoreng.md# membuat file baru di direktori content/tutorial
3
hugonewcontentcontent/about/about.mdmembuat# file baru di direktori content/about
Sekarang, silakan isi masing-masing file tersebut dengan sebuah kalimat.
Misalnya, kalimat yang saya gunakan untuk file content/blog/perkenalan.md:
Terminal window
1
Halo!NamasayaWildan!Salamkenal!
Kalimat yang saya gunakan untuk file content/tutorial/miegoreng.md:
# Whether to display taxonomies as a grid of cards.
90
cardView = true
91
92
# Term settings
93
[term]
94
# Whether to group articles by year.
95
groupByYear = false
96
# Whether to show dates with article listings.
97
showDate = true
98
99
# Social links
100
# [[social]]
101
# name = "GitHub"
102
# icon = "github"
103
# url = "https://github.com/mnjm/kayal"
104
#
105
# [[social]]
106
# name = "Email"
107
# icon = "email"
108
# url = "mailto:name@example.com"
109
#
110
111
[[social]]
112
name = "Instagram"
113
icon = "instagram"
114
url = "https://instagram.com/"
115
116
[[social]]
117
name = "Tiktok"
118
icon = "tiktok"
119
url = "https://tiktok.com/"
120
121
[[social]]
122
name = "Twitter / X"
123
icon = "x-twitter"
124
url = "https://x.com/"
125
126
[[social]]
127
name = "Github"
128
icon = "github"
129
url = "https://github.com/"
130
131
[[social]]
132
name = "Linkedin"
133
icon = "linkedin"
134
url = "https://linkedin.com/"
Berikut adalah penampakan hasil file konfigurasi params.toml di atas:
Catatan!
Gambar atau foto yang ingin ditampilkan di website berlokasi di direktori assets/imgs . Perlu dicatat juga bahwa file foto yang akan ditampilkan pada website minimal memiliki ukuran 200px X 200px. Jika belum ada, silakan buat dulu:
Terminal window
1
mkdirassets/imgs
Jika kalian tidak ingin ada icon media sosial, tinggal uncomment bagian social di file konfigurasi params.toml di atas.
Urutan artikel di bagian Featured muncul berdasarkan waktu dibuatnya artikel tersebut. Yang paling atas adalah yang paling baru ditulis atau dibuat.
Sebetulnya, kita masih bisa menambahkan semacam pesan pengantar di bawah greetings pada tampilan utama website kita. Kita hanya perlu membuat file _index.md di direktori content:
Terminal window
1
touchcontent/_index.md
2
echo"Website ini akan saya gunakan untuk berbagi, baik *update* aktivitas harian, tips dan trik berbagai macam hal, dan masih banyak lagi. Oiya, jika kalian ingin menghubungi saya, saya memiliki beberapa media sosial di bawah ini ya! Selamat membaca!"
Supaya lebih fair, perbandingan ini akan saya buat dengan 2 mode, yaitu mode kelebihan tema Kayal dibandingkan dengan tema Papermod dan mode kekurangan tema Kayal dibandingkan dengan tema Papermod.
Yakkkk, itu saja. Wkwkwk.
Karena kekurangannya yang tidak signifikan dibandingkan dengan kelebihannya, akhirnya saya memutuskan untuk mengganti tema.
Xixixixi.
Okedeh, sekian dulu review singkat saya mengenai tema Kayal ini.
Sampai ketemu lagi di artikel saya yang lain!
See ya! 😎