Panduan untuk Generator Situs Statis Menggunakan Hexo dan WordPress

Generator situs statis adalah sistem yang mengkompilasi template menjadi halaman HTML statis. Jika itu terdengar efisien—ya, memang begitu. Tidak ada pemrosesan atau rendering server, sehingga situs web statis cenderung sangat cepat dan ringan, menghemat waktu dan bandwidth Anda dan pengguna Anda yang berharga. Peningkatan efisiensi ini tercermin dalam biaya yang lebih rendah dan, berpotensi, pendapatan yang lebih tinggi.

Dari Mengoptimalkan WordPress hingga Menjadi Statis

Berbicara tentang penghasil pendapatan yang efisien, WordPress muncul di benak Anda. Ini mendukung 28 persen internet dan merupakan platform ampuh dengan banyak fitur hebat, termasuk pengguna ekstensif dan manajemen konten yang didukung oleh berbagai plugin, tema, API, dll.

Bahkan pemain besar di industri kami menggunakan WordPress. Situs web seperti Smashing Magazine dan CSS-Tricks menggunakan WordPress, meskipun secara signifikan disesuaikan dalam kedua kasus tersebut. Namun, bekerja dengan WordPress bisa menjadi tugas yang membosankan, terutama saat menyesuaikan dan mengoptimalkan kinerja.

Saya memulai blog kecil pada tahun 2015. Naluri pertama saya adalah menggunakan WordPress. Itu memberi saya lompatan, karena saya sudah bekerja dengan WordPress. Saya membuat tetesan baru di DigitalOcean sebagai server, menetapkan Vesta sebagai Panel Kontrol Hosting, dan menginstal WordPress sebagai platform blog. Pada akhirnya, saya merancang dan mengembangkan tema WordPress baru. Satu-satunya hal yang hilang adalah isinya.

Saya tahu saya ingin berbagi beberapa tip tentang Atom, karena saya menggunakan editor hebat ini pada waktu itu. Saya menerbitkan beberapa artikel tentang itu dan membagikannya dengan komunitas.

Pada awalnya, saya tidak terlalu memperhatikan kinerja karena saya terlalu fokus pada konten. Setelah beberapa saat, saya melihat beberapa masalah kinerja. Skor di Google PageSpeed ​​Insights buruk, jadi saya bekerja keras untuk memperbaiki dan mengoptimalkan situs web saya, mencapai skor hampir sempurna 99/100:

• Saya beralih dari Nginx+Apache ke Nginx+PHP-FPM.

• Saya menggunakan CloudFlare untuk kecepatan dan perlindungan.

• Saya menggunakan Cloudinary untuk meng-host gambar.

• Saya mengubah tema saya dan menggunakan CSS Kritis.

Satu-satunya peringatan adalah untuk masalah caching Google Analytics yang saya tidak tahu bagaimana cara memperbaikinya saat itu.

Tetapi bagaimana jika 99/100 atau 100/100 masih belum memberikan kinerja yang Anda inginkan? Di situlah generator halaman statis memasuki keributan.

Masukkan Generator Halaman Statis dan Hexo

Jadi apa itu generator situs statis?

Sesuai dengan namanya, static website generator adalah sistem yang menghasilkan file HTML statis. Melayani file HTML statis jauh lebih cepat daripada membuat halaman dengan cepat. Tidak ada rendering atau kompilasi server, yang sering menyebabkan penundaan pemuatan halaman.

Ketika berbicara tentang kinerja, seseorang harus berpikir tentang caching. Meskipun ada beberapa teknik untuk caching WordPress, ini biasanya bukan tugas yang mudah, tidak seperti caching file statis. Melayani file yang di-cache lebih berkinerja daripada melayani file yang sebenarnya dari server dan dapat menghemat waktu saat memuat situs web.

Pada bulan Juni tahun ini, Vitaly Friedman dari Smashing Magazine memperkenalkan JAMstack di sebuah lokakarya di kota saya. Saya belum pernah mendengarnya, dan saya sangat tertarik. Setelah seminar selesai, saya mempelajari konsep baru ini sebentar, dan saya menyadari betapa hebatnya itu. Saya menyadari bahwa situs web saya tidak memerlukan WordPress.

Langkah pertama adalah memutuskan generator halaman statis mana yang akan digunakan. Saya tidak menyadari ada berapa banyak. Saya memutuskan untuk mencoba kerangka kerja blog Hexo. Ini dapat diterapkan ke Netlify, memiliki plugin untuk bermigrasi dari WordPress, dan menggunakan Node.js, yang saya kenal, tidak seperti Jekyll dan Hugo, yang masing-masing didasarkan pada Ruby dan Go. Dan, seperti yang saya temukan kemudian, itu sangat cepat.

Migrasi WordPress ke Hexo

