Tentang Sisi Teknis Situs

Sejak tahun 2019, saya mengelola situs semi-personal ini di Github. Selama masa itu, situs ini sudah mengalami beberapa kali perubahan; juga menampilkan berbagai visual galat 404 dalam waktu yang lama. Sebelum mengelola situs ini, saya juga pernah aktif di beberapa sudut Internet lainnya, yang malangnya sekarang sudah hilang. Hal itu membuat saya terpikir: bahwa Internet ‘mudah’ melupakan masa lalu. Ditambah dengan keinginan untuk meninggalkan jejak yang yang baik dan abadi di Internet, pepatah “orang mati, meninggalkan nama”, dan tulisan oleh Jeff Huang, saya ingin membuat situs yang abadi di Internet.

Sepertinya kata abadi terlalu kuat, sehingga saya mendefinisikannya sebagai “dapat bertahan setidaknya selama sepuluh tahun.” Sebelum Anda berkomentar, ya, saya juga tidak yakin Github masih mudah digunakan satu dekade nanti. Namun tidak ada salahnya mengasumsikan hal itu dan mulai berusaha. Selain asumsi tadi, saya juga mengasumsikan akan selalu ada cara gratis (atau setidaknya murah) dan mudah untuk mengurus situs ini. Tiga asumsi ini menariknya, menghasilkan sebuah cara yang saya harapkan dapat bertahan, setidaknya satu dekade beberapa tahun kedepan.¹

Saya ingin menyampaikan cara itu di tulisan kali ini.
Keyka dari masa depan: Saya juga ingin menyampaikan beberapa perubahan yang terjadi. Anda dapat membacanya di paragraf terakhir.

Membuat situs

Untuk membuat situs ini, saya memilih menggunakan SSG (static-site generator), yakni Jekyll, ketimbang CMS (content management system) seperti WordPress. Ada beberapa aspek yang saya pertimbangkan terkait pilihan ini. Pertama, saya melihat SSG lebih sederhana ketimbang CMS, sehingga lebih mudah untuk dipelajari jika ada hal yang perlu di-debug. Kesederhanaan ini juga saya artikan sebagai penyusunan desain situs, pengelolaan konten, sampai proses pencadangan, yang jauh lebih mudah. Selain itu, saya juga memiliki kebebasan apa yang ingin saya tampilkan, seperti pilihan fon yang cocok dan opsi untuk tidak menggunakan pelacak. Namun untuk banyak hal terkait sistem, tentu saja the devil is in the details.

Ada banyak SSG yang digunakan saat ini (tahun 2023). Jekyll, Hugo, Gatsby, Pelican, berbagai generator yang gratis lainnya, juga beberapa cara berbayar. Membandingkan beberapa diantaranya, saya memilih Jekyll untuk membangun situs, karena beberapa pertimbangan pribadi:

• Lebih mudah bagi pemula, karena lebih banyak tutorial dan diskusi tentang Jekyll ketimbang generator yang lain.
• Lebih matang, karena salah satu SSG tertua yang masih aktif digunakan, dan jeda antar upgrade-versi program yang lama.
• Banyak dukungan, baik dukungan berupa plugins maupun dari jasa hosting seperti Github dan Gitlab.

Nah, untuk menggunakan Jekyll di komputer, ruby perlu terpasang terlebih dahulu. Menariknya, versi Jekyll (atau plugin-nya) yang akan dipasang mungkin tidak kompatibel dengan ruby versi terbaru. Alhasil, saya menyarankan menggunakan rbenv untuk mengatur versi ruby yang akan Jekyll gunakan. Ini dapat menghilangkan sesi stres yang mungkin terjadi dalam menjawab masalah terkait kompatibilitas maupun kustomisasi.

Menambahkan konten

Dalam proses membangun situs, Jekyll akan mengubah berkas-berkas Markdown (salah satu ekstensi terkenalnya adalah .md) menjadi berkas-berkas HTML. Bagi saya, hal ini memberikan beberapa kelebihan dan kekurangan dalam menambahkan konten.

Kelebihan yang paling terasa adalah kemudahan dalam membuat konten. Saya tidak perlu aplikasi tambahan, atau mengunjungi suatu situs, untuk membuat tulisan atau membaca draft: Notepad saja sudah cukup. Markdown juga banyak didukung oleh banyak program/sistem lainnya. Sebagai contoh, Anda dapat menyunting berkas Markdown menggunakan Obsidian, langsung membacanya di Github, Reddit, StackOverflow, bahkan subset dari sintaks Markdown juga dipakai oleh WhatsApp dan Discord. Oke, saya mulai melantur, mari kembali ke topik. Kemudahan membuat konten juga mengartikan kemudahan dalam proses import-export. Saya pernah aktif di WordPress, dan meng-export data semua post dari situs tersebut menjadi berkas-berkas Markdown bukan hal yang sulit; but your mileage may vary.

Jekyll yang hanya(?) memproses berkas-berkas Markdown juga menghasilkan satu kekurangan. Ketika saya ingin mempublikasikan tulisan dalam bentuk [sebagai contoh] Jupyter Notebook, saya mungkin perlu beberapa langkah ekstra untuk mengubahnya menjadi berkas Markdown/HTML.²

