Apa itu Gatsby? Apakah Ini Pesaing WordPress?

Apa itu Gatsby?


Dengan begitu banyak pilihan untuk membuat situs web atau blog pada tahun 2020 di luar sana, ada hal baru yang disebut Gatsby – pemain termuda dalam game yang mungkin hanya menjadi alternatif yang layak untuk jalur klasik WordPress, Joomla dan yang lainnya. Atau itu? Apa itu Gatsby? Seberapa mudah mengatur dan menyebarkan situs di Gatsby? Bagaimana Gatsby dibandingkan dengan WordPress? Itu banyak pertanyaan untuk dijawab.

Ini adalah panduan langkah demi langkah untuk memulai dengan Gatsby plus bagaimana perbandingannya dengan WordPress. Pada akhir posting ini, Anda harus dapat menjawab apakah Gatsby sesuai dengan kebutuhan situs web Anda.

Apa itu Gatsby??

Gatby

Jawaban paling sederhana untuk "apa itu Gatsby" pertanyaannya adalah ini: Gatsby (alias. GatsbyJS) adalah generator situs statis yang dibangun di atas ReactJS.

Dalam definisi yang paling sederhana, situs web statis adalah sekelompok halaman HTML, yang tidak menarik data apa pun dari basis data ketika pengunjung melihatnya. Dengan demikian, situs statis terlihat sama untuk setiap pengunjung. Situs statis juga lebih cepat dimuat, karena server mengirimkan respons yang sama kepada setiap pengunjung. Namun, Anda tidak dapat menyesuaikan konten untuk pengunjung.

Di sisi lain, situs web yang dihosting dengan WordPress adalah dinamis, artinya konten yang ditampilkan bergantung pada pengunjung. Server menganalisis setiap permintaan dan memutuskan bagaimana merespons.

�� Gagasan tentang a "situs web WordPress statis" adalah sesuatu yang kami jelajahi di salah satu pos sebelumnya di blog ini – alias. WordPress tanpa kepala. Gatsby adalah teknologi lain yang memungkinkan WordPress statis atau alternatif statis untuk WordPress.

Memulai dengan Gatsby

Oke, sekarang kita tahu apa itu Gatsby, mari kita belajar cara terbaik untuk memulainya:

Gatsby dibangun dengan React, jadi beberapa pengetahuan tentang JavaScript dan kerangka kerjanya diperlukan sebelum Anda benar-benar berhasil. Berikut ini adalah tutorial tentang JavaScript untuk pengembang WordPress.

Sebelum Anda membuat versi pengembangan situs Anda di Gatsby, Langkah pertama adalah menyiapkan sistem Anda untuk menginstal Gatsby. Karena Gatsby dibangun dengan React, manajemen paket dilakukan melalui npm, yang merupakan bagian dari setiap instalasi NodeJS.

Jika mesin pengembangan Anda berjalan pada Windows atau MacOS, Anda bisa menggunakan salah satunya installer di halaman unduhan NodeJS. Di lingkungan Linux, Anda dapat menggunakan penginstal paket seperti yum atau apt untuk menginstalnya.

sudo apt pembaruan
sudo apt install nodejs npm

Selain itu, Gatsby mengharuskan Anda menginstal Git, alat kontrol versi, sebagai prasyarat untuk membuat situs web pengembangan. Kepala ke unduh halaman git untuk mendapatkan installer. Perhatikan bahwa jika Anda sudah menggunakan agen GUI untuk Git, seperti GitHub Desktop atau SourceTree, Anda mungkin masih perlu menginstal Git secara terpisah untuk menggunakannya sebagai perintah pada terminal..

Dengan persyaratan yang terinstal, Anda akhirnya siap untuk menginstal Gatsby! Ini dia panduan memulai cepat dari dokumentasi Gatsby.

Buka prompt perintah NodeJS yang datang sebagai bagian dari aplikasi di Windows, yang dapat Anda jalankan dari menu mulai. Dalam sistem berbasis Unix seperti Linux atau MacOS, Anda dapat mengetik perintah nodejs di terminal untuk memulai prompt perintah NodeJS. Untuk menginstal GatsbyJS, gunakan penginstal npm. Opsi -g membuat paket tersedia untuk semua pengguna di sistem Anda.

npm instal -g gatsby-cli

Pemasang menangani semua dependensi untuk paket. Setelah instalasi berhasil, Anda siap membuat situs GatsbyJS pertama Anda.

Buat situs Gatsby pertama Anda

Untuk membuat situs Gatsby, Anda harus menjalankan perintah berikut di command prompt NodeJS.

gatsby situs baru saya

