Gw udah nyerah, angkat tangan mengoptimalkan website yang di blogger. Emang udah dari sananya lemot mau gimana lagi. Akhirnya sekarang gw pindah haluan. Mending bikin web sendiri daripada pake yg dari blogger. Semuanya bisa diatur sesuka hati sesuai kebutuhan dan lebih cepat loadingnya. Apalagi jaman sekarang jaman dimana sebuah web itu ga harus loading lagi setiap pindah halaman, langsung kebuka. Loadingnya pas pertama kali buka aja, karena survey membuktikan jika website yang loadingnya lebih dari 2 detik, user bakal meninggalkan website tersebut, termasuk gw🤣. Gw juga males kalau nungguin website yang loadingnya kelamaan. Awalnya gw sempat mau pakai jekyll karena berpengalaman menggunakannya saat bikin CV online dulu, tapi menurut gw masih agak lambat, hasil GT metrix dan google page speed test di website CV online gw juga biasa aja, ga lambat dan ga terlalu cepat juga. Mau pake medium dan sejenisnya juga males, ga 100% gratis buat pembaca, ada limitnya kecuali upgrade akun. Trus gw nemu postingan di grup facebook tentang gatsbyJS dan nextJS. Gw langsung tertarik dengan kedua framework tersebut.
Pilihan gw jatuh ke gatsbyJS. Gatsby ini turunan dari React framework yang udah cukup terkenal speed-nya karena berbasis Static Site Generator (SSG). Gatsby melakukan build javascript atau typescript dari sisi server lalu di-generate menjadi sebuah konten static HTML & CSS saat pertama kali load. Jadi saat pertama kali load dia akan menampilkan web statis sambil mendownload Javascript di background. Dengan begitu SEO akan lebih baik karena response time-nya jadi cepat karena web hanya menampilkan HTML & CSS saat pertama kali loading dan ga perlu loading menunggu proses download JS kelar😎. Setelah proses download JS kelar barulah JS dieksekusi di browser dan halamannya menjadi interaktif. Pemanggilan API di sini menggunakan graphql dan render dilakukan dari sisi server saat build. Jadi setelah di-build yang dihasilkan di awal adalah murni static page biasa. Gw coba test pakai google speed test juga hasilnya nyaris sempurna, sangat cepat. Semua foto internalnya lazy load, jadi saat pertama buka, gambar yang ditampilkan bakal berupa svg atau blur image sebelum menampilkan foto aslinya, mirip medium gitu. Load image-nya hanya saat scroll ke image tersebut, jadi ga semua image di-load saat halaman dibuka. Dan gatsby ini ga butuh jQuery tentunya, plugin yang sangat legend ini masanya udah habis, jadi good bye jQuery!
Gw juga memakai beberapa plugin diantaranya medium zoom, contentful, algolia dan lainnya. Sebenarnya secara default gatsby menggunakan file markdown untuk menampilkan kontennya. Berhubung gw males banget dan ribet bikin MD files tiap nge-post, akhirnya gw memilih Contentful sebagai sumber kontennya. Selain Contentful juga ada Ghost, DatoCMS, Netlify cms, dan lainnya. Tapi gw lebih memilih Contentful karena gratis pastinya, dan cukup mudah menurut gw. Jadi kayak blogger gitu, gw tinggal bikin konten di sana trus saat publish maka otomatis akan trigger webhook dan gatsby bisa mengambil kontennya via graphql saat build nanti. Jadi ga ribet harus bikin file markdown dulu setiap mau ngepost trus push lagi ke master. Lagian ntar kalau post gw udah banyak, file markdown di branch bakal membludak ga beraturan.
Untuk host gw pakai zeit atau vercel aja. Dulu namanya zeit, tapi sekarang ganti jadi Vercel. Alasan utamanya tetap karena gratis🤣. Ada beberapa pilihan sih seperti fast io atau netlify. Cuma kalau fast io ga full support gatsby, sedangkan netlify gw udah punya domain https://ferry.netlify.app/resume/ untuk CV online. Selain itu domain netlify kepanjangan, sedangkan di vercel lebih singkat di https://ferry.now.sh walau sekarang berubah jadi https://ferry.vercel.app. Lebih elegan aja sih menggunakan domain yang singkat daripada yang panjang-panjang. Di vercel ini fiturnya kurang lebih sama dengan netlify, bisa diatur environment variable-nya. Dan saat konten baru dipublish dari contentful, dia bakal auto deploy sendiri dengan melakukan konfigurasi webhook. Karena di-build di sisi server, tiap ada konten baru memang harus di-build & deploy ulang. Begitu juga saat push ke branch master atau main, atau branch yang kita konfigurasi, dia juga bakal auto deploy sendiri.
Untuk fitur pencarian gw pakai algolia, karena ada versi gratisannya dan ga ribet set-up-nya. Fitur gratisnya ada limitnya sih, tapi semoga aja perbulannya gw ga melampaui limit. Selain algolia ada yang murni gratis, kayak elastic lunr, tapi settingnya rada ribet. Jadi mending pakai algolia saja. Oh ya, algolia ini untuk index datanya dilakukan saat build, tapi pemanggilan datanya dilakukan saat search di client. Jadi sama kayak manggil API biasa ke server algolia. Selain itu algolia ini ada fitur voice search, kayak ok google gitu, tapi sayangnya hanya support di chrome-based browser aja. Tapi di beberapa versi ada yang ga jalan juga sih. Untung di google chrome jalan, jadi blog gw kayak keren gitu (kontennya mah biasa aja😁).
Plugin lainnya yang gw pake yang menurut gw menarik yaitu medium zoom. Jadi ketika klik gambar, gambarnya bakal pop-up nge-zoom gitu kayak di medium. Jadi ga hanya blur-up mirip medium, tapi zoom-nya juga. Untuk fitur komen gw pakai Utterances yang terintegrasi dengan Github, jadi yang punya akun github aja yang bisa komen😁.
Gw memutuskan untuk share template blog ini di github. Setelah Pull Request gw di-merge sama Gatsby, template ini bisa diinstall dari gatsby-cli. Link-nya bisa diakses disini: https://www.gatsbyjs.org/starters/7sferry/Gatsbyan1.0/. Tinggal copy aja command-nya ke terminal masing-masing (pastikan NodeJS dan Gatsby-CLI sudah terinstall). Dengan mengetikkan command tersebut di terminal maka akan otomatis melakukan git clone dan npm install semua dependency-nya. Jadi nanti begitu selesai bisa langsung run di local. Bahkan kalau ga mau ribet bisa deploy langsung ke Netlify dan setup spaceId dan content token-nya di environment Netlify dengan menekan tombol Netlify pada Link starter di atas. Templatenya sih gw bikin khusus untuk yang make CMS Contenful, tapi juga bisa kok buat yang selain Contentful atau Markdown biasa, tinggal di-modif aja Query GraphQL-nya ntar. Gw sendiri awalnya ga pake CMS apa-apa😁. Untuk informasi lengkapnya tentang setup Contentful bisa dibaca aja README-nya di https://github.com/7sferry/Gatsbyan1.0, disana udah lengkap gw tulis step by step-nya. Sebagian besar fitur di blog ini ada di sana. Kecuali Algolia search dan Google Analytics Report (buat fitur Most View), karena kalau gw masukin ntar ribet setupnya. Tapi kalau mau bisa ditambahin sendiri. Mostly fiturnya mirip dengan blog ini. Sedangkan untuk blog ini source code-nya tersedia di https://github.com/7sferry/gatsbyan.
Nama project-nya gw kasih Gatsbyan. Sebenarnya ga ada arti khusus sih. Iseng aja dapat ide ngasih nama itu, biar unik aja gitu😂. Untuk preview-nya bisa dilihat di https://7sferry-gatsby-contentful-starters.netlify.app/. Terakhir gw cek skor Google Page Speed-nya cukup tinggi. Di web Mobile skor-nya nyampe segini.
Sedangkan skor untuk web Desktop nyaris sempurna.
Oh ya, bagi yang ingin ngasih masukan atau bantu-bantu juga boleh Pull Request kok, kali aja ada code gw yang kurang optimal disana atau ada sesuatu yang bisa di-improve gitu, sekalian belajar juga gw😁.
Semoga aja blog gw kali ini banyak manfaatnya. Dan gw lebih sering bikin kontennya secara konsisten, baik itu tentang pemrograman maupun tentang keluh kesah kehidupan gw secara personal. Harapannya sih bisa bermanfaat bagi orang-orang. Yang penting gw ada kerjaan buat menyalurkan hasrat menulis gw lewat blog ini🙂.