Muhammad Ilham Rizqyawan

Perpindahan dari Wordpress ke Jekyll

Halo halo. Setelah lama tidak menulis, akhirnya bisa menulis lagi di blog ini. Pada kesempatan ini saya ingin membagikan pengalaman saya berpindah dari Wordpress...

Perpindahan dari Wordpress ke Jekyll

Halo halo. Setelah lama tidak menulis, akhirnya bisa menulis lagi di blog ini. Pada kesempatan ini saya ingin membagikan pengalaman saya berpindah dari Wordpress ke Jekyll, mulai dari latar belakangnya, proses desain sampai deploying ke servernya.

Kenapa Pindah?

Dulu pertama kali bikin website ini objektif utamanya adalah bagaimana caranya bisa bikin website yang bisa langsung cepat bisa up di internet tanpa harus banyak effort. Oleh karena itu dipilihlah platform Wordpress, dengan sedikit melakukan konfigurasi dan kostumisasi tema (biar nggak standar banget 😜). Tujuannya tadi, biar bisa langsung up dan saya bisa fokus di nulis blognya aja.

Tetapi semua berubah setelah negara api menyerang 😅. Yang tadinya niat biar saya fokus nulis, ternyata tidak bisa kesampaian karena saya malah sibuk maintenance. Setelah beberapa bulan website ini up, website ini kena hack, yang bikin jengkel juga karena nggak penting banget (klo mau nge-hack website yang kerenan lah, kayak NASA gitu, pake HTML 🤣). Selain maintenance untuk membereskan hasil hack tadi, masalah lain yang muncul adalah di sisi hosting, seringnya sih nggak bisa update core wordpress sama pluginnya, yang karena pas ditanyakan ke hosting, setting ini itu-nya harus diaktifkan, atau server IIX nya lagi bermasalah. Tapi saya maklum sih, karena saya ngambil paketnya yang paling murah karena nggak butuh yang gede-gede amat.

Akhirnya ya tiap niat nulis, ada ide buat nulis, akhirnya tersibukkan oleh maintenance tadi. Yang tadinya mau ditulis jadi lupa. Akhirnya saya pikir, ya udah lah, pindah aja (platform + hosting).

Kenapa Jekyll?

Jadi yang pertama harus diketahui, Jekyll itu Static Site Generator. Berbeda dengan dynamic website (kayak wordpress dll), Jekyll ini convert source code template + posting nya ke static site langsung. Jadi isinya ya html + js + css + asset doang (kayak pertama kali belajar bikin website dulu).

Keunggulannya apa? karena web server tinggal setor file yang di-request user, prosesnya jadi lebih cepat dibanding dynamic website yang baru render dulu sesuai yang di-request user, belum lagi tambahan plugin-plugin yang nambah beban proses ini. Di wordpress biasanya kelemahan ini diatasi dengan caching, yang secara umum menyimpan file html + asset yang sering diakses sehingga tidak harus reload script PHP-nya dulu. Coba perhatikan, prosesnya ya mirip-mirip static site generator tadi.

Keunggulan kedua adalah keamanan. Ya wong isi websitenya html static, celah keamanannya jauh lebih sedikit dibanding dynamic website semacam wordpress yang bisa dieksploitasi dari script PHP, database, dsb.

Terus kenapa dulu orang susah-susah bikin PHP, Wordpress, dll kalo static website lebih bagus? Jawabannya karena website (full) static itu statis 😜 Jadi ya cuman nampilin html yang kita buat aja. Itupun kalo buat page baru, post baru, harus dibikin full html-nya, gak fokus di konten barunya aja. Bayangin e-commerce jutaan produk, tiap item dibikin satu-satu html-nya. Abis itu si user cmn bisa liat itemnya aja (pemesanan hubungi no sekian), gk bisa langsung checkout + bayar kayak di e-commerce sekarang.

Nah static site generator kayak Jekyll ini mencoba menjembatani antara CMS dan static site. Cara kerjanya kita semacam membuat template websitenya kayak gimana, isi konten (semacam post) dibuat di file terpisah yang isinya fokus konten tersebut (biasanya format markdown), nah static site generator ini yang me-render konten-konten tadi ke static html. Sebetulnya banyak static site generator lain (next, hugo, gatsby, hexo, dll), cuma menurut saya Jekyll lebih simple dan lebih banyak supportnya untuk saat ini (maksudnya kalo search troubleshooting A, B, C biasanya ada). Selain itu karena pake Ruby jadi semacam ada sentimen historisnya karena dulu kerja lingkungannya pake ruby on rails ;)

