Tutorial: Bangun Situs Anda Dengan WordPress dan Gatsby

Membuat situs web statis dengan WordPress dimungkinkan dengan WordPress tanpa kepala. Jenis situs web ini memuat lebih cepat, karena file statis disimpan di server Anda. Pertanyaannya adalah, bagaimana Anda membangun situs web tanpa kepala dengan WordPress?

Di sinilah generator situs statis seperti Gatsby masuk. Generator ini membantu Anda membangun situs web statis kaya fitur di WordPress. Namun, Anda perlu mengintegrasikannya dengan benar dengan instalasi WordPress Anda untuk mendapatkan hasil maksimal darinya. Integrasi ini mencakup penginstalan, pembuatan, dan konfigurasi WordPress Gatsby.

Pada artikel ini, kita akan melihat apa itu Gatsby dan mengapa Anda mungkin ingin menggunakannya dengan WordPress. Kami kemudian akan merinci cara menggunakan Gatsby dan apakah Anda harus melakukannya. Mari kita mulai!

Apa itu Gatsby?

Sederhananya, Gatsby adalah generator situs statis. Ini berarti Gatsby menghasilkan file HTML statis yang diunggah ke server situs web Anda. Saat pengunjung membuka situs Anda, file statis ini disajikan ke browser mereka, bukan konten dinamis yang biasanya ditawarkan WordPress.

Untuk menghasilkan file ini, Gatsby mengambil data untuk situs web Anda dari berbagai sumber. Ini termasuk situs web yang ada, panggilan API, dan file datar melalui GraphQL. Situs web statis Anda kemudian dibangun berdasarkan konfigurasi yang telah Anda tetapkan.

Dibandingkan dengan generator situs statis lainnya, Gatsby relatif baru. Namun, ini tidak menghentikan banyak perusahaan untuk mencobanya. Salah satu contoh terbesar adalah blog Airbnb Engineering & Data Science, yang didukung oleh Gatsby.

Mengapa Menggunakan Gatsby Dengan WordPress?

Karena memungkinkan untuk membuat situs web statis dengan WordPress, Anda mungkin bertanya-tanya mengapa Anda harus menggunakan WordPress dan Gatsby secara bersamaan. Meskipun WordPress sendiri kuat, Gatsby menawarkan beberapa manfaat yang mungkin Anda inginkan untuk situs web Anda, termasuk kecepatan yang lebih cepat dan biaya server yang lebih rendah. Memahami kelebihan dan kekurangan Gatsby dapat membantu Anda membuat keputusan.

Pro Menggunakan Gatsby

Gatsby menawarkan berbagai manfaat yang dapat dimanfaatkan oleh situs web mana pun, termasuk:

• Kecepatan pemuatan lebih cepat. Situs web statis memuat lebih cepat daripada yang dinamis, dan ini dapat memengaruhi Pengoptimalan Mesin Telusur (SEO) Anda. Kecepatan memuat halaman adalah sinyal yang digunakan oleh mesin telusur, dan memengaruhi rasio pentalan situs web Anda.
• Mengurangi biaya server. Situs web dinamis memerlukan tumpukan teknologi dan server yang kompatibel. Situs web statis tidak, dan Anda dapat menghostingnya di server mana pun. Ini dapat mengurangi biaya server Anda.
• Keamanan yang ditingkatkan. Situs web statis memberikan peningkatan keamanan. File HTML statis yang disajikan tidak menawarkan banyak hal untuk dikerjakan oleh peretas. Jika file-file ini hilang karena alasan apa pun, Anda juga dapat membuatnya kembali dengan Gatsby.

Situs web Anda bisa mendapatkan keuntungan dari semua keuntungan ini. Namun, Anda harus mempertimbangkannya dengan kerugian menggunakan Gatsby.

Kontra Menggunakan Gatsby

Tidak ada sistem perangkat lunak yang sempurna, dan Gatsby memang memiliki beberapa kekurangan yang perlu Anda ketahui:

• Diperlukan pengetahuan teknis. Gatsby dibangun di atas ReactJS dan menggunakan GraphQL. Untuk menggunakannya, diperlukan beberapa pemahaman tentang JavaScript. Anda juga harus memiliki pengetahuan dasar tentang GraphQL untuk membuat situs web.
• Tidak ada konten dinamis. Gatsby hanya menghasilkan situs web statis. Jika Anda menginginkan konten dinamis seperti formulir kontak, konten tersebut harus dialihkan melalui penyedia pihak ketiga.

Sementara banyak pengembang menemukan bahwa kelebihan Gatsby lebih besar daripada kekurangannya, keduanya penting untuk dipahami terlebih dahulu.

Bagaimana Saya Menggunakan Gatsby dengan WordPress?

Menyiapkan Gatsby dapat memakan waktu lama, dan ada langkah-langkah tertentu yang perlu Anda ambil. Anda perlu menginstal Gatsby sebelum Anda dapat mulai membuat situs dan mengonfigurasinya. Selain itu, ada beberapa pertimbangan awal yang harus dilakukan.

Langkah 1: Periksa Prasyarat

