Konfigurasikan Gatsby Open Source dengan WordPress Anda untuk membawa pengalaman pengguna yang lebih besar dan kinerja keseluruhan. Mari kita pelajari cara menggunakan generator situs statis ini.

Gatsby WordPress

Ringkasan

GatsbyJS adalah generator situs statis bertenaga graphql yang berbasis reaksi, graphql. Ini menggunakan pra-konfigurasi yang kuat untuk membangun situs web yang hanya menggunakan file statis untuk beban halaman yang sangat cepat. WordPress adalah platform blogging open source yang hebat. Akibatnya, ada banyak orang yang tahu cara mencari tahu apakah situs adalah situs WordPress sehingga mereka dapat meretasnya dan mencuri informasi. Menggunakan Gatsby WordPress bersama -sama akan memberi Anda kekuatan yang sama dari manajemen konten WordPress dan kecepatan Gatsby. Dalam artikel ini, kita akan melihat apa itu Gatsby dan mengapa Anda perlu menggunakannya dengan perangkat lunak CMS. Kemudian, kami akan membahas tentang cara menggunakan WordPress dan Gatsby bersama untuk membangun pengalaman situs web yang luar biasa. Ayo mulai!

Apa itu Gatsby

Gatsby adalah generator situs statis. Ini berarti bahwa Gatsby menghasilkan file HTML statis yang diunggah ke server situs web Anda. Ketika pengunjung mendarat di situs Anda, file statis ini disajikan ke browser mereka, bukan konten dinamis WordPress umumnya melayani. Ini adalah kerangka kerja open source gratis dan berdasarkan React yang membantu pengembang membangun situs web dan aplikasi yang cepat menyala.

Pro dan kontra menggunakan WordPress dan Gatsby

Sesuai [dokumen] resmi Gatsby 5, mereka telah menyusun meja, untuk siapa kombinasi Gatsby WordPress sangat bagus dan tidak. Demi kemudahan, saya mendaftarkannya di sini. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress dan Gatsby bagus untuk {{LINE_27}} {{LINE_28}} {{LINE_29}} Tim konten yang merasa nyaman dengan pengalaman pengeditan konten WordPress {{LINE_31}} {{LINE_32}} Tim pengembangan yang menghargai menggunakan teknologi populer dan open-source {{LINE_34}} {{LINE_35}} Desain ulang situs dengan konten yang sudah disimpan di WordPress {{LINE_37}} {{LINE_38}} Tim yang ingin memiliki data dan tumpukan teknologi mereka {{LINE_40}} {{LINE_41}} Alur kerja kontrol akses kompleks atau pembatasan pemodelan konten {{LINE_43}} {{LINE_44}} Proyek di mana keamanan itu penting {{LINE_46}} {{LINE_47}} Proyek permintaan tinggi di mana kinerja adalah yang terpenting {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress dan Gatsby tidak bagus untuk {{LINE_55}} {{LINE_56}} {{LINE_57}} Tim yang membutuhkan penggunaan tema UI WordPress {{LINE_59}} {{LINE_60}} Mereka yang mencari cloud CMS yang dikelola sepenuhnya {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Selain poin -poin resmi ini, saya ingin mendaftar beberapa pro dan kontra menggunakan Gatsby WordPress bersama {{LINE_67}} {{LINE_68}} {{LINE_69}} Pro {{LINE_71}} {{LINE_72}} {{LINE_73}} Kecepatan beban yang lebih cepat - situs web statis memuat lebih cepat dari dinamis. Akibatnya, itu berdampak pada halaman Anda memuat kecepatan dan peringkat SEO. {{LINE_75}} {{LINE_76}} Kurang Biaya Server - Karena file statis tidak memerlukan perangkat lunak khusus maka halaman HTML statis dapat disajikan dari server yang lebih murah juga. {{LINE_78}} {{LINE_79}} Lebih aman - untuk situs statis, tidak ada komponen yang bergerak dari bagian -bagian itu sehingga tidak ada kesempatan bagi peretas untuk mengeksploitasi perangkat lunak Anda. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Kontra {{LINE_89}} {{LINE_90}} {{LINE_91}} Kurva Pembelajaran - Ini membutuhkan keterampilan tambahan untuk pengembang. Seperti belajar reactjs dan graphql {{LINE_93}} {{LINE_94}} Hanya konten statis - jika Anda perlu melayani konten dinamis. Maka Gatsby bukan untuk Anda. Itu hanya dapat server file statis. Oleh karena itu, Anda tidak dapat memiliki sistem komentar yang mengambil data dari database. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

Cara menggunakan gatsby dengan wordpress

Sebelum Anda dapat menginstal Gatsby, Anda perlu menginstal NodeJs dan NPM di lingkungan situs web Anda.

Langkah 1 - Instal Gatsby

npm install -g gatsby-cli

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

gatsby new gatsby-site

Ini akan mengunduh template starter Gatsby dan menempatkannya di direktori/gatsby-wordpress. Setelah instalasi selesai, Anda dapat membuka versi pengembangan situs

gatsby develop

Sekarang, di browser web Anda, masukkan http: // localhost: 8000 dan template default Anda harus dibuka.

Template Starter Gatsby

Langkah 2 - Hubungkan Gatsby ke WordPress

Di bagian panduan Gatsby WordPress ini, kami akan menghubungkan generator situs statis ini dengan WordPress. Anda memiliki situs web statis dasar, tetapi Anda perlu mengintegrasikannya dengan WordPress. Ini menunjukkan situs Gatsby Anda ke alamat blog WordPress Anda, memungkinkannya untuk menarik data terbaru saat Anda menjalankan server pengembangan. Setelah terhubung, Gatsby akan membangun situs web statis berdasarkan templat Anda saat ini. Instal plugin Gatsby Source WordPress dari repositori NPM.

npm install gatsby-source-wordpress

Langkah 3 - Konfigurasikan Gatsby

Masukkan kode berikut di file gatsby-config.js Anda

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `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 menunjuk ke situs web WordPress Anda. Jika situs web Anda di -host secara lokal, setelah BaseUrl Anda dapat menggunakan Localhost: 8888/WordPress alih -alih URL situs web Anda. Setelah menyimpan file, Anda harus membangun templat halaman Anda.

Langkah 4 - Bangun templat halaman

Templat Halaman Membangun Aktifkan Generator Situs ini untuk menghasilkan posting untuk setiap halaman di situs web WordPress Anda. Plugin sumber akan menarik data yang Anda butuhkan dari WordPress untuk halaman -halaman ini, tetapi Anda harus membuat templat 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, Gatsby akan menghasilkan halaman untuk setiap posting. Menggunakan perintah kembangkan, Anda dapat menavigasi ke setiap halaman baru menggunakan URL yang dihasilkan.

Kesimpulan

Dalam tutorial Gatsby WordPress ini, kami membahas cara menghasilkan situs web Gatsby dari WordPress. Kami belajar apa pro dan kontra dari dua perangkat lunak open source ini. Kami juga membahas cara menginstal dan memulai dengan lingkungan pengembangan Gatsby. Akhirnya, containerize.com menulis artikel tentang produk open source lebih lanjut. Oleh karena itu, harap tetap berhubungan dengan kategori platform Open Source Blogging untuk berita dan pembaruan reguler.