Kanon Mesin Blog Paling Menyenangkan Abad Ini

Per tulisan ini terbit, saya mengultuskan Gatsby sebagai kanon mesin blog paling menyenangkan abad ini. Ia lumayan liar, sedikit merepotkan, tetapi ketika kamu mulai menemukan benang merahnya, kamu akan mendapatkan banyak kejutan. Sangat banyak kejutan. Ini adalah mesin yang akan membuatmu menjadi seperti bocah SD baru pertama kali dibelikan Lego.

Cara merakitnya memang bongkar pasang. Untuk kamu yang terbiasa menggunakan CMS (Content Management System) seperti Blogger atau WordPress, mesin SSG (Static Site Generator) semacam Gatsby mungkin akan tampak seperti, “Meh, what is wrong with you, man?!”

Tetapi karena konon dalam diri setiap laki-laki ada anak kecil yang selalu menolak tumbuh dewasa, dan anak kecil dalam diri saya adalah seorang bocah banyak mau dengan selera aneh-aneh, SSG adalah mainan yang sangat menghibur.

Menurut riset kecil-kecilan yang saya lakukan, SSG sendiri bukan sesuatu yang populer di Indonesia. Mesin ini rata-rata digunakan oleh para pengembang, pemrogram, atau seorang bloger yang kebanyakan baca artikel seputar teknologi web dan mungkin senang mempelajari hal-hal baru.

Faktanya, SSG bukan barang baru. Mesin paling tua menurut beberapa artikel adalah Jekyll, dirilis pada tahun 2009. Jadi ketika orang-orang di benua Amerika dan Eropa sedang euforia dengan SSG, saya baru bikin akun Facebook dan masih asyik main Backing Life.

Saya pribadi baru mengenal SSG dua bulan lalu (Juni 2020), ketika sedang mencari-cari trik untuk mengoptomasi blog yang berjalan di Blogger. Saya tanpa sengaja menemukan artikel yang membahas 9 alasan kenapa situs statis lebih cihuy, dan dalam sekejap langsung merasa tertarik untuk mencoba salah satunya.

Salah satu, karena memang pilihannya ada banyak dan tersedia dalam berbagai bahasa, mulai dari yang umum seperti Python hingga yang terdengar aneh seperti Erlang, Kotlin, Haskell, blablabla. Mencoba mereka semua satu per satu bukanlah ide yang keren, jadi saya menyortir dengan bahasa yang paling masuk akal buat saya: JavaScript.

Di kancah JavaScript sendiri ternyata masih ada banyak pilihan. Jadi saya membuat saringan tambahan, dan kali ini filternya adalah nama. Baiklah, ini mungkin agak aneh tetapi saya ogah ketika ditanya “kamu ngeblog pakai apa?” dan saya jawab, “Next.”

Itu tidak terdengar seperti mesin blog. Itu lebih mirip motor Yamaha.

Dari beberapa daftar yang ada, satu-satunya nama yang menurut saya unik dan lucu adalah mesin yang sekarang saya pilih ini, Gatsby.

Iya, saya tahu, namanya memang agak mirip sejenis Pokemon, tetapi percayalah itu yang paling mendingan di antara semua pilihan.

Permulaan

Saya memulai dengan membaca dokumentasi Gatsby pada pertengahan bulan Juni. Dan saya kaget karena ternyata cara merakitnya sangat wadidaw. Jadi, dengan sedikit bersikap bijak, saya menahan diri untuk menyentuh Gatsby dan memilih mencari batu loncatan. Nah, di sinilah si tua Jekyll berguna.

Saya mencoba mengutak-atik Jekyll dengan tujuan memahami cara kerja SSG. Hemat saya, kalau saya mempelajari semuanya dari nol dengan Gatsby, itu akan membuat banyak PR. Pertimbangannya: dari apa yang saya pahami, Gatsby termasuk SSG kelas canggih. Ibaratnya Jekyll adalah Yamaha Mio dan Gatsby semacam Suzuki Satria F. Daripada saya belajar menyetir sambil belajar kopling, lebih baik saya fokus belajar menyetir.

Jekyll adalah SSG yang menggunakan bahasa Ruby dan Liquid. Sintaks penulisannya relatif mudah dimengerti, terutama kalau kamu punya pemahaman dasar HTML dan CSS. Satu-satunya yang rumit ketika belajar main SSG adalah cara menggunakan Git dan GitHub.

