Terima Kasih Octopress
Duabelas tahun yang lalu, saya menulis artikel berjudul Terima Kasih Wordpress. Dalam artikel tersebut, saya menjelaskan migrasi blog saya yang tadinya menggunakan Wordpress, beralih ke static site generator Jekyll dengan framework Octopress. Melalui artikel ini, blog ini sekali lagi akan migrasi ke platform yang berteknologi lebih kekinian.
Sebetulnya tidak ada masalah dengan Jekyll dan Octopress. Memang benar Octopress sudah lama terbengkalai. Kalau kita kunjungi websitenya, kita akan menemui sertifikat SSLnya sudah kadaluarsa. Bila kita pergi ke repository Githubnya kita akan lihat bahwa terakhir commit adalah di tahun 2015. Sembilan tahun yang lalu. Walaupun demikian, Octopress hanyalah sekedar skin dan sedikit bumbu opinionated di atas Jekyll. Sedangkan Jekyll sendiri masih aktif diurus. Di repo github Jekyll kita lihat bahwa commit terakhir masih 5 hari yang lalu.
Beberapa waktu yang lalu, saya mempelajari Tailwind CSS. Paradigmanya 180ยบ berbeda dengan Bootstrap yang selama ini saya pakai. Tailwind terasa lebih intuitif dan back to basic. Mengingatkan saya ke masa-masa belajar CSS dulu, zaman kejayaan CSS Zen Garden. Sebuah website yang menjadi ajang pembuktian bagi mereka yang berani mengaku web developer. Jauh sebelum ada dikotomi BE dan FE engineer.
Setelah lumayan paham Tailwind, sayapun berniat untuk menulis ulang theme blog ini ke dalam Tailwind. Di saat yang sama, ada beberapa pekerjaan pembuatan website dengan static site generator lain, yaitu Hugo. Termasuk di antaranya adalah website ArtiVisi. Oleh karena itu, sekalian saja saya konversi blog ini menjadi Hugo dengan Tailwind CSS. Berikut adalah beberapa catatan konversinya.
Desain Tampilan
Untuk urusan desain tampilan, saya serahkan pada asisten kekinian, yaitu ChatGPT. Dengan meminta tolong secara baik dan sopan, saya berhasil mendapatkan template HTML yang dihias dengan Tailwind. Prompt yang saya gunakan adalah:
Tolong buatkan template blog menggunakan tailwindcss.
Sediakan 3 layout :
1. Halaman depan berisi judul dan excerpt dari isi artikel.
2. Halaman arsip berisi daftar judul dan link semua artikel.
3. Halaman about berisi bio penulis.
Secara bertahap, saya melakukan penambahan dan revisi sebagai berikut:
- Tambahan layout artikel untuk menampilkan satu artikel secara penuh
- Sidebar untuk menampilkan informasi bio
- Sidebar dibuat responsif dan static posisinya
- Penggantian font menjadi yang lebih kekinian
- Icon sosmed di footer sidebar
- Dark mode
- Copyright dan tech stack di footer sidebar
- Pagination untuk halaman utama
Rangkaian percakapan lengkapnya bisa disimak di tautan ini.
Hasil dari iterasi tersebut cukup memuaskan dan sangat usable. Saya hanya melakukan perbaikan-perbaikan ringan. Akan tetapi, rupanya selera estetika ChatGPT agak terlalu mencrang buat saya. Ketika disuruh memberikan sedikit warna dan akses, dia malah memilih warna-warna yang mencolok. Jadi akhirnya saya kembali ke desain minimalis di iterasi sebelumnya.
Konversi Content
Beres urusan desain dan layout, selanjutnya saya memindahkan konten dari Jekyll ke Hugo. Prosesnya relatif mudah, walaupun cukup banyak pekerjaannya. Setelah file artikel dan image dicopy, harus ada penyesuaian berikut:
- format link ke artikel lain di website yang sama
- perbaikan link image
- pembuatan summary artikel
Link Artikel dan Image
Jekyll menggunakan Liquid sebagai templating languagenya. Ada beberapa perintah khusus seperti misalnya bila kita membuat link ke artikel lain di website yang sama, maka dia akan ditulis seperti ini
[artikel Symmetric Encryption dengan Java]({% post_url 2013-11-21-symmetric-encryption-dengan-java %})
Yang seperti itu harus kita konversi menjadi link biasa. Kita bisa mencari file-file yang memuat link seperti itu dengan menggunakan grep, sebagai berikut
grep -nir '{% post_url'
Setelah kita dapatkan, untungnya di website ini tidak banyak link seperti itu, maka saya harus edit satu persatu.
File-file image tadinya ditaruh di folder /images/upload/yyyy/MM/nama-folder-sesuai-artikel. Ada beberapa image yang menggunakan sintaks Liquid seperti ini :
Kita ingin ubah menjadi seperti ini :
Untuk itu kita menggunakan perintah sed seperti ini
find . -name "*.md" -type f | xargs sed -i .bak 's@{{site.url}}/images/uploads@/images@g'
Beberapa link image ada juga yang sudah benar formatnya, tapi salah lokasi foldernya. Di tempat baru saya tidak menggunakan nama folder uploads. Untuk itu, kita jalankan lagi sed sebagai berikut
find . -name "*.md" -type f | xargs sed -i .bak 's@/images/uploads@/images@g'
Di file-file lama, saya juga temukan banyak spasi atau tab yang berlebihan. Sepertinya ini sisa-sisa konversi dari Wordpress dulu yang belum sempat dirapikan. Akibatnya, tampilan artikel menjadi seperti ini
Untuk memperbaikinya, kita bisa menjalankan perintah berikut untuk menghilangkan whitespace character yang berlebihan
sed -i .bak -e '/^[[:space:]]*$/d' 2011-06-27-membuat-screencast.md
Pembuatan Summary
Di Jekyll, untuk memotong artikel supaya baru muncul penuh setelah ditekan link Baca selengkapnya, kita menggunakan tag <!--more-->. Hugo memiliki fitur untuk memotong secara otomatis setelah sekian kata. Jadi kita tidak membutuhkan lagi tag tersebut. Untuk menghilangkannya di semua file, saya gunakan perintah berikut:
find . -name “*.md” -type f | xargs sed -i .bak ‘/<!--more-->/d’
Pindah Hosting
Selama pengerjaan website baru ini, saya taruh projectnya di Gitlab. Setelah selesai, daripada push ulang ke Github (lokasi hosting blog lama), saya putuskan untuk lanjut saja hosting di Gitlab. Oleh karena itu, saya konfigurasi DNSnya untuk mengarahkan nama domain ke Gitlab.
Jadi sekarang blog ini sudah modern, sesuai dengan trend masa kini yaitu menggunakan tools yang dibuat dengan Golang (yaitu Hugo), dan juga Tailwind CSS yang sedang naik daun. Pembuatannya juga dibantu oleh robot AI paling nge-hype di 2024 ini, yaitu ChatGPT.
Sehingga walaupun blog ini sudah menginjak masa remaja (usianya sudah menginjak 19 tahun), tapi teknologinya tetap up-to-date.
Selamat menikmati, mudah-mudahan blog ini akan terus diisi dan dibaca orang. Dan yang paling penting, semoga tetap bermanfaat buat umat manusia. Terima kasih Jekyll dan Octopress. It’s been a great time with you.