Migrasi dari Jekyll ke Gatsby

Hampir dua minggu setelah mencoba menggunakan gatsby dirasa sudah nyaman walaupun masih dalam versi beta dan kadang ketemu bug saat deploy tapi kalau dapet paket plungin yang pas hasilnya juga akan baik.

Kenapa Migrasi dari Jekyll

Jekyll adalah staticgen yang bagus hanya saja ada saja yang diperlukan kadang tidak ditemukan di jekyll. Sebenarnya jekyll dokumentasinya lengkap, komunitasnya yang cukup besar, dan jekyll sudah sangat stabil dibanding staticGen lain. Bahkan jekyll memimpin di urutan pertama dari semua staticgen yang saat ini digunakan diikuti Nextjs di urutan kedua dan Hugo di urutan ketiga pada saat post ini dibuat.

Dari pengalaman saat pertama kali mulai menggunakan jekyll, untuk memulai membuat website/blog cukup menggunakan satu dari ratusan template yang tersedia dan install gem jekyll. Jika ingin menggunakan Github pages cukup fork atau download template dan simpan di repository github maka github akan menyajikannya sebagai website/blog.

1. salah satu yang spesial dari jekyll

Jekyll menggunakan templating liquid, hampir semua variabel bisa diakses di semua file dengan berbagai ekstensi sesuai kebutuhan hanya dengan menggunakan YAMl frontmatter di setiap filenya. salah satunya saya pernah menulis javascript untuk service worker dan versinya selalu berubah sekaligus men-cache artikel terbaru setiap kali website di generate tanpa harus menyentuh file tersebut. Dan ini adalah fitur yang terfavorit dari jekyll karena semuanya full otomatis untuk static file.

Dengan jekyll walaupun menggunakan minimal plungin setup kita bisa menggunakan liquid untuk melakukan simple hack untuk mendapatkan hasil yang kita inginkan, cek souce code lama blog ini yang menggunakan jekyll github pages.

2. salah satu yang kurang dari jekyll

Walupun begitu ketika kita ingin menyediakan konten untuk pengguna mobile (handphone /tablet), khususnya asset gambar tentunya kita tidak ingin membebani pengguna mobile untuk memuat file gambar yang ukurannya sama dengan yang dimuat di desktop.

Tentunya akan sangat ribet untuk menyesuaikan ukuran gambar yang sesuai untuk mobile jika kita mengkonvert berbagai macam ukuran secara manual dan mengabaikan format penulisan markdown yang simple dan mudah dibaca. Sebenarnya bisa saja menggunakan paket dari npm, termasuk gulp tapi jadi build 2 kali karena inginya generator dari github pagesnya juga kepake 😏.

Kenapa Migrasi ke Gatsby

Bermigrasi dari jekyll berarti juga siap bermigrasi hosting, karena Github pages tidak mendukung staticgen lain selain jekyll (saya pilih Netlify). Selain hosting juga berarti harus dipertimbangkan kemampuan dari staticgen yang akan dipakai bisa jadi alternatif dari jekyll sendiri, apakah fiturnya lebih baik atau malah banyak yang kurang. Saat memilih staticgen alternatif jatuh pada Hugo dan Gatsby sendiri.

1. Menjelajahi Hugo

Hugo memiliki kemampuan lebih dari jekyll, fitur yang tadi saya inginkanpun bisa dipenuhi yang lebih keren lagi bisa buat costum output sesuai keinginan. Dengan bantuan dokumentasi yang lengkap menjadi sangat mudah untuk membuat tema kita sendiri. Untuk membuat tema memang agak sedikit membingungkan karena kita bisa memiliki dua tema yaitu tema custom dan tema default. Akan lebih mudah untuk membuat tema default dibandingkan tema custom karena saya sendiri kurang begitu mengerti cara tema custom mendapatkan pewarisan dari tema default.

Sampai pada tahap styling tema, tahap inilah yang sangat rumit dari tema hampir setiap website/blog walaupun sudah pakai preprocessor seperti Stylus, SASS/SCSS dan LESS terkadang masih banyak sekali style dari setiap elemen yang ditipa khususnya pada typography-nya, font dll, Ahhh 😥 tambah lagi menyesuikan style dengan menambahkan elemen. belum seo-nya (opsional sih).

2. Pertama Kenal Gatsby

Disaat sibuk memoles tampilan tema hugo, baru dengar kalo ada staticgen baru yang dibicarakan komunitas JAMstack yang sangat menarik yaitu gatsby. Gatsby hampir mirip dengan Nextjs yang hasilnya adalah react single page app, bedanya gatsby juga mendukung markdown dan data file sebagai source konten website seperti halnya staticgen lainnya.