Menentukan desain

Selanjutnya, pemilihan tema. Walaupun tidak ada yang melarang saya untuk mendesain tampilan situs sendiri, kita semua tahu mendesain adalah kegiatan yang hanya dapat dilakukan oleh mereka yang sangat berniat. Dari banyak tema yang dikurasi oleh Jekyll Themes, saya pribadi melihat no-style-please cocok sebagai tema dasar situs saya. Walaupun demikian, ada beberapa penyesuaian yang saya lakukan.

Pertama, saya ingin situs ini sederhana dan cepat. Sedemikian cepat sehingga situs ini nyaman diakses dan dibaca meski koneksi Internet sangat jelek.³ Oleh karena itu, saya mengubah tema dasar agar tidak menggunakan JavaScript.⁴ Walaupun ini akan mempermudah pengelolaan dan membuat situs menjadi ringan juga cepat, saya sadar ini bukan solusi optimal. Sebagai contoh, fitur kolom komentar malah menjadi fitur yang sangat sulit ditambahkan. Saat ini saya menggunakan giscus untuk menampilkan fitur tersebut, berakibat pada bertambahnya sekitar 20 request ketika proses loading halaman. Walaupun masih jauh lebih baik daripada ketika Anda mengunjungi halaman muka Google, dan bahwa hampir semua hasil request tersebut akan di-cache (sehingga tidak perlu request ulang), hal ini menyisakan rasa pahit di lidah saya. Ya, mau bagaimana lagi: tidak menambahkan kolom komentar akan membuat tampilan situs ini seakan membaca RFC 5785.

Lalu, saya mengganti fon (typeface) yang digunakan tema dasar menjadi Charter. Secara visual, fon ini mirip (sama?) dengan fon Charter BT, yang biasa saya gunakan ketika membuat catatan/tugas kuliah. Butterick memberikan deskripsi singkat sekaligus berkas fon tersebut, yang dapat Anda akses di sini. Sedangkan untuk menampilkan rumus matematika, saya menggunakan $\KaTeX$, “the fastest math typesetting library for the web.” Lebih lanjut, ada beberapa hal yang saya ubah dalam CSS $\KaTeX$ yang saya gunakan, katex.min.css. Hal-hal tersebut adalah:

• Menghapus pendefinisian fon .ttf, karena .woff dan .woff2 katanya sudah cukup.
• Mengubah pendefinisian gaya font menjadi font-display:swap;, untuk mempercepat proses loading halaman.⁵
• Menambahkan .katex-display{overflow-y:auto} agar rumus yang panjang secara horizontal dapat di-scroll. Hal ini akan memudahkan membaca rumus pada perangkat dengan layar kecil, seperti smartphone.
• Mengubah ukuran fon $\KaTeX$ dari 1.21em menjadi 1.1em, agar sama dengan ukuran fon Charter yang saya tetapkan.

Menambahkan fitur-fitur pendukung

Setelah memodifikasi tema dasar, saya menambahkan beberapa plugin Jekyll untuk meningkatkan kenyamanan. Pertama, menambahkan jekyll-feed yang akan menghasilkan RSS, jekyll-tidy merapikan konten berkas-berkas HTML, dan jekyll-redirect-from untuk mengurus pengalihan halaman. Selanjutnya, untuk tag-tag SEO, saya memilih untuk menambahkan secara manual. Di satu sisi karena ternyata banyak situs menggunakan beberapa tag SEO untuk menyajikan pranala dengan lebih baik – misalnya Mastodon. Di sisi lain karena jekyll-seo-tag kurang relevan dengan tujuan situs saya: saya tidak terlalu ingin isi situs ini di-crawl dan diindeks oleh mesin-mesin pencari.⁶

Selanjutnya, agar situs tidak terasa seperti dibuat pada tahun 90-an, beberapa plugin saya tambahkan untuk meningkatkan quality of life: jekyll-loading-lazy digunakan untuk menunda pengunduhan berkas-berkas gambar, dan jekyll-target-blank agar pranala dibuka pada tab browser baru. Ada hal-hal lain yang ingin saya tambahkan ke situs ini, seperti fitur paginasi untuk tulisan yang panjang, dan halaman galeri yang menampilkan foto-foto berkesan. Akan tetapi kedua hal ini ditunda untuk alasan yang akan saya jelaskan nanti.

Menerbitkan situs

Untuk menampilkan situs di Internet, saya menggunakan kombinasi Github, suatu jasa penyedia (registrar) domain, dan Cloudflare. Berikut tahapan yang saya gunakan.

