Cara Malas Memindahkan Website WordPress ke Static Site
Kali ini saya mau cerita tentang eksperimen yang cukup seru. Sebagai bapak-bapak digital, saya seringkali mencari cara untuk menyederhanakan hal-hal yang seharusnya bisa lebih efisien. Salah satunya adalah mengelola website. Jujur saja, saya merasa framework andalah saya dulu yaitu wordpress kerasa sudah agak "tua". Bukan karena WordPress itu buruk, tapi lebih karena kebutuhan website CCTV Prabumulih ini sebenarnya tidak terlalu dinamis.
Website ini dulunya adalah proyek sampingan untuk membantu teman. Awalnya, saya memang familiar dengan WordPress dan Elementor (desain gratisan yang cukup mempermudah). Tapi, seiring waktu, saya merasakan beberapa masalah. Update plugin dan WordPress walau nga sering terkadang bisa menjadi merepotkan, apalagi kalau website tidak terlalu sering di-update. Lagipula, website ini sudah cukup baik dalam mendapatkan traffic organik dari Google Search, sepertinya ini bukan karna saya yang jago SEO, mungkin karena persaingannya aja yang tidak terlalu ketat.
Mengapa Memilih Static Site?
Nah, di sinilah ide untuk memindahkan website ke static site muncul. Static site, secara sederhana, adalah website yang tidak perlu diproses ulang setiap kali ada perubahan. Semua halaman sudah "jadi" dan siap untuk disajikan. Ini berbeda dengan WordPress yang setiap kali ada update, plugin, atau perubahan konten, harus memproses ulang dan menghasilkan halaman-halaman baru.
Keuntungan utama static site adalah kecepatan. Karena tidak ada proses pemrosesan, website static site bisa sangat cepat dimuat. Selain itu, keamanan juga lebih terjamin karena tidak ada database atau server-side scripting yang rentan terhadap serangan.
Memanfaatkan Google AI Studio
Saya sempat berpikir, "Oke, kalau mau bikin static site, harus pakai apa ya?" Awalnya saya memikirkan Astro JS, karena memang saya sedang bersemangat mempelajari ini. Tapi, karena website CCTV Prabumulih ini cukup sederhana (hanya beberapa halaman statis dan tidak terlalu kompleks), saya memutuskan untuk mencoba pendekatan yang lebih "males" – memanfaatkan Google AI Studio.
Google AI Studio adalah platform yang memungkinkan kita untuk membuat berbagai macam aplikasi AI, termasuk menghasilkan kode. Saya mencoba memberikan instruksi kepada AI untuk membuat ulang website CCTV Prabumulih dengan desain yang lebih modern dan responsif.
Screeshot Website Sebelum dirubah
Perintah yang saya masukkan ke Google AI Studio begini:
"Saya ingin membuat ulang website https://cctvprabumulih.com/ dengan desain yang lebih modern, responsif. Pertahankan color identity dari website #00ab14, pertahankan juga halaman-halaman website sebelumnya:
https://cctvprabumulih.com/
https://cctvprabumulih.com/tentang-kami/
https://cctvprabumulih.com/layanan-cctv-prabumulih/
https://cctvprabumulih.com/aksesoris-cctv/
https://cctvprabumulih.com/paket-cctv-prabumulih/
https://cctvprabumulih.com/promo/
jangan lupa untuk membuat komponen header, footer dan CTA yang responsif agar memudahkan pelanggan menghubungi admin melalui WhatsApp secara langsung.
rencananya kedepannya saya ingin mengembangkan website ini sehingga ada blog untuk memberikan tips keamanan serta optimasi SEO yang lebih maksimal bagi website. untuk pengembangan nantinya saya akan menggunakan Astro JS, tailwind css, untuk SEO gunakan schema pada website ini, serta anda juga harus memperkaya website dengan konten-konten untuk menunjang SEO, website ini saya lihat tidak teroptimal dengan baik secara SEO terutama karna minimnya konten atau kata didalam halaman-halaman website untuk menampung keyword. jangan abaikan gambar yang sudah ada, manfaat kan gambar ini dalam mendesain ulang website."
Awalnya saya penasaran, teknologi apa yang akan digunakan AI ini. Ternyata, AI ini memilih React! Tapi, tenang saja, tujuan akhirnya adalah untuk membangun website yang bisa di-build menjadi static site.
Proses Migrasi: "Download, Edit, Build"
Setelah AI selesai menghasilkan kode, saya langsung mengunduh file-file tersebut ke laptop. Lalu, saya melakukan beberapa penyesuaian kecil. Beberapa hal yang saya ubah antara lain:
- Mengganti ikon untuk header.
- Mengubah favicon.
- Memberikan efek hover pada bagian cardview (bagian yang menampilkan daftar produk atau layanan).
Perubahan-perubahan ini cukup sederhana, tapi cukup untuk memberikan sentuhan personal pada website. Setelah selesai mengedit, saya menjalankan perintah npm run build.
Hasilnya? Mengejutkan!
Setelah proses build selesai, saya mengunggah website yang baru ke server. Dan hasilnya... luar biasa!
Ukuran total website yang tadinya sekitar 100 MB ke atas, sekarang hanya 2 MB! Ini adalah penurunan ukuran yang signifikan. Selain itu, website juga terasa jauh lebih cepat dimuat.
Kesimpulan dan Langkah Selanjutnya
Eksperimen ini benar-benar membuka mata saya. Memindahkan website WordPress ke static site dengan bantuan AI ternyata sangat mungkin dilakukan. Selain lebih cepat dan aman, website juga menjadi lebih ringan.
Tentu saja, ini bukan akhir dari perjalanan. Rencana selanjutnya adalah mengembangkan website ini lebih jauh dengan menambahkan blog untuk memberikan tips keamanan dan optimasi SEO. Saya berencana untuk menggunakan Astro JS dan Tailwind CSS untuk proyek ini. Selain itu, saya juga akan memanfaatkan schema markup untuk meningkatkan visibilitas website di mesin pencari.
Saya juga akan terus memperkaya konten website dengan kata kunci yang relevan untuk meningkatkan performa SEO. Karena, seperti yang saya sampaikan sebelumnya, SEO itu penting.
Jadi, itulah cerita saya tentang bagaimana saya mencoba memindahkan website WordPress ke static site dengan bantuan Google AI Studio. Semoga cerita ini bisa menginspirasi Anda untuk mencoba hal-hal baru dan menyederhanakan pekerjaan Anda.
Tambahan:
- Saya akan terus memantau performa website dan melakukan optimasi lebih lanjut.
- Saya terbuka untuk menerima masukan dan saran dari Anda.
- Jika Anda tertarik untuk mencoba hal serupa, jangan ragu untuk bertanya di kolom komentar.
Terima kasih sudah membaca! Sampai jumpa di postingan berikutnya.