Ini adalah langkah yang membutuhkan Git. Saat Anda membuat instance Gatsby baru, itu akan mengkloning data tema starter default Gatsby, dan menyimpannya di direktori situs saya. Kami akan membahas tema pemula Gatsby di bagian selanjutnya.

Untuk melihat pratinjau versi pengembangan situs web, ubah direktori aktif ke direktori situs saya yang baru dibuat dan jalankan server pengembangan.

cd situs saya
gatsby berkembang

Ketika Anda mendapatkan pesan sukses, buka http: // localhost: 8000 untuk memeriksa versi situs web Anda saat ini. Kemungkinan besar akan terlihat seperti ini:

Situs pertama

Sebelum kami membuat perubahan apa pun pada konten, mari kita pergi melalui proses pembuatan build produksi untuk situs web. Untuk memulai pembuatan halaman statis untuk situs web Anda, gunakan perintah berikut:

membangun gatsby

Anda akan melihat bahwa file statis dibuat di direktori publik di dalam situs saya. Untuk memulai server HTML lokal untuk menampilkan situs web Anda dalam bentuk statis, siap produksi, Anda perlu menggunakan perintah berikut. Perhatikan bahwa Anda perlu menggunakan perintah build sebelum menjalankan servis.

melayani gatsby

Seperti yang ditunjukkan dalam pesan sukses, Anda dapat menuju ke http: // localhost: 9000 untuk memeriksa versi statis situs web Anda yang baru dibuat.

Permulaan dan tema Gatsby

Ketika Anda menginstal situs Gatsby kosong Anda, itu mengkloning templat starter default dari GitHub. Pemula adalah situs Gatsby yang berfungsi penuh yang dapat dikloning dan digunakan kembali melalui Gatsby CLI. Anda bisa memikirkan pemula seperti templat awal untuk membangun situs web Anda. Komunitas GatsbyJS telah membangun banyak permulaan dengan mengingat berbagai kebutuhan seperti blogging, e-commerce, dan dokumentasi.

Gatsby mempertahankan perpustakaan pemula untuk mendokumentasikan semua permulaan yang dapat digunakan seseorang. Pada April 2019, ada pilihan lebih dari 150 pemula!

pemula gatsby

Sementara permulaan menyediakan platform yang hebat bagi pengguna untuk membangun situs web dalam waktu singkat, mereka tidak benar-benar ide bagus dalam skenario pengembangan yang lebih serius. Alasan utama untuk ini adalah ketidakmampuan memperbarui permulaan dari waktu ke waktu.

Pada akhir 2018, Gatsby memperkenalkan konsep tema. Itu memungkinkan penggunaan file gatsby-config.js untuk membuat tema yang dapat digunakan kembali. Ini adalah perubahan besar dalam apa yang Gatsby dan apa yang mampu dilakukannya, terutama bila dibandingkan dengan WordPress.

Ada komunitas pengembang untuk tema Gatsby, bagaimanapun, banyak yang perlu dilakukan untuk mendapatkan tema yang siap produksi – sesuatu yang sama sekali tidak masalah dengan WordPress.

Bermigrasi ke Gatsby

Cara termudah untuk menelan posting ke Gastby adalah melalui Markdown. Terlepas dari blog yang Anda miliki, Anda perlu mengekspor hasil Anda ke format Penurunan harga untuk kemudian memigrasi semuanya ke Gatsby.

Karena itu, sebagian besar platform situs web, termasuk WordPress tidak menawarkan ekspor Markdown, jadi Anda harus mengekspor konten Anda ke HTML atau XML terlebih dahulu, dan baru kemudian mengonversi semuanya menjadi Markdown. Setelah halaman Penurunan harga Anda siap, di sini panduan untuk menambahkan daftar posting penurunan harga untuk Gatsby.

Jika Anda memiliki WordPress dan Gatsby terinstal di mesin pengembangan Anda, Anda mungkin ingin menjelajahi paket gatsby-wordpress-migrate pada npm. Halaman paket berisi instruksi tentang cara bermigrasi dari WordPress.

Selain itu, migrasi dari versi WordPress terbaru mungkin lebih mudah dengan bantuan WordPress REST API. Berikut adalah panduan langkah demi langkah cara menggunakan GraphQL dan WordPress Rest API untuk mendapatkan posting dari blog WordPress Anda untuk Gatsby.

Pro dan kontra Gatsby