Sebelum Anda dapat menginstal Gatsby, Anda perlu menginstal NodeJS dan npm di lingkungan situs web Anda. Git juga diperlukan untuk manajemen kode. Langkah-langkah untuk menginstal prasyarat berbeda-beda, bergantung pada sistem operasi yang Anda jalankan.

Jika Anda memiliki Windows, Anda dapat menginstal NodeJS dan Git melalui penginstal di halaman unduhan. Hal yang sama dimungkinkan dengan Mac. Namun, jika Anda menjalankan Linux, diperlukan penginstal paket seperti apt.

Langkah 2: Instal Gatsby

Setelah menginstal NodeJS dan Git, Anda dapat mulai menginstal Gatsby. Metode termudah untuk melakukannya adalah dengan menggunakan perintah berikut di terminal perangkat lunak Anda:

 npm install -g gatsby-cli

Perintah ini menjalankan penginstal secara otomatis. Ini pertama-tama akan mengunduh dan menginstal semua dependensi sebelum menginstal Gatsby. Setelah selesai, Anda dapat mulai membuat situs web Gatsby pertama Anda.

Langkah 3: Buat Situs Gatsby

Untuk membuat situs web Gatsby Anda, Anda harus menjalankan perintah berikut:

 gatsby new gatsby-site

Perintah ini mengkloning template starter Gatsby, dan menempatkannya di direktori /gatsby-wordpress . Setelah kloning dan instalasi selesai, Anda dapat membuka versi pengembangan situs. Ini dilakukan dengan menggunakan perintah berikut:

 gatsby develop

Saat lingkungan pengembangan sedang berjalan, Anda dapat mengunjungi situs web baru Anda secara lokal. Di browser web Anda, masukkan http://localhost:8000 dan template default Anda akan terbuka.

Jika Anda melihat halaman ini, Anda dapat mulai membangun situs web Anda. Ini berarti membuat file statis di direktori publik situs web tersebut. Perintah berikut secara otomatis memulai produksi file statis tohse:

 gatsby build

Perintah ini juga menghasilkan bundel kode JavaScript pra-rute untuk situs web Anda. Anda kemudian dapat menggunakan perintah servis untuk menampilkan situs web baru Anda secara lokal:

 gatsby serve

Perintah ini hanya akan berfungsi jika Anda sudah menjalankan perintah build.

Langkah 4: Hubungkan Gatsby ke WordPress

Anda sekarang memiliki situs web statis dasar, tetapi Anda perlu mengintegrasikannya dengan WordPress. Ini mengarahkan situs Gatsby Anda ke alamat blog WordPress Anda, memungkinkannya menarik data terbaru saat Anda menjalankan server pengembangan. Setelah terhubung, Gatsby akan membuat situs web statis berdasarkan template WordPress Anda saat ini.

Untuk menghubungkan keduanya, Anda harus menginstal plugin Gatsby untuk WordPress. Perintah berikut akan menanganinya:

 npm install gatsby-source-wordpress

Setelah menginstal plugin, Anda dapat mulai mengonfigurasi Gatsby.

Langkah 5: Konfigurasikan Gatsby

Untuk mengonfigurasi Gatsby, Anda harus bekerja dengan file gatsby-config.js . Di file tersebut, tambahkan kode berikut:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Perbarui kode ini untuk mengarah ke situs web WordPress Anda. Jika situs web Anda dihosting secara lokal, setelah baseUrl Anda dapat menggunakan localhost:8888/wordpress alih-alih URL situs web Anda. Setelah menyimpan file, Anda harus membuat template halaman Anda.

Langkah 6: Buat Templat Halaman

Membangun templat halaman memungkinkan Gatsby membuat postingan untuk setiap halaman di situs web WordPress Anda. Plugin sumber akan menarik data yang Anda butuhkan dari WordPress untuk halaman ini, tetapi Anda harus membuat template desain.

Di file gatsby-node.js Anda, tambahkan kode berikut:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

Setelah memanggil semua data dari WordPress, Gatsby akan membuat halaman untuk setiap posting. Dengan menggunakan perintah develop, Anda dapat menavigasi ke setiap halaman baru menggunakan URL yang dihasilkan.

Haruskah Saya Menggunakan Gatsby untuk WordPress?

Meskipun Gatsby dapat meningkatkan kecepatan dan keamanan situs web Anda, ini bukanlah pilihan yang tepat untuk semua orang. Jika website Anda memiliki konten statis yang tidak sering berubah, Gatsby dapat bermanfaat. Namun, jika Anda memerlukan konten dinamis di situs web Anda, WordPress tradisional mungkin merupakan pilihan yang lebih baik.

Lakukan Maksimal Dengan Situs Anda di WP Engine

Gatsby adalah generator situs web statis efektif yang dapat Anda integrasikan dengan mudah dengan WordPress. Ada langkah-langkah yang perlu Anda ikuti untuk menginstal dan mengkonfigurasi sistem. Anda juga perlu memiliki pengetahuan tentang Gatsby dan GraphQL sebelum memulai.

Konten statis dapat meningkatkan kecepatan dan keamanan situs web Anda, tetapi Anda juga memerlukan host yang tepat. WP Engine menawarkan sumber daya terbaik untuk situs web Anda untuk menciptakan pengalaman digital yang luar biasa. Ini memberi Anda lebih banyak waktu untuk fokus pada pengembangan!