Omong-omong, kalau kamu teman saya di Instagram dan pernah melihat saya membahas cara optimasi Blogger dengan GitHub di Instagram Story, iya, itu adalah saat saya belajar Jekyll.

Di sini saya harus berterima kasih kepada Mahendrata Harpi, orang asing entah siapa entah dari mana yang akun GitHub-nya saya temukan tanpa sengaja di internet. Terima kasih, Harpi, karena sudah berbaik hati mau membalas surel saya dan membuat tema Jelyll yang sangat bagus!

Saya banyak belajar dari dokumentasi Harpi. Dan itu membantu saya untuk memahami cara kerja SSG. Saya mulai tahu cara meng-hosting blog SSG (karena caranya beda dengan CMS), mengedit tema, membuat tulisan, menambahkan plugin, dan blablabla.

Memang, pada akhirnya hal-hal yang saya pelajari di Jekyll tidak banyak berguna di Gatsby, tetapi saya mendapat satu pelajaran penting: ternyata bekerja dengan Git sangat menyenangkan, memudahkan, dan harusnya saya pelajari itu sejak lima tahun lalu.

1. Mulai Menyentuh Gatsby

Saya sangat antusias di sini!

Gatsby adalah SSG berbasis React yang dibangun di atas Node.js dan mengandalkan GraphQL. Jika kamu merasa asing dengan nama-nama aneh itu, sesungguhnya saya juga sama.

Sepemahaman saya, Node.js adalah JavaScript runtime yang menggunakan mesin yang sama dengan mesin Google Chrome (dikenal sebagai V8 JavaScript Engine). Mesin ini akan memungkinkan kita untuk menjalankan JavaScript di komputer tanpa perlu peramban, tetapi yang lebih menariknya: ini mengompilasi kode JavaScript ke kode mesin asli, sehingga membuat kode JavaScript menjadi ringan dan cepat untuk diproses di peramban.

Dalam bahasa paling manusia, kalau kamu seorang pengguna CMS dan sadar betul bahwa JavaScript itu bikin blog jadi berat, dengan teknologi yang dimiliki Node.js, kita bisa membuat JavaScript menjadi seringan HTML. Itu artinya tidak masalah kalau blog kamu berbasis JavaScript, pun itulah kenapa Gatsby dan kawan-kawannya bisa memakai JavaScript utuh tetapi tetap ringan dan cepat.

Gatsby membutuhkan beberapa prasyarat untuk bisa digunakan:

  • Punya editor kode
  • Punya akun di Github/GitLab
  • Komputer sudah terpasang Git
  • Komputer sudah terpasang Node.js

Kurang lebih begini kata mereka:

Gatsby dibangun dengan JavaScript, dan itu membutuhkan Runtime dari Node.js. Anda juga butuh NPM untuk mengunduh dan memperbarui modul paket yang digunakan Gatsby. NPM adalah sepaket dengan Node.js. Jadi kalau di komputer Anda tidak ada NPM, besar kemungkinan Anda juga tidak punya Node.js.

Baik. Mari kita unduh failnya.

https://nodejs.org/en/download/

Setelah Node.js terpasang, saya membuka Terminal (Command Prompt) dan mulai mengunduh Gatsby CLI:

npm install -g gatsby-cli

Kalau kamu pengguna WordPress, ini sama seperti mengunduh WordPress pada kali pertama pembuatan blog. Apa yang membuatnya berbeda adalah WordPress bisa diunduh via peramban, Gatsby diunduh dengan cara ya-begini-lah.

Gatsby CLI dibutuhkan untuk mengonfigurasi blog Gatsby. Kalau di CMS kamu menggunakan GUI (Graphical User Interface) yang bikin mengutak-atik blog semudah drag-and-drop atau klik-klik navigasi, di SSG kita menggunakan CLI (Command Line Interface), yang mana artinya konfigurasi dilakukan dengan baris perintah. Pada dasarnya ini sama saja. Yang membuatnya beda adalah GUI lebih mudah karena tinggal klik, CLI agak merepotkan karena perlu ditulis.

Setelah Gatsby CLI terpasang, saya sudah bisa mulai bermain—akhirnya!—dan di sinilah segala petaka bermula.

2. React

Karena Gatsby menggunakan React sebagai templatnya, tantangan kedua adalah memahami sintaks React yang diadopsi oleh Gatsby. React sendiri adalah pustaka JavaScript yang dikembangkan oleh Facebook.

