Pindah Rumah

Dipublikasikan pada 25 September 2023

Satu Dekade

Jika dilihat dari postingan pertama, blog nirfaidah ini ternyata sudah berusia 10 tahun. Selama itu pula saya senantiasa menggunakan WordPress self-hosted untuk menulis dan mempublikasikan tulisan-tulisan ilmiah tidak bermutu sejak 2013.

Tidak Ada yang Salah

Tidak ada yang salah dengan WordPress self-hosted. Selain mudah dan nyaman digunakan, kita juga diberikan keleluasaan untuk memilih dan mengedit plugin yang kita inginkan.

Hanya saja, selain butuh biaya untuk sewa domain, ia juga memerlukan tambahan biaya untuk sewa hosting. Hosting ini ibarat rumah untuk menyimpan file-file source code, foto-foto, menjalankan script, dan tentunya database.

Namun, karena beberapa tahun terakhir sudah semakin jarang menulis postingan di blog, serta tidak ada lagi tawaran content placement/paid post, rasanya agak mubazir jika terus-menerus membayar biaya bulanan untuk hosting.

Pilah-pilih Static Site Generator

Kemudian terlintas di benak saya agar blog ini diubah menjadi static site saja, yang nanti filenya dapat ditaruh di penyedia static web hosting gratisan semisal netlify atau vercel.

Waktu itu ada beberapa alternatif static site generator yang saya pertimbangkan:

  1. Jekyll
  2. Gatsby
  3. Pelican

Pilihan akhirnya jatuh kepada Gatsby. Salah satu pertimbangannya adalah karena framework tersebut berbasis React, yang mana ia menggunakan JavaScript sebagai bahasanya. Jadi saya pikir ini akan relatif lebih mudah untuk dipelajari.

Terlebih selama satu tahun terakhir saya lebih banyak bekerja menggunakan Google Apps Script, yang juga menggunakan JavaScript sebagai landasannya.

Langkah Migrasi

Setelah memutuskan framework mana yang akan digunakan, berikutnya langkah yang saya lakukan untuk migrasi dari WordPress ke Gatsby adalah sebagai berikut:

A. Persiapan

Langkah pertama dimulai dari mempelajari dasar-dasar Gatsby. Saya mengikuti tutorial yang dibuat oleh Net Ninja. Jika sebelumnya sudah mengenal React, JSX, Component Driven Development, dan kawan-kawannya, maka untuk mempelajari dasar-dasar Gatsby ini semestinya tidak memakan banyak waktu. Satu hal yang saat itu asing bagi saya adalah GraphQL.

Perlu dicatat, sebenarnya Gatsby juga dapat dihubungkan ke banyak sumber data, termasuk WordPress. Namun karena yang saya butuhkan adalah agar "berlepas" dari WordPress, maka sumber data yang saya pilih adalah markdown dan frontmatter saja.

B. Perancangan

Langkah berikutnya yang saya lakukan adalah mendesain antarmuka melalui Figma. Ingat, ya! Figma, bukan Ligma! Astaghfirullah.

Tampilan yang saat ini saya buat terinspirasi dari agung-setiawan.com. Sepertinya saat postingan ini ditulis, blog tersebut sudah tidak eksis.

C. Pemindahkan konten

Proses pemindahan dimulai dari menyalin seluruh postingan dan gambar-gambar yang ada di WordPress dengan bantuan plugin WP Gatsby Markdown Exporter. Disusul dengan menyalin ribuan komentar yang ada menggunakan WordPress Comments Import & Export.

D. Menulis Source Code

Lanjut saya menulis source code untuk halaman, template, dan component. Tak lupa juga saya tambahkan styling tipis-tipis dengan menggunakan Tailwind. Ini merupakan kali pertama saya menggunakan Tailwind, dan ternyata jauh lebih menyenangkan dari yang dibayangkan.

Oh ya, salinan komentar yang didapat dari plugin WordPress Comments Import & Export ternyata masih dalam bentuk CSV. Sehingga saya masih perlu menuliskan script guna memparsing file CSV tersebut, dan mengubahnya ke dalam bentuk frontmatter (markdown) agar nantinya lebih mudah diakses melalui GraphQL melalui plugin yang sudah ada.

Setelah halaman selesai dibuat, berikutnya ditambahkan query GraphQL untuk mengakses dan generate file postingan dan komentar dari file markdown yang sudah ada.

E. Deploy dan Publish

Setelah memastikan semua berjalan dengan baik di lingkungan development. Kemudian saya lakukan push ke repository GitHub yang terhubung ke Netlify. Sehingga setiap kali ada perubahan di GitHub secara otomatis akan langsung terpublish.

Langkah terakhir adalah memperbaharui DNS record yang ada agar semua request yang masuk dapat tertangani dengan baik.

Penutup

Ada kepuasan tersendiri selama proses migrasi, utamanya karena ada beberapa hal yang akhirnya bisa dipelajari dan dipraktikkan. Setelah dilakukan migrasi, navigasi antar halaman juga menjadi jauh lebih clorat-clorot, sat-set.

Terakhir, karena tidak lagi memerlukan hosting lumayan juga bisa menghemat 330 ribuan per-tahun. 😁💰

Kategori: Catatan
Tag: Gatsby, WordPress, Blog

About The Author

Miftah Afina

Hello! 👋

I'm Afin, a Google Apps Script freelancer that ready to automate your workflows.

0 komentar