Gasby sangat cocok untuk menyempurnakan blog ini menjadi Progressive web app, dimana selain di sajikan melalui https, service worker untuk menyimpan landing page (belum) dan critical asset, dan terahir cepat navigasi linknya, bahkan kalo di browser ga ada loadingnya. 😍

Dari situ mulai mempertimbangkan pilihan dari hugo, hugo hampir tidak ada celah, kekurangan cuma sebagian kecil bahkan lebih banyak lebihnya dari jekyll. Akhirnya mencoba melihat dari kebutuhannya saja, seperti saat ini mungkin tidak membutuhkan custom otuput baik json, AMP, Instant Article, dll. Built-in feature hugo juga jadi pertimabangan karena kayaknya akan merumitkan di file konfigurasinya. Hugo bisa juga dibuat seperti single app tapi prosesnya double pake hugo dan package npm baik itu angular, vue, react, dll.

3. Hasil penjelajahan Gatsby

Sebelum menggunakan starter yang telah disediakan sempat juga mengikuti tutorial cara membuat template gatsby dari awal dan sangat memuaskan. tutorialnya sangat jelas, singkat dan padat walaupun belum pernah menggunakan react jadi sedikit belajar menggunakan react.

Di gatsby semua data source di query pake Graphql, baik markdown, gambar, data file, dll. Styling menggunakan typography.js yang sangat memudahkan dalam merias blog ini, jadi disini saya cuma fokus ke penempatan kontennya saja seperti wrapper, header, menu, artikel, komentar disqus, list artikel, footer dan selesai.

Setelah selesai dengan template dan import konten (semua artikel di markdown files) dari jekyll ke Gatsby saatnya ambil test audit. Dan dari sinilah saya kembali ke jekyll. Dan memutuskan tidak jadi migrasi. Hasil mengejutkan ketika javascript di browser di disable, Gatsby hanya menampilkan halaman awalnya saja, dan tidak bisa navigasi ke link lain atau kontennya tidak muncul yang ada halaman putih kosong.

Tidak terpikir kalau semua hasilnya adalah file statis javascript serasa waktu terbuang percuma untuk coba migrasi. Tentu percuma kalau semua halaman tidak bisa ditampilkan karena tidak semua browser mengijinkan javascript secara default dan crawler juga tidak bisa mengindeks semua halaman.

4. Seminggu kemudian

Akhirnya diputuskan untuk coba - coba mendeploy gastby di sub domain netlify dengan konten dummy full teks panjang dan beberapa gambar untuk sekedar menyelesaikan hasil yang terlalu disayangkan untuk dibuat dan nganggur di repo. dicoba di test audit lagi lumayan cepat jika di bandingkan dengan jekyll dengan menggunakan service worker.

Tentu hasilnya lebih memuaskan karena mungkin saya masih memiliki render blocking css external di jekyll, jika keduanya pake internal css pasti sama first meaningful paint sekitar 2 detik. Selain itu mencoba membandingkan hasil lain yang tidak disadari Gatsby juga menyajikan halaman html statis ketika javascript di disable. 😁

Setelah di cari informasi, ketemu di issue reponya gatsbyjs juga ada yang menjumpai kalau html statisnya ga disajikan karena Gatsby menyajikannya menggunakan command gatsby build sedangkan untuk develop yang disajikan cuma javascriptnya saja.

5. Seo Di Gatsby

Tiga hari setelah percobaan deploy gatsby, kini saatnya mengimplementasikan basic SEO dengan menambahkan beberapa meta tag menggunakan react-helmet. dengan referensi dari dokumentasi dengan mudah di dapatkan contoh menggunakan dan menambahkan meta tag dengan react helmet. Tapi dari situ juga ada sedikit masalah karena setiap tag memiliki property tambahan data-react-helmet="true" yang tidak terbaca sebagai tag yang valid bagi sebagian crawler. Jika ingin mengimplementasikan seo di halaman gatsby disarankan untuk menggunakan json+ld.

Setelah semua dirasa cukup terakhir mendeploy blog/website menggunakan gatsby dan menginstall plugin sentry untuk error tracking.

The End

Semua staticgen memiliki kelebihan dan kekurangannya masing - masing dan tentu semuanya akan lebih baik nantinya. Seperti yang kita tahu semua staticgen yang saat ini digunakan sangat membantu kita untuk membuat situs JAMstack yang lebih aman, lebih mudah dibuat, memiliki performa yang bagus, cukup push souce code ke-repo jadi website/blog dan tentuya tidak banyak memakan biaya walaupun skala pengembangannya yang besar, Bahkan bisa jadi gratis. 😁

Semoga dari pengalaman diatas bisa sedikit membantu untuk yang ingin memilih staticgen yang cocok sesuai kebutuhan pembaca.

#ssg#Gatsby#Jekyll