Saya sempat kikuk ketika pertama melihat sintaks React yang menurut saya aneh dan lucu.

const heading =
<h1 className="site-heading">
  Hello, World!
</h1>

Itu bukan HTML. Itu namanya JSX (JavaScript Extended), sebuah ekstensi JavaScript yang memungkinkan kita menulis beberapa sintaks mirip XML/HTML dalam JavaScript guna meringkas penulisan kode. Penggunaan JSX sendiri sebenarnya tidak wajib, hanya saja disarankan karena ada banyak orang yang memakainya. Dan itu berarti JSX bisa jadi alat bantu “komunikasi” dengan sesama pengguna Gatsby atau React.

Untuk perbandingan penulisan, sintaks JSX di atas akan menghasilkan hal serupa dengan sintaks biasa (non-JSX) di bawah ini:

const heading =
React.createElement(
'h1', {className: 'site-heading'},
  'Hello, World!'
)

Buat saya penulisan JSX lucu karena satu sisi ia membuat sintaks terasa akrab, tetapi pada sisi yang lain membuat saya merasa konyol. Ini sedikit mengacaukan pola pikir dan refleks saya dalam menulis HTML.

Untuk kurva belajar menurut saya tidak terlalu curam, meskipun saya akui saya merasa lebih cepat mempelajari Liquid karena simbol dalam sintaksnya lebih mudah dibaca oleh mata telanjang. Tetapi, ya, ini cuma masalah kebiasaan. Sama seperti ketika belajar menulis CSS dengan efisien, semua akan sat-sut-sat-sut pada waktunya.

Mohon jangan ditiru: salah satu ketololan saya ketika mempelajari React adalah Gatsby sudah merilis versi 2, sedangkan templat yang saya gunakan ketika masa percobaan adalah versi 1. Ada beberapa sintaks dan aturan yang berubah dalam versi 2. Dengan kata lain, tanpa sadar saya belajar dua versi sekaligus. Efek tidak teliti dalam membaca.

Tingkat kerumitan: 6/10

3. GraphQL

Gatsby mengandalkan GraphQL, sebuah bahasa kueri untuk menarik data dan API (Application Programming Interface), guna mempermudah beberapa pekerjaan dalam proses perakitan blog, katanya.

Bagian hebatnya adalah GraphQL bisa menarik data dan API dari hampir semua tempat dan beragam format, sedangkan bagian tidak hebatnya adalah ia terlihat seperti ini:

import React from "react"
import { graphql } from "gatsby"

export default function Page({ data }) {
return (
   <div>
    <h1>Gatsby.js {data.site.siteMetadata.title}</h1>
     <p>Why Gatsby use GraphQL?</p> 
   </div>
  )
}

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Berat, Kawan.

Untuk pemula seperti saya, aturan GraphQL agak sulit dipahami. Saya pernah membuang-buang waktu nyaris satu jam cuma untuk memodifikasi kueri MetaDescription.

Ya ampun.

MetaDescription adalah tulisan ringkas yang muncul di bawah judul ketika tulisanmu dibagikan ke Facebook, Twitter, atau WhatsApp. Secara bawaan, meta jenis ini akan mengambil kalimat pertama di alinea pertama. Saya ingin memodifikasinya supaya setiap deskripsi bisa ditentukan oleh saya sendiri.

Di Blogger, itu pekerjaan mudah. Saya hanya perlu menulis kode meta di dalam XML dan mengaktifkan fitur Deskripsi di panel editor. Di WordPress jauh lebih mudah, saya tinggal memakai plugin Yoast SEO dan ia akan mengatur semuanya.

Di Gatsby, demi Tuhan, karena saya bingung setengah mati, akhirnya saya memutuskan untuk sedikit mengacau: membuat kueri sendiri yang saya beri nama snippet dan menukar fungsi kueri MetaDescription bawaan dengan kueri bikinan saya. Di luar dugaan, ternyata cara ini malah bekerja dengan sangat baik.

WTFASDFGHJKL.

Tetapi karena saya betul-betul pemula, kesulitan di atas juga terulang ketika saya ingin memodifikasi gambar yang akan digunakan untuk Social Card. Itu, lho, twitter:image di Twitter Card dan og:image di Facebook Open Graph. Solusinya? Sama pula seperti di atas. Saya mengacau dengan menghapus kueri bawaan dan memutuskan untuk memanggil gambar statis lewat tautan. Apa boleh buat.