Instalasi Hexo sesederhana mungkin. Instal hexo-cli secara global menggunakan npm, jalankan perintah hexo init , instal dependensi npm, dan voila:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Untuk melakukan migrasi, instal plugin hexo-migrator-wordpress. Plugin ini mengharapkan file XML sebagai sumber. File XML dapat diekspor melalui alat ekspor WordPress, yang dapat ditemukan di panel administrasi di bawah Alat -> Ekspor -> Wordpress . Terakhir, ketik perintah migrasi hexo untuk menyelesaikan impor.

 hexo migrate wordpress <source>

Satu-satunya hal yang tersisa untuk dilakukan adalah memeriksa hasilnya. Jalankan perintah server hexo untuk memulai server dan membuka browser di alamat yang diberikan.

 hexo server

Penurunan harga dan Keterbatasannya

Hexo mendukung penurunan harga di luar kotak. Markdown adalah bahasa markup yang banyak digunakan untuk memformat file README, komentar, dan postingan. Tapi itu bisa digunakan untuk menulis artikel Anda juga. Sintaksnya intuitif dan mudah dipelajari.

Keuntungan lain dari Markdown adalah menghasilkan HTML yang bersih dan valid. Itu memungkinkan pengembang untuk membuat aturan CSS yang bersih dan dapat dipelihara untuk menata artikel dan halaman blog.

Kehidupan pengembang tidak pernah mudah. Kita sering mengalami masalah yang dapat menyebabkan kita menghabiskan waktu untuk hal-hal yang tidak terduga. Jika kita belajar sesuatu sepanjang jalan, maka kita tidak menyia-nyiakan waktu ini, dan itu adalah hal yang baik. Hal yang sama terjadi pada saya. Saya pikir semuanya berjalan dengan baik karena tidak ada kesalahan kompilasi, tetapi kemudian saya perhatikan bahwa beberapa hal tidak berjalan seperti yang diharapkan.

Misalnya, demo Codepen tidak dimuat. Saya mencari plugin Hexo, dan menemukannya. Sayangnya, plugin ini tidak resmi, dan menghasilkan kesalahan HTML yang tidak dapat diterima. Saya ingin berkontribusi dan memperbaiki masalah, tetapi permintaan penarikan terbaru tidak terselesaikan selama lebih dari satu setengah tahun. Saya memutuskan akan lebih mudah untuk mem-fork repositori, memperbaiki masalah, dan menerbitkan plugin di halaman Hexo sehingga siapa pun dapat menggunakannya. Plugin diterima, saya memperbarui konten, dan demo Codepen bekerja dengan sangat baik.

Masalah serupa terjadi dengan penyematan CanIUse. Sekarang saya tahu cara membuat plugin Hexo, tidak ada alasan untuk tidak melakukannya. Plugin hexo-caniuse saya juga diterbitkan, seperti juga plugin hexo-cloudinary saya untuk gambar responsif yang dimuat dari Cloudinary CDN.

Desain ulang dan Optimasi

Desain situs web agak mendasar. Hexo menawarkan beberapa tema gratis di situs resminya, tetapi saya menginginkan tema yang unik untuk situs Hexo saya. Setelah saya membaca dokumentasi dan mempelajari cara menyesuaikan Hexo, saya mulai mengembangkan tema asli dari awal.

Untuk membuat template baru, saya memutuskan untuk menggunakan EJS untuk template. Karena tidak pernah bekerja dengan EJS, saya melihatnya sebagai kesempatan untuk mempelajari sintaks template baru. Jika Anda tidak menyukai EJS, Hexo memberi Anda dukungan Swag, Haml, atau pug melalui plugin.

Selama proses desain ulang, saya sangat memperhatikan kinerja. Dengan mengikuti praktik terbaik, kami dapat lebih mempercepat situs web statis kami. Menempatkan file JavaScript di bagian bawah dokumen dan menggunakan teknik CSS Kritis menciptakan pengalaman terbaik bagi audiens Anda.

Optimasi SEO sangat penting untuk visibilitas blog di mesin pencari seperti Google. Hexo memiliki pembantu built-in untuk memasukkan data Open Graph. Hexo menggunakan file YAML untuk menyimpan konfigurasi situs dan tema. Saya menggunakan file konfigurasi tema untuk mengonfigurasi nama situs, deskripsi, dan berbagai ID sosial.

Menambahkan Gulp atau Webpack ke proses pembuatan Anda selalu membantu dan direkomendasikan. Saya menggunakan Gulp untuk mengecilkan dan mengompresi file CSS dan JavaScript, dan semuanya sudah siap. Aku bisa menyebarkannya.

Netlify

Netlify adalah platform yang menyediakan hosting untuk situs web dan aplikasi dengan kinerja yang sangat cepat. Ini memasarkan dirinya sebagai platform terpadu yang mengotomatiskan kode untuk membuat situs web yang berkinerja dan mudah dirawat.

Cukup tekan kode Anda dan biarkan kami yang mengurus sisanya.

Seperti yang Anda harapkan, mengonfigurasi situs web sangatlah mudah:

1. Siapkan domainnya.

2. Ubah catatan DNS.

3. Siapkan build dan penerapan.

4. Aktifkan SSL.

