Tulisan kedua dari Tutorial Membuat Website Berkelas Modal Ceban
WordPress hasil karya Cek Matt Mullenweg, pemuda Texas, Amerika, dua dekade lalu, sekarang sudah menjadi Content Management System atau CMS generik untuk back end sekaligus front end sebuah website. Lebih dari 60 persen website dunia kini menggunakan perangkat lunak WP alias WordPress tersebut. Web blog pribadi, portal berita (jangan tanya lagi), landing page UMKM, hingga website resmi plat merah dibuat dengan WP.
Padahal, sepuluh tahun lalu, membuat website institusi resmi dengan WP dianggap “penghinaan”. Platfom blogger, kok, untuk website pemerintah? Beda dengan sekarang, apapun websitenya, WordPress solusinya. Ibarat kata, WP telah menjelma layaknya sebuah pisau Swiss Army yang sangat multifungsi.
Bahkan, akibat “merajalelanya” WP, bisa dikatakan enam dari sepuluh hasil pencarian kata kunci di Google akan diarahkan ke artikel yang diterbitkan melalui CMS WordPress.
Intinya—sekali lagi saya ulangi—apapun websitenya, WordPress solusinya.
Ahhh… Bosen…! Itu-itu saja diulangi.
Iya, saya juga sudah bosen dengan CMS “palugada” itu, apapun yang klien minta, WP plugin selalu ada.
Apa tidak ada solusi lain selain WordPress?
Ada! Yang lebih mahal malah lebih banyak! Mau?
Nggak ah! Yang gratis dong.
Ada, coba Hugo!
Hugo? Apa itu? Merek parfum?
Tentu Hugo yang saya maksud bukan merek parfum pria tersebut, melainkan sebuah framework untuk menghasilkan konten website statis dengan cepat. Bree bisa bayangkan framework itu semacam alat bantu atau kerangka kerja.
Jadi, Hugo dikategorikan ke dalam mesin SSG alias Static Site Generator, bukan mesin CMS seperti WordPress. Kalau WP ditulis menggunakan bahasa pemograman PHP dan bekerja secara dinamis. Sedangkan Hugo yang bekerja secara statis, ditulis dengan bahasa pemograman Go—bisa juga disebut Golang, akronim dari Google Language, yang dikembangkan oleh Google pada 2009.
Udah paham sikit, kan?
Lalu, apakah Hugo bisa membuat website segampil WordPress? Tentu saja. Hugo salah satu perangkat lunak alternatif untuk membuat website paling cepat saat ini.
Lalu, apakah bisa semudah WordPress dalam hal manajemen konten website?
Tentu saja. Tapi…perlu digarisbawahi dulu, manajemen website dinamis dilakukan melalui dashboard. Berbeda dengan website statis, manajemen konten juga dilakukan secara statis, seperti menulis selembar surat di Microsoft Word.
Oleh karena itu, kecepatan membuat website dengan Hugo sangat bergantung pada keahlian dasar si pengembang website tersebut. Hasil akhirnya bisa lebih cepat atau malah tambah mumet.
Namun, berdasarkan pengalaman saya menggunakan WP dalam membuat berbagai website sejak 2007, membuat situs dengan Hugo sejak 2019 terasa jauh lebih cepat dan menyenangkan. Buktinya, setelah baca dokumentasi dan nonton beberapa video tutorial Hugo, saya sukses membuat website freebiespic.com dengan Hugo.
Menarik bukan?
Oke, di sini akan saya jelaskan lebih detail lagi, sehingga Bree-bree yang baru kenal Hugo, mudah-mudahan “murtad” dari WordPress.
Kenapa Harus Hugo?
Hugo salah satu tools Static Site Generator paling cepat dan aman untuk membuat website dengan parameter dan pengaturan template tertentu. Analoginya begini: kalau SSG Hugo diibaratkan mesin generator listrik portable, saat mati lampu, listrik dapat disuplai melalui genset rumahan, dengan parameter inputnya berupa bahan bakar minyak dan outputnya aliran listrik.
Begitu juga dengan prinsip generator Hugo, data inputnya berupa file artikel yang ditulis dalam format markdown, lalu outputnya adalah konten artikel website yang dinamis.
Agar lebih jelas, lihat diagram perbandingan sistem kerja SSG dan CMS berikut ini.
Flowchart SSG:
- BBM → Genset → Listrik
- File artikel markdown → Hugo → Konten Website
Flowchart CMS:
- BBM → Genset → Converter DC → Baterai → Converter AC → Listrik
- Konten artikel → Dashboard → Data Query → Database → Theme → Konten Web
Sedikit tambahan, di CMS seperti WP, untuk mempercepat proses loading website, seluruh konten web wajib melalui proses caching terlebih dahulu, baru disajikan ke user.
Alur kerjanya begini: File → WP Dashboard → Data Query → Database → Theme Looping Query → Caching Static Content → Website Content.
Sebelum konten disajikan ke user, sistem WP melakukan proses query data dari database menjadi konten static berupa file HTML, sehingga beban kerja server jadi berkurang. Saat ribuan user lain mengakses konten yang sama, server langsung menyajikan konten static hasil proses caching, sehingga WordPress tidak lagi melalukan proses looping data terus-menerus dari database.
Setelah melihat alur kerja sistem SSG dengan sistem CMS di atas, tentu Bree dapat menyimpulkan sendiri kenapa Hugo lebih cepat dari WordPress, kan? Hugo tidak mengenal proses penyimpanan data ke dalam database, lalu diuraikan ke theme, melainkan file konten langsung diubah menjadi berkas HTML. Hasil akhir konten website sudah berupa file HTML statis. Layaknya konten di WordPress yang sudah melewati proses caching, melalui plugin W3 total Cache, WP Rocket, WP Super Cache dan plugin cache lainnya.
Adu Kuat Mesin CMS vs SSG
Mekanisme proses deploy CMS WordPress berjalan secara real time di dalam cloud server. Sedangkan mekanisme kerja SSG Hugo ada dua cara. Pertama, bisa melakukan prosesing data secara real time di dalam cloud server atau melakukan generate konten dari lokal desktop, baru push atau upload ke cloud server.
Untuk penjelasan panjang, let’s say, sebuah website itu seperti mesin ATM. Saat nasabah memasukkan kartu ke dalam mesin ATM, duit langsung keluar. Di balik keluarnya uang dari mesin ATM, tentu ada proses panjang yang harus dilalui nasabah dengan sistem perbankan.
Sebelum menjadi nasabah, tentunya harus mendaftar di bank, kemudian setiap bulan menyetor ke teller. Karena teknologi semakin canggih, lahirlah mesin ATM CRM (Cash Recycle Machine). Nasabah bisa langsung setor uang/tarik tunai/cek saldo cukup dengan mesin ATM CRM.
CMS WordPress adalah mesin ATM CRM tersebut. “Nasabahnya” bisa langsung menyetor konten, baik itu posting konten baru atau edit halaman, melalui WP CRM (Content Recycle Machine), dan sekaligus mengakses konten dari mesin yang sama.
Bagaimana dengan alur proses kerja SSG Hugo? Cara pertama, SSG Hugo bisa bekerja seperti mesin ATM CRM. Cara kedua, SSG Hugo itu ibarat sistem bank sebelum adanya teknologi mesin ATM CRM. Nasabah menyetor tunai atau print mutasi buku rekening lewat antrian teller bank. Mbak-mbak cantik di bagian teller akan memeriksa slip dan menghitung jumlah uang setoran. Kalau tidak ada kendala, teller akan langsung memproses setoran tunai uang atau mutasi saldo nasabah.
Selanjutnya, jumlah uang yang telah disetor nasabah, bank mengisi uang kembali ke mesin ATM. Prosesnya dilakukan secara manual oleh pegawai bank atau vendor mesin ATM. Selama proses pengisian, biasanya ditemani petugas keamanan.
Begitu juga cara kerja sistem SSG Hugo. Admin melakukan proses pembaruan postingan atau content recycle machine Hugo (edit post or page) secara manual terlebih dahulu di localhost atau komputer pribadi. Setelah di-generate menjadi konten publik, baru push data web ke server melalui software git atau upload via FTP ke hosting.
Hingga di sini, kira-kira sudah bisa dipahami?
Apa Kekurangan dan Kelebihan SSG Hugo?
Sebelum Bree berkata, “Ribet amat membuat website dengan Hugo”, saya lempar balik pernyataannya, apa sih kekurangan Hugo? Ya, itu, proses manajemen konten mesti dilakukan secara manual di local desktop. Bahkan kalau tulisan ada yang typo pada postingan terbaru, proses recycle content harus dilakukan lewat localhost dulu, baru di-push ulang.
Begitulah seterusnya dan itulah seninya membuat website dengan Hugo.
Jadi, Apa Kelebihan SSG Hugo?
Cepat dan aman. Cepat loading kontennya, sangat aman websitenya. Website yang dibuat dengan Hugo memiliki tingkat keamanaan tinggi karena tidak database. Seperti yang kalian tau, sistem database sering jadi target SQL Injection oleh hacker. SQL Injection salah satu teknik yang menyalahgunakan celah keamanan pada lapisan basis data sebuah aplikasi. Contoh teranyar pada kasus bocornya data pelanggan PLN, Tokopedia, dan lain-lain.
Makanya, kalau kalian masih normal, jangan percaya sama orang goblok yang bilang sering-sering ganti OTP. Ini tidak hanya pernyataan sesat tapi menyesatkan karena OTP itu One Time Password yang berganti sendiri secara otomatis tanpa campur tangan user.
SSG Hugo Bisa Menjadi CMS Hugo
SSG Hugo bisa bekerja seperti mesin ATM CRM. Gimana ceritanya?
Kekurangan Hugo sebagai mesin statis identik dengan kerja manual, proses kerja secara text-based, tidak ada sistem back end, maka jangan harap ada dashboard UI. Ini bedanya dengan WordPress yang menyediakan back end UI bernama dashboard. Kerja admin di website WP pun lumayan gampang. Kalau mau publish konten baru, yang juga dilakukan secara manual, tinggal masukkan isi post, sekali klik tombol publish, konten langsung online.
Nah, bagi mimin yang terbiasa mengelola website lewat dashboard, ketika pindah pertama ke Hugo pasti dijamin masuk angin. Untungnya, di balik kekurangan Hugo yang tidak ada UI, maka lahirlah teknologi JAMstack. Ini cara “baru” mengembangkan website dengan menggabungkan teknologi Javascript – API – Markup. JAMstack semacam “add on dashbord UI’ untuk sistem SSG seperti di Hugo.
Kok tambah rumit ya?
Mudahnya begini, hasil output dari mesin SSG Hugo adalah konten markup (file markah HTML). Dengan adanya arsitektur JAMstack, proses input secara text-base sistem SSG bisa memiliki “dashboard” tersendiri, sehingga bisa posting sacara online lewat perantara Javascript-API.
JAMstack sendiri merupakan teknologi next level pengembangan web berbasis SSG. Pertama kali dicetuskan oleh Mathias Biilmann, CEO Netlify pada 2015, akan kita bahas panjang lebar pada kesempatan berikutnya.
Hugo bukan Satu-satunya Mesin SSG
Overall, setelah kalian pening membaca beda Hugo dengan WP, perlu diketahui bahwa Hugo bukan satu-satunya mesin SSG yang pernah ada. Ada ratusan mesin SSG yang sudah diciptakan dengan berbagai bahasa pemograman.
Berikut 10 SSG yang dipilih secara random berdasarkan bahasa pemograman:
- NextJS (Javascript)
- Hugo (Go)
- Jekyll (Ruby)
- mdBook (Rush)
- Publish (Swift)
- Lektor (Python)
- DocFX (C#)
- Hakyll (Haskell)
- Jigsaw (PHP)
- Statiq (.Net)
Untuk melihat list ratusan SSG lainnya klik ini.
Sebagai perbandingan, berikut list beberapa CMS yang mengerucut dan bertahan hingga sekarang:
- WordPress (Paling pop)
- Drupal
- Joomla
- Hubspot
- Magento
- Squarespce
- Wix
- Ghost
- Shopify
- Canvas CMS
Selengkapnya, bisa lihat di List CMS.
Next, kita akan masuk ke bagian ketiga tentang apa saja bahan-bahan yang dibutuhkan untuk memasak memulai membuat website dengan Hugo. Pantau terus ya, Bree!
Diperbarui pada ( 2 Oktober 2022 )