Pembuatan Website

Proses pembuatan website ini dari awal kurang lebih 1,5 bulan, cukup lama untuk ukuran website kecil seperti ini. Penyebabnya mungkin selain karena harus mengingat kembali dasar-dasarnya, tetapi juga mengejar beberapa ketertinggalan di bidang ini. Tapi buat saya ini cukup menyenangkan karena seperti mengingat masa-masa dulu kerja sebagai web designer/frontend dev. Prosesnya sendiri kurang lebih seperti ini:

  1. Design mockup
  2. Coding static site
  3. Convert website lama ke jekyll
  4. Edit static site ke Jekyll template
  5. Deploy ke Netlify
  6. Integrasi NetlifyCMS

Design mockup

Untuk design, saya mengambil dasar dari design website sebelumnya. Cuman dibuat lebih simpel, dan terstruktur. Proses design ini cukup lama, karena kelamaan liat website-website lain untuk referensi (liat di awwwards). Untuk tools nya sendiri saya pake Figma).

Design mockup dan prototyping di Figma

Coding static site

Proses selanjutnya adalah mengubah design mockup tadi jadi html+css+js. Untuk framework saya menggunakan Bootstrap (yang ternyata sudah pindah dari LESS ke SASS/SCSS). Proses ini memakan waktu yang paling lama diantara yang lain, terutama saat mencoba transisi antar page. Selain lamanya mengimplementasikan barbajs, banyak bug muncul setelah implementasi barbajs ini karena tidak tahunya saya tentang “lifcycle” dari proses transisinya. Selain itu saya juga belajar optimasi performa animasi agar animasi tidak stuttering.

Convert website lama ke jekyll

Untuk proses ini sebetulnya tidak terlalu signifikan pada kasus web saya ini, karena memang baru ada beberapa posting di blog dan beberapa page lain saja. Secara umum saya export ke XML di menu admin wordpress, kemudian XML tersebut di export ke Jekyll. Jekyll sendiri menyediakan website khusus untuk dokumentasi migrasi dari platform lain ke Jekyll Jekyll-importer.

Edit static site ke Jekyll template

Proses ini cukup sederhana, dengan sebagian proses adalah memecah file menjadi template untuk layout dan include, dan sisanya membuat looping atau “print” output konten dengan liquid. Yang agak lama di proses ini adalah membiasakan diri dengan cara kerja Jekyll-nya.

Deploy ke Netlify

Netlify ini tidak sengaja saya temukan ketika mencari tutorial Jekyll. Tadinya saya akan menggunakan github pages saja. Tapi dengan github pages beberapa fitur atau gem ternyata tidak bisa digunakan. Nah dengan netlify ini kelemahan tersebut tidak ada. Selain itu kita bisa menggunakan repository hosting lain, jadi saya bisa pake private repo di bitbucket dengan gratis 😁. Oiya, netlify sendiri gratis untuk starter plan, tapi plan ini lebih dari cukup untuk website pribadi, bahkan menyediakan HTTPS (let’s encrypt) dan support custom domain. Jadi saya tinggal setting domain saya ke dns-nya netlify.

Nah netlify ini semacam terkoneksi ke repo kita, kemudian men-deploy jika ada push baru di repo tersebut. Proses penambahan website baru dari git repo ke netlify cukup mudah dan jelas.

Integrasi NetlifyCMS

Sampai proses sebelumnya (deploy ke Netlify) sebenarnya website tersebut sudah bisa digunakan. Hanya saja untuk membuat posting baru / edit, dilakukan di file markdown, di-edit di text editor, yang artinya tidak WYSIWYG. Setelah file baru dibuat / edit, kita harus mem-push perubahan tersebut ke git repo. Mungkin ini yang jadi kelemahan sistem static site generator ini.

Netlify CMS Demo

Tapi ternyata ada CMS yang mengatasi permasalahan tersebut, salah satunya netlifyCMS. CMS ini dibuat oleh tim netlify tapi bisa digunakan tidak harus di web yang di host netlify. Cara kerjanya adalah menyediakan GUI untuk me-manage konten, kemudian mem-push file tersebut ke git repo secara otomatis. Dengan CMS ini kita bisa mengedit konten seperti di CMS dynamic site lain seperti wordpress, tetapi dibelakang layar sebetulnya kita menggunakan static site generator.