Ketika semuanya sudah diatur, saya menjalankan beberapa tes dasar untuk melihat skor, termasuk Tes Kecepatan Situs Web Pingdom, Tes Halaman Web, dan Testmysite.io. Hasilnya luar biasa, karena situs mendapat skor tertinggi pada setiap alat.

CloudFlare

Terlepas dari skor yang sangat baik, saya ingin mencoba CloudFlare, hanya untuk melihat seberapa banyak itu akan mempercepat situs web juga. CloudFlare bisa menjadi luar biasa pada awalnya, tetapi mempelajari cara menggunakannya adalah hal yang mendasar. Setelah saya mengonfigurasi CloudFlare, saya menjalankan ulang tes dan hasilnya bahkan lebih baik.

Tes terakhir adalah Google PageSpeed ​​Insights. Skornya hampir 100% baik untuk versi seluler maupun desktop. Masalahnya adalah cache browser Google Analytics. Saya berhasil memperbaiki masalah dengan menggunakan Aplikasi CloudFlare untuk Google Analytics.

Harganya berapa?

Menggunakan Hexo di Netlify dengan CloudFlare tidak memerlukan biaya apa pun.

Hexo adalah platform sumber terbuka, jadi gratis tidak peduli bagaimana Anda memutuskan untuk menggunakannya. Ini memiliki komunitas besar, dan merupakan generator halaman statis open source ketiga paling populer menurut StaticGen.

Netlify memiliki paket terbuka yang memberi kami opsi hebat untuk hosting kami. Gambar dihosting di paket terbuka Cloudinary juga. Paket gratis CloudFlare memungkinkan kami untuk mengonfigurasi sejumlah besar aturan yang dapat mempercepat situs web Anda yang sudah cepat. Ini juga memungkinkan kami untuk memperbaiki masalah cache browser Google Analytics. Saya juga tidak membayar domain, karena saya menggunakan domain pribadi gratis yang disediakan oleh pemerintah.

Pengaturan proyek ini mengurangi anggaran saya seminimal mungkin. Jika Anda memerlukan fitur yang lebih canggih untuk proyek Anda, generator halaman statis mungkin masih menghemat beberapa dolar.

Melayani file yang di-cache berarti penggunaan CPU dan bandwidth berkurang, yang pada gilirannya berarti Anda dapat menggunakan paket hosting yang lebih murah dengan perangkat keras yang kurang kuat. Tidak hanya itu, website Anda akan jauh lebih cepat, artinya pengguna Anda akan menikmati browsing baik di perangkat mobile maupun desktop. Dan, karena kecepatan memuat halaman dapat memengaruhi peringkat Google Penelusuran, peringkat situs web Anda akan lebih tinggi, mendapatkan lebih banyak pengunjung.

Semua ini berarti Anda dapat membelanjakan sebagian anggaran Anda di tempat lain—misalnya, untuk mempromosikan situs web Anda atau membuat konten tambahan, yang akan membantu memperoleh sedikit lebih banyak pendapatan.

Kasus untuk Generator Situs Statis

Bermigrasi dari WordPress ke generator halaman statis bukanlah tugas yang mudah, dan itu jelas bukan sesuatu yang harus dilakukan oleh setiap pengguna WordPress. Namun, Hexo membuat transisi ini relatif tidak menyakitkan, berkat pluginnya, dokumentasi yang sangat baik, dan API yang sederhana.

Sebelum memutuskan apakah Anda ingin memigrasikan produk Anda ke solusi statis atau tidak, Anda harus mengetahui batasan yang menyertai pembuat halaman statis, seperti pembatasan konten, kurva pembelajaran penurunan harga, dan kontrol versi.

Anda juga harus menyadari bahwa Hexo adalah kerangka kerja blog. Ini sempurna untuk pengembang dan orang-orang teknologi yang tahu cara menggunakan editor teks dan terminal. Jika Anda suka menggunakan antarmuka web untuk mengelola konten Anda, ada plugin yang menyediakan fungsionalitas itu juga. Ini disebut hexo-admin dan cukup populer.

Jika Anda sudah menggunakan WordPress, Anda harus berhenti dan memikirkan fitur WordPress mana yang Anda gunakan saat ini, dan mana yang sangat diperlukan. Apakah Anda memiliki struktur konten yang rumit? Apakah Anda menggunakan manajemen pengguna? Apakah Anda menggunakan banyak plugin pada instance WordPress Anda dan apakah semuanya diperlukan? Apakah Anda puas dengan kinerja situs Anda?

Jika jawaban untuk sebagian besar atau semua pertanyaan ini adalah tidak, maka Anda siap untuk melengkapi situs web Anda dengan generator halaman statis. Bergantung pada kasus penggunaan dan kebutuhan Anda, halaman statis dapat membantu memaksimalkan efisiensi sekaligus meminimalkan biaya. Jika, di sisi lain, Anda menuntut fleksibilitas WordPress, Anda mungkin bahkan tidak mempertimbangkan langkah seperti itu.