Saya bermain-main dengan situs versi lokal di komputer. Setelah puas dengan konten, saya tinggal mengetik mantra standar: git add, git commit, dan git push. Selanjutnya, umumnya orang akan menggunakan Github Pages untuk menampilkan situs mereka, tetapi saya melihat satu kekurangannya yang membuat saya tidak nyaman: waktu singgahan (cache) yang ditetapkan Github Pages hanya 10 menit. Singkat cerita, hal ini akan membuat kunjungan ke situs saya lebih boros kuota.⁷ Selain itu, kode sumber situs perlu dipublikasikan agar situs dapat tertampil, atau saya perlu membayar lebih pada Github. Di masa yang dipenuhi scraping konten untuk digunakan dalam pemelajaran AI, saya tidak ingin terlalu mengekspos kode ini. Jadi, bagaimana?

Untungnya, Cloudflare Pages memberi dukungan pada situs SSG yang diunggah ke Github. Selain itu, Cloudflare memiliki beberapa opsi tambahan dalam mengatur, mengamankan, dan mengoptimasi situs; yang saya sukai. Nah, malangnya, ketergantungan pada Cloudflare menjadi salah satu tantangan dalam mengurus situs.

Beberapa tantangan mengurus situs

Mengingat banyaknya hal yang saya gunakan untuk membangun situs, ancaman terbesar dalam mengelola situs ini adalah jika sesuatu menjadi usang dan tidak kompatibel. Walaupun setiap komponen situs ini tidak mendesak untuk digunakan, saya melakukan langkah preventif dengan mencoba independen.

Pertama, tentang ketergantungan situs ini pada tema maupun plugins. Hal ini menghasilkan beberapa batasan pada versi dependencies yang diperlukan situs, yang selanjutnya meningkatkan peluang sakit kepala jika sesuatu berjalan tidak sesuai harapan. Memperbaiki hal ini juga bukan hal yang mudah, karena masalah lisensi. Sebagai contoh, saya sempat menggunakan plugin jektex untuk menampilkan rumus matematika tanpa Javascript. Lebih lanjut, plugin tersebut menggunakan menggunakan lisensi GNU GPLv3. Mengubah kode sumber plugin tersebut agar tetap sesuai dengan kebutuhan situs ini mengharuskan saya melisensikan ulang situs dibawah lisensi tersebut; dan beberapa klausul lainnya yang kurang saya sukai diterapkan pada kode sumber situs ini. Alhasil, saya tidak ada cara mudah untuk dapat menggunakan $\KaTeX$ versi terbaru, maupun dapat menggunakan output: "mathml" ke proses rendering agar hanya menghasilkan kode MathML (dan tidak HTML yang mengandung lebih banyak DOM yang memperbesar ukuran berkas).⁸

Untungnya, setiap komponen situs ini tidak mendesak untuk digunakan.

Andaikan beberapa tahun kedepan, God forbids, pengolah seperti $\KaTeX$ dan MathJax tidak dapat digunakan, selalu ada opsi untuk menampilkan manual kode $\LaTeX$ – walau saya perlu menyusun ulang banyak rumus, dan menampilkannya dengan ciamik, agar mata pembaca tidak berdarah. Pernyataan ini dapat diterapkan untuk plugins yang lain. Plugin jekyll-loading-lazy dapat dikerjakan secara manual, dengan mengubah format markdown gambar menjadi ![example](source.jpg){:loading='lazy'}. Plugin jekyll-target-blank juga bisa ditambahkan secara manual dengan cara serupa. Sedangkan pada plugin yang lain tidak kompatibel, saya dapat memilih untuk tidak menggunakan mereka. Bahkan ketika Github mendadak berhenti mendukung Jekyll, semua hal menjadi bermasalah dan seterusnya, saya dapat mengambil isi folder _post dan _site di instalasi Jekyll situs ini, lalu secara manual mengembangkan situs. Manual dalam artian menyunting berkas-berkas HTML seakan saya sedang hidup di tahun 90-an.

Walau skenario di atas menakutkan, solusi yang saya pikirkan bukan opsi yang buruk, karena saya menjaga situs agar tetap sederhana dan tangguh. Akan tetapi, ideologi ini membuat fitur seperti paginasi dan halaman galeri sulit untuk dihadirkan: keduanya memerlukan usaha cadangan yang terlalu besar jika sesuatu menjadi usang; ketika dibandingkan dengan semua yang saya jelaskan di paragraf sebelumnya. Saat ini, biarkan itu menjadi masalah saya di masa depan, jika ia bersikukuh untuk menambahkan fitur-fitur ini.

Dan dengan demikian, adalah detail bagaimana saya membuat situs ini. Saya harap ada hal-hal kecil di tulisan ini yang dapat diterapkan ke masalah Anda 😀.

Beberapa perubahan teknis

Sekitar tiga bulan sejak melakukan revisi terakhir ke artikel ini, saya memutuskan untuk tidak menggunakan fitur kolom komentar. Satu-satunya alasan ialah untuk memperingan situs, setidaknya dari jumlah request yang diperlukan ketika proses memuat halaman. Perubahan lain yang saya lakukan adalah meninggalkan $\KaTeX$, dan berpaling ke temml dengan fon Latin Modern Math. Walaupun pengembangan MathML saat ini masih di “tahap awal” (sampai kapan?), dan tampilan hasil tidak secantik versi $\LaTeX$, saya optimis akan masa depan proyek W3C MathML.

Catatan kaki