Tingkat kerumitan: 8/10

Kesimpulan Sementara

Saya butuh waktu kurang lebih satu minggu untuk mulai memahami dasar-dasar Gatsby. Tentu saja, ini akan jadi perjalanan dan pembelajaran yang sangat jauh untuk ditempuh. Maka dari itu saya berencana menggunakan mesin ini untuk jangka panjang.

Berhubung soal kelebihan SSG sudah dijelaskan dengan sangat baik oleh Paman Aaron (ia menulis sampai 9 keunggulan malah), di sini saya hanya akan berbagi hal-hal yang saya sukai dari SSG, khususnya Gatsby.

1. Menggunakan Git

Git adalah perangkat lunak sistem-terbuka yang mampu merekam setiap perubahan pada fail yang kita kerjakan. Istilah canggihnya Sistem Kontrol Versi, yang mana menurut saya ada empat fitur utama:

  • Mencatat setiap revisi
  • Membuat fail cabang
  • Membuat klon dari proyek
  • Sebagai tombol undo

Nah, fitur keempat adalah yang paling berguna buat tukang mengutak-atik seperti saya. Jadi kalau mau mengedit tema di Blogger harus melakukan langkah wajib “Jangan lupa backup tema Anda!” sebelum membuat perubahan-perubahan ekstrem, di SSG tidak perlu khawatir karena setiap perubahan akan otomatis dicatat oleh Git (lihat fitur pertama). Dan ketika kita ingin kembali ke versi revisi sebelumnya, itu bisa dilakukan dengan satu baris perintah. Keren abis.

Sebenarnya fitur Git jauh lebih banyak dari itu, tetapi sejauh ini hanya empat fitur yang saya gunakan.

2. Lingkungan Kerja Efisien

Berkaitan dengan poin sebelumnya, soal Git, karena VScode dan GitHub sama-sama milik Microsoft dan terintegrasi dengan baik, ini membuat saya memiliki perangkat kerja yang saling terhubung. Dan itu sangat membantu.

Jadi begini, seluruh data mentah (kode dan konten) blog ini tersimpan secara lokal di komputer saya. Supaya blog bisa online dan diakses semua orang, data-data tersebut harus ada di sebuah “awan” di internet. Nah, untuk keperluan itu saya menggunakan GitHub sebagai “awan” (umumnya disebut repositori), dan menggunakan Netlify sebagai hos (ia bertugas untuk menarik kumpulan data mentah yang ada di GitHub dan mengolahnya menjadi halaman blog).

Secara ringkas, beginilah proses saya menulis hingga kamu bisa membacanya:

  • Saya menulis di VScode
  • Setelah tulisan siap terbit, saya mengunggah tulisan lewat VScode ke GitHub
  • Ketika GitHub mendeteksi perubahan atau ada penambahan konten di repositori blog ini, ia akan memberi tahu Netlify untuk melakukan refresh
  • Netlify melakukan refresh, membangun ulang halaman statis blog ini, tulisan terbaru saya muncul di blog, kamu bisa membaca tulisan saya

Alurnya tampak ribet tetapi sebenarnya sangat sederhana. Ini sesederhana saya menekan ikon Commit dan Push dan mesin-mesin yang menjalankan blog ini akan bertugas dengan segera.

Bagian terbaiknya adalah semua itu saya lakukan hanya dengan VScode.

Visual Studio Code

Ini berbeda ketika saya masih menggunakan Blogger, umpama, yang mana saya menulis draf di aplikasi lain dan harus salin-tempel untuk memindahkannya ke Blogger (yang artinya saya perlu buka peramban, masuk ke blogger.com, buka editor teks, tempel tulisan yang tadi disalin, edit-edit sedikit, baru terbitkan—bandingkan!).

Pendek kata, cara kerja yang baru ini terasa lebih efisien. Selain tidak perlu pindah-pindah aplikasi, ingatlah bahwa cara kerja yang satu ini mendukung Git.

3. Futuristis

Ketika orang-orang di alam liar berkata “Gatsby mempermudah sebagian besar pekerjaan saya”, mereka ada benarnya. Saya baru merasakan itu setelah meluncurkan blog ini ke internet.

Ketika masih memakai Blogger, saya harus melakukan hampir segala optimasi secara manual. Mulai dari mencari skrip yang cocok, trik-trik yang sesuai dengan spesifikasi blog, hingga sesepele menerapkan penulisan gaya kode sebaris.