Ada beberapa keuntungan menggunakan Gatsby, yang mungkin menarik bagi pengguna potensial. Situs yang dibangun dengan Gatsby pada dasarnya adalah aplikasi satu halaman. Ini berarti bahwa mengklik tautan internal tidak menciptakan kebutuhan untuk memuat sumber daya yang sama sekali baru, yang pada gilirannya menyimpan banyak permintaan HTTP. Di WordPress, Anda harus mengikuti praktik terbaik tertentu untuk memastikan situs Anda dioptimalkan untuk kecepatan, atau bahwa gambar Anda juga dioptimalkan.

Di Gatsby, misalnya, pengoptimalan gambar otomatis. Sebagai permulaan, Gatsby menghapus semua metadata dari gambar, mengubah ukuran dan mengompresnya, dan juga menerapkan pemuatan malas! Di WordPress, kami sarankan menggunakan layanan seperti Optimole untuk optimasi gambar.

Selanjutnya, Gatsby juga melakukan tugas-tugas lain seperti bundling dan minifikasi sumber daya di situs web Anda sebelum menyajikannya. Akhirnya, karena situs web bersifat statis, pembaruan apa pun akan tercermin dalam versi produksi segera setelah desakan tiba.

Secara keseluruhan, situs statis juga lebih aman karena pada dasarnya tidak ada tempat yang dapat ditembus peretas – selain dari membobol server itu sendiri. Dengan WordPress, semua orang mendapatkan akses ke file PHP mentah yang pada dasarnya rentan terhadap berbagai serangan. Dengan banyak situs WordPress yang menggunakan lebih dari 20 plugin pada saat yang bersamaan, ada kemungkinan masuk akal bahwa salah satu dari plugin tersebut akan dieksploitasi dan digunakan sebagai gerbang untuk masuk ke situs Anda. Seperti yang terjadi belum lama ini dengan plugin P3.

Gatsby vs WordPress

Pada titik ini, kita semua dapat memahami perbedaan inti antara Gatsby dan WordPress – satu menjadi generator situs web statis dan lainnya menjadi mesin situs web dinamis penuh dan CMS, tapi mari kita lihat lebih dalam aspek masing-masing:

Kemudahan membuat situs baru dengan Gatsby vs WordPress

Dibandingkan dengan WordPress, saya akan mengatakan bahwa menginstal Gatsby membutuhkan tingkat keterampilan yang sama. Di WordPress, Anda memerlukan server web (Apache), PHP, dan database yang diinstal sebelum Anda dapat menginstal WordPress.

Ini berlaku terutama jika kami sedang mendiskusikan pemasangan WordPress untuk tujuan pengembangan – artinya Anda kemungkinan besar harus melakukannya instal WordPress dengan tangan, dan tidak memanfaatkan instalasi WordPress siap pakai dari host web Anda.

Kemudahan membuat situs kosong dengan Gatsby vs WordPress

Dalam hal apa Gatsby, dibandingkan dengan WordPress, membuat situs kosong dengan Gatsby sedikit lebih sulit, karena melibatkan penggunaan terminal.

Di WordPress, Anda memiliki wizard penginstalan yang bagus yang membuat Anda melalui langkah-langkah dengan baik, dan satu-satunya hal yang harus Anda lakukan dengan tangan adalah menyiapkan database.

Bagaimana perbandingan tema Gatsby dengan WordPress ’?

Mengingat kematangan proyek WordPress, ada banyak koleksi tema WordPress untuk dipilih. Jika Anda beralih ke Gatsby, opsi Anda sangat terbatas, kecuali jika Anda ingin mengembangkan tema dari awal.

Belum lagi, menginstal dan mengganti tema di WordPress sangat sederhana, dan menyesuaikannya juga tidak terlalu sulit, bahkan jika Anda sama sekali tidak memiliki pengetahuan pemrograman.

Secara keseluruhan, di departemen tema, ini adalah kontes tanpa. WordPress mendominasi.

Kesimpulan

Oke, saya harap Anda menemukan jawaban Anda untuk "apa itu Gatsby?" pertanyaan di sini. Secara keseluruhan, Gatsby menghadirkan alternatif yang sangat menarik bagi orang yang bosan dengan WordPress atau hanya ingin menguji apa lagi yang ada di luar sana.

Sementara WordPress adalah pemenang yang jelas dalam hal popularitas, komunitas, kemudahan penggunaan dan fungsionalitas keseluruhan dari seluruh platform, Gatsby dalam bentuk aslinya menyediakan beberapa fitur unggulan juga..

Proyek ini masih sangat muda dan menambahkan fitur baru secara teratur. Namun, untuk dapat sepenuhnya menggunakan barang di Gatsby, kita harus merasa nyaman dengan JavaScript dan React, yang mungkin menjadi penghalang terbesar bagi adopsi Gatsby oleh komunitas yang lebih besar.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map