· Coding · 4 min read
Migrasi dari WordPress ke AstroJS
WordPress mudah untuk para pemula tetapi timbul banyak kebutuhan maintenance.
Alasan Migrasi
Selama 20 tahun menggunakan WordPress, saya menemukan penggunaannya sangat mudah. Banyak jasa hosting yang menawarkan instalasi WordPress dengan satu klik. Ketika saya bermigrasi ke Digital Ocean sekitar 10 tahun lalu, setup-nya juga sangat mudah, dan saya bisa menggunakan droplet yang paling murah (sekitar 5-6 USD per bulan).
Masalahnya timbul karena situs-situs ini jarang di-update, baik WordPress-nya maupun VPS-nya. Ketika saya melihat kondisi VPS yang masih menggunakan Ubuntu versi 16, PHP tidak bisa langsung di-update ke versi terbaru. Plugin-plugin WordPress yang sudah bertahun-tahun digunakan juga tidak kompatibel dengan versi PHP yang ada, atau bahkan sudah ditinggalkan oleh developernya. Proses untuk melakukan update semuanya sangat menyusahkan karena harus meng-update OS, PHP, database, lalu WordPress. Setelah itu, banyak gambar yang hilang, yang menambah frustrasi.
Akhirnya saya memutuskan untuk migrasi ke AstroJS, apalagi banyak yang memberikan review baik tentang Astro.
Berikut garis besar langkah untuk memulai migrasinya:
1: Ekspor dan Unduh Seluruh Konten Lama
Untuk hal ini, dapat menggunakan WordPress Export Tool. Saya langsung mengunduh seluruh data dari berbagai situs WordPress yang saya miliki. Kebetulan saat itu menggunakan WordPress Multi-Site sehingga isinya banyak sekali. Sayangnya, gambar-gambar dalam artikel MD sudah digantikan dengan gambar yang diperkecil menggunakan media tools (lupa nama pluginnya).
2: Setup Proyek Astro
Saat ini, saya sangat senang menggunakan NX Monorepo, jadi saya membuat proyek baru dengan plugin @nxtensions/astro. Dengan ini, WordPress Multi-Site bisa disimpan di satu repository saja, sehingga tidak perlu memaintain banyak folder/repository untuk website-website yang dimiliki.
3: Pilih Template dan Update Kodingnya agar Support dengan NX
Dari hasil showcase, saya memilih template AstroWind. Tampilannya sederhana tetapi memiliki skor Google Lighthouse yang tinggi, jadi saya tidak ragu memilihnya.
4: Pindahkan Seluruh Konten MD yang Telah Diekspor ke Folder Post
Hasil ekspor WordPress akan memiliki beberapa field di .md yang berbeda, jadi kita perlu melakukan sedikit perubahan. Namun setelah itu, seluruh post selesai termigrasi. Ada banyak link yang berubah dan gambar-gambar juga perlu dipindahkan ke asset folder dan diubah linknya. Ini yang menghabiskan waktu manual paling banyak dan saya pikir lebih cepat jika dilakukan satu-satu daripada menulis skrip untuk membuatnya. Jumlah postnya juga tidak banyak sekali.
5: Pindahkan Komentar
Ini cukup sulit, karena ingin tetap ada komentar, jadi saya memutuskan untuk migrasi existing comments ke Disqus. Setelah itu selesai, saya membuat komponen Disqus di Astro untuk integrasi.
Pertama buat file Disqus.astro
---
export interface Props {
url: string;
identifier: string;
}
const { url, identifier } = Astro.props;
---
<div class="disqus-container">
<div id="disqus_thread"></div>
</div>
<script is:inline define:vars={{ url, identifier }}>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
window.disqus_config = function () {
this.page.url = url; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = `${identifier} ${url}`; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
if (!window.DISQUS) {
(function () {
// DON'T EDIT BELOW THIS LINE
const d = document,
s = d.createElement('script');
s.src = 'https://xyz.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
} else {
window.DISQUS.reset({
reload: true,
config: disqus_config,
});
}
</script>
<noscript>
Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
<style>
.disqus-container {
max-width: 900px; /* Adjust the width as needed */
margin: 0 auto;
padding: 1rem; /* Optional: Add padding */
}
#disqus_thread {
width: 100%;
}
</style>
Lalu embed di coding Astro yang kita inginkan seperti berikut:
import Disqus from '~/components/common/Disqus.astro';
// Generate the canonical URL and identifier for Disqus
const canonicalUrl = post.disqusGuid as string;
const identifier = post.disqusId as string; // Or use any other unique identifier for the post
---
<Disqus url={canonicalUrl} identifier={identifier} />
Hasilnya dapat dilihat di beberapa post lama di Aliminasi.com.
Kesimpulan
Memindahkan website dari WordPress ke AstroJS sangat mungkin dilakukan walaupun ada beberapa langkah yang perlu dijalani. Tapi hasilnya sangat bagus dan performanya cepat.