Di Gatsby, semua itu dilakukan otomatis oleh mesin blog ini. Saya hanya perlu memilah plugin yang saya inginkan, menerapkannya, lalu duduk manis sambil goyang-goyang kaki karena sisanya akan diurus oleh Gatsby.

Salah satu yang terbaik menurut saya, Gatsby menerapkan teknik-teknik terpadu untuk membuat pemuatan laman blog menjadi 10 kali lebih cepat dari blog pada umumnya. Bagian ini jauh lebih mudah dirasakan daripada dijelaskan. Cobalah klik beberapa laman di bagian navigasi di atas, lalu pindah ke beranda, lalu kembali ke tulisan ini. Kamu akan mengerti apa yang saya maksud 10 kali lebih cepat.

Dan itu hampir mustahil diterapkan pada Blogger. Sejauh yang pernah saya coba, saya hanya mentok di angka 1,6 detik untuk pemuatan laman. (Igniel berhasil menembus angka 99 di GTmetrix, tetapi trik yang ia lakukan mengambil risiko tampilan blog akan kosong sampai layar digulir. Ini namanya native-lazyload, dan sebetulnya cukup bagus untuk meringankan ukuran blog. Hanya saja saya kurang cocok dengan risikonya.)

Gatsby juga menerapkan teknik pra-pembuatan, pra-pemuatan, pra-pengambilan, pra-penguraian, dan segenap pra-pra lainnya yang dalam trik Blogger menggunakan sintaks HTML ini:

  • preload
  • preconnect
  • prerender
  • prefetch
  • dns-prefetch

Masalahnya dengan Blogger adalah pada titik tertentu trik itu lebih mirip judi alih-alih perintah. Kadang-kadang tidak bekerja, sering kali butuh beberapa eksperimen untuk tahu perintah mana cocok pada skrip yang mana.

Oh, ya, sewaktu saya bermain-main dengan web.dev, trik paling ampuh untuk Blogger cuma tiga: memindahkan DNS dari tempat membeli domain ke DNS Cloudflare dan memanfaatkan semua fitur canggihnya, meng-hosting fail fon secara mandiri, serta meminimalisasi widget yang menggunakan JavaScript. Poin terakhir artinya menghapus pernak-pernik.

4. Lebih Aman dan Fleksibel

Soal keamanan tergantung preferensi masing-masing, tetapi kalau kamu cukup tertarik bisa mulai dengan buka Google dan cari tahu: “Kenapa situs web besar yang memiliki karyawan backend atau fullstack developer (tukang urus basis data) pun masih bisa kena bobol?”

Itu salah satu alasan kenapa saya tidak memilih WordPress. Saya tidak mendalami basis data, dan saya tidak menemukan layanan hos dengan harga terjangkau yang bisa saya percaya. Kalaupun mau memaksakan, mungkin rasanya seperti mengontrak di sebuah perumahan yang suasananya tampak asri dan adem dan cocok untuk setelan hujan-kopi-senja, tetapi saya tidak bisa tidur nyaman karena selalu curiga apakah satpam betul-betul berjaga? Terlalu banyak pikiran. Tidak tenang.

Situs statis semacam Gatsby, di lain sisi, secara teknis tidak membutuhkan basis data. Blog ini cuma sekumpulan fail HTML, CSS, JavaScript, dan beberapa gambar. Dan selama blog ini tetap cuma sekumpulan fail statis, skrip-skrip jahat yang “disuntikkan” ke blog ini tidak akan berfungsi. Paling tidak begitulah yang saya pahami.

Kumpulan fail statis juga lebih kecil dari segi ukuran. Saya sempat khawatir sewaktu masih mengedit-edit blog ini, takut ukuran kode sumbernya lumayan besar dan memakan banyak ruang (ya, ini bukan Blogger, jadi saya harus selalu berhemat dalam mengelola ruang penyimpanan). Setelah saya lempar ke GitHub, ternyata ukuran kode sumbernya cuma 2 MB. Luar biasa.

GitHub sendiri menyediakan kapasitas 1 GB. Berhubung saya menyimpan gambar di layanan lain, dan rata-rata ukuran satu tulisan cuma 5—15 KB, jadi hitungan kasarnya di blog ini saya bisa menulis hingga kurang lebih 200.000 tulisan. Itu setara dengan seumur hidup. Bahkan tampaknya saya akan mati sebelum mampu menulis sebanyak itu.