takbiasa.com Pakai Hugo, Sensasinya Beda Banget!
Sekarang ini mau bikin blog sangat banyak caranya. Ada Blogger dan WordPress, 2 layanan yang saya pakai ketika ingin membuat blog. Nah kali ini saya mencoba hal baru dan sangat unik. Selama ini saya pakai WordPress.org ketika bikin blog dan bahkan untuk jasa website.
Semuanya berubah ketika WordPress mulai terasa berat dan loadingnya lama ketika ingin mulai menulis, penyebabnya adalah Block Editor yang bernama Gutenberg. Saya terus mencari alternatif selain WordPress yang lebih sederhana dan tentu saja cepat.
Terlintas di pikiran saya untuk menggunakan pure HTML dan Bootstrap, tapi kemudian saya pikir lagi, bakalan repot nanti kalau artikelnya banyak. Ga mungkin saya edit link dan halaman index satu per satu ketika menulis artikel baru. Saya butuh sistem manajemen konten yang bisa mengurus itu semua.
Sebelum pakai Hugo saya sudah mencoba HTMLy. Ini adalah flat-file CMS yang menggunakan PHP tanpa database. Ternyata pembuatnya orang Indonesia dan fiturnya menurut saya sangat bagus. Loading blog juga sangat cepat tapi saya bingung ketika ingin ganti desain. Pilihan theme HTMLy sangat terbatas dan tidak ada dokumentasi cara membuat theme sendiri.
takbiasa.com adalah blog yang saya gunakan untuk bereksperimen. Dulu pakai HTMLy sebelum pakai Hugo. Alasannya adalah saya ingin blog yang benar-benar statis tapi dengan kemudahan manajemen konten. Ketika sedang belajar PHP di Petani Kode, saya melihat di bagian footer ada tulisan “using Hugo 0.80.0”.
Blog Petani Kode itu cepat banget loadingnya, akhirnya saya cari tutorialnya dan ternyata banyak yang membahas tentang Hugo di YouTube. Saya tonton video tutorial Hugo dari channel Sekolah Koding.
Awalnya agak ragu karena untuk pakai Hugo ini harus install sesuatu yang berbeda, bukan install program dengan user interface pada umumnya. Saya harus berurusan dengan command line seperti pakai Linux, tapi ternyata tidak sesulit yang saya kira. Buktinya, takbiasa.com sekarang pakai Hugo.
Kuncinya adalah mau meluangkan waktu untuk membaca dokumentasi dan mencari sendiri solusinya di Google. Ketika ada sesuatu yang sulit jangan menyerah, istirahat sejenak lupakan hal tersebut dan ketika sudah mulai terasa ringan, mulai lagi.
Cara Kerja Hugo
Awalnya saya bingung dengan static site generator seperti Jekyll dan Hugo. Mereka ini ngapain sih sebenarnya, cuma mau nulis artikel aja ribet banget kelihatannya. Begitulah pandangan saya ketika pertama kali membaca website Hugo.
Sebelum pakai Hugo saya pernah ingin mencoba menggunakan HTML, tapi kebayang gimana ribetnya update link dan navigasi setiap ada artikel baru. Nah! Ini gunanya Hugo, saya bisa benar-benar fokus menulis konten tanpa perlu pusing hal-hal teknis seperti itu.
Bisa dibilang Hugo ini seperti CMS (Content Management System) tapi bedanya tanpa GUI seperti WordPress. Awalnya saya bingung bagaimana menulis artikelnya, tapi ternyata mudah kok, pakai markdown. Ngetik artikel di Visual Studio Code ternyata seru juga :D
Hugo ini nantinya akan membuat file statis (HTML & CSS) dengan perintah hugo --minify atau hugo -D. Nah file itu yang akan diupload ke hosting. Kalau di tutorial sih uploadnya ke GitHub atau Netlify tapi saya belum begitu paham. Ini saya juga masih proses belajar bagaimana proses uploadnya pakai rsync.
Kelebihan Hugo Dibandingkan WordPress
Di artikel ini saya tidak akan membahas cara instalasi Hugo. Ada banyak orang yang lebih layak menjelaskan cara tersebut. Kalau kalian tertarik pakai Hugo bisa tonton video Sekolah Koding atau cari tutorial dalam bentuk tulisan. Kelebihan Hugo menurut saya adalah:
Loading Blog Sangat Cepat. Ya wajar saja karena namanya juga Static Site Generator. Tidak ada kode server side PHP, tidak ada database.
Menulis Jadi Mudah dan Cepat. Ternyata mengetik pakai markdown tidak sesulit yang saya duga. Lama-lama juga terbiasa dan malah rasanya lebih seru. Contohnya kalau mau bikin link, saya tidak perlu menggerakan trackpad. Cukup ketik
[judul website](link websitenya)Bikin Theme Mudah. Nah ini yang saya suka dari Hugo, proses bikin themenya cukup mudah untuk pemula seperti saya. Kalau bingung di bagian tertentu, bisa baca dokumentasi atau Google. takbiasa.com ini pakai theme buatan sendiri dengan Bootstrap 5.
Kekurangan Hugo
Theme dan artikel sudah selesai, terus uploadnya gimana?? Saya baca di bagian Hosting & Deployment kok aneh semua istilahnya, ada GitHub, Render, Netlify, BitBucket, AWS Amplify, Firebase. Ga ada tuh yang namanya upload lewat SFTP, yang masih ada hubungannya sama server cuma rsync.
Sebelum tulisan ini live di takbiasa.com saya mengalami beberapa kesulitan, hampir nyerah balik lagi pakai HTMLy. Pertama saya tidak mau menyimpan di Github atau Netlify walaupun gratis, soalnya saya punya VPS sendiri di Vultr.
Kedua, setelah saya pelajari kalau cara upload SFTP ke server itu sangat tidak efektif. Setiap Hugo membuat file static tidak mungkin saya upload semuanya, padahal tidak semua file berubah. Solusinya adalah rsync, saya agak ngeri pakai kode beginian di VPS, takut terhapus file penting.
Perintah yang saya pakai seperti ini: rsync -avzh --delete public/ username@alamatIP:/home/direktorinya/. Sempat terjadi error dan ternyata sebabnya karena ada tanda ~. Maklum, saya copas mentah-mentah dari tutorial di internet tentang menggunakan rsync. Ga tau apa sebabnya, kalau upload via Ternyata karena saat rsync saya tidak bisa cek isi foldernya pakai Cyberduck.rsync saya pakai root, tapi saat buka Cyberduck pakai user lain.
Kelebihan upload pakai rsync adalah tidak semua file diupload, hanya file tertentu yang mengalami perubahan atau file baru yang belum ada di server. Tentu hal ini mustahil kalau upload pakai cara biasa di Cyberduck.
Update (14 April 2021): Sekarang takbiasa.com hosting di Firebase.
Kekurangan Hugo lainnya adalah karena ini website statis maka tidak ada fitur komentar. Bisa sih dipasang Disqus, tapi Disqus ga bisa untuk komentar anonim, jadi yaa percuma. Ribet amat mau komen harus daftar akun Disqus dulu. Jadi saya memang sengaja ga pasang Disqus. Ada yang namanya Staticman, tapi harus pakai GitHub, ah ini lebih ribet lagi.
Masih Pakai WordPress
Tentu saja saya masih menggunakan WordPress. Apalagi di blog yang artikelnya ratusan, biarkan saja tetap pakai WordPress. Nah khusus blog ini sengaja saya pakai Hugo karena ingin sesuatu yang berbeda dari WordPress. Bagi yang tertarik pakai Hugo silakan buka channel YouTube Sekolah Koding.