iamyuu.dev

Menulis ulang situs pribadi

Ditulis tanggal September 9, 2020

Awalnya situs pribadi saya di buat dengan bantuan Gatsby, karena di Gatsby ada plug-in yang cukup bagus yaitu gatsby-image yang mana dia mengoptimalisasi semua gambar yang ada di situs kita. Tapi beberapa waktu lalu lighthouse menambahkan kriteria web vital dan hasilnya adalah pas jalanin lighthouse dan liat hasilnya lighthouse-nya, semua situs yang pake Gatsby performanya jadi jelek bangeettt, sampe merah malahan.

Dan ini kan static site generator (SSG) yang mana hasilnya adalah berkas statis, menurut saya kebangetan banget dah, udah SSG terus situsnya sederhana cuman blog gitu doang dapet skor di lighthouse-nya jelek.

Akhirnya cari-cari alternatifnya, ketemu Gridsome (sebenernya udah tau dari lama sih hehe), tapi dipikir-pikir lagi mendingan situs ini buat uji coba segala macem kek API terbaru dan sebagainnya. Dan karena saya ga mau cape, ngebuat kerangka kerja sendiri akhirnya pake Sapper karena di Sapper harus buat apa-apa sendiri, karena komunitasnya masih kecil jadinya belum banyak plug-in yang bertebaran.

Jadi situs ini sekarang ditenagai oleh Sapper dan juga dengan bantuan dari beberapa plug-in, kaya:

  • Tailwind CSS - ini biar gampang styling-nya.
  • MDsveX - kalo ini biar bisa masukin komponen Svelte di berkas Markdown dan jadinya bisa pake svelte-image deh.
  • svelte-image - yang terakhir ini buat mengoptimalisasi gambar, fungsinya sama kaya gatsby-image tapi ini buat Svelte.

Terus buat deployment-nya masih saya deploy di netlify karena gratis dan juga udah cukup terbiasa.

Kalo penasaran sama kodenya gimana, kamu bisa cek di github saya di repo iamyuu, insyaAllah nanti saya bakal tulis juga gimana cara membuat blog dengan bantuan Sapper.

#random