กำหนดค่าโอเพนซอร์ส Gatsby ด้วย WordPress ของคุณเพื่อนำประสบการณ์การใช้งานของผู้ใช้และประสิทธิภาพโดยรวมมากขึ้น มาเรียนรู้วิธีใช้เครื่องกำเนิดไซต์แบบคงที่นี้

Gatsby WordPress

ภาพรวม

Gatsbyjs เป็นเครื่องกำเนิดไซต์แบบคงที่แบบอิงแบบเปิดและโอเพ่นซอร์ส มันใช้การกำหนดค่าล่วงหน้าที่ทรงพลังเพื่อสร้างเว็บไซต์ที่ใช้เฉพาะไฟล์คงที่สำหรับการโหลดหน้าเว็บที่รวดเร็วอย่างไม่น่าเชื่อ WordPress เป็นแพลตฟอร์มบล็อกโอเพนซอร์สที่ยอดเยี่ยม เป็นผลให้มีคนจำนวนมากที่รู้วิธีคิดว่าไซต์เป็นไซต์ WordPress เพื่อให้พวกเขาสามารถแฮ็คและขโมยข้อมูลได้ การใช้ Gatsby WordPress ร่วมกันจะให้พลังเดียวกันกับการจัดการเนื้อหา WordPress และความเร็วของ Gatsby ในบทความนี้เราจะดูว่า Gatsby คืออะไรและทำไมคุณต้องใช้ซอฟต์แวร์ CMS จากนั้นเราจะลงรายละเอียดเกี่ยวกับวิธีการใช้ WordPress และ Gatsby ด้วยกันเพื่อสร้างประสบการณ์เว็บไซต์ที่น่าทึ่ง เริ่มกันเลย!

Gatsby คืออะไร

Gatsby เป็นเครื่องกำเนิดไซต์แบบคงที่ ซึ่งหมายความว่า Gatsby สร้างไฟล์ HTML แบบคงที่ที่อัปโหลดไปยังเซิร์ฟเวอร์ของเว็บไซต์ของคุณ เมื่อผู้เข้าชมเข้าสู่เว็บไซต์ของคุณไฟล์คงที่เหล่านี้จะถูกเสิร์ฟไปยังเบราว์เซอร์ของพวกเขาแทนที่จะเป็นเนื้อหาแบบไดนามิก WordPress โดยทั่วไป มันเป็นเฟรมเวิร์กฟรีและโอเพ่นซอร์สตาม React ที่ช่วยให้นักพัฒนาสร้างเว็บไซต์และแอพที่รวดเร็ว

ข้อดีและข้อเสียของการใช้ WordPress และ Gatsby

ตามที่เป็นทางการของ Gatsby เอกสาร พวกเขาได้รวบรวมตารางซึ่งการรวมกันของ Gatsby Wordpress นั้นยอดเยี่ยมและไม่ใช่คนที่ไม่ใช่ เพื่อความสะดวกฉันจะแสดงรายการเหล่านั้นที่นี่ {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress และ Gatsby นั้นยอดเยี่ยมสำหรับ {{LINE_27}} {{LINE_28}} {{LINE_29}} ทีมเนื้อหาที่พอใจกับประสบการณ์การแก้ไขเนื้อหา WordPress {{LINE_31}} {{LINE_32}} ทีมพัฒนาที่ให้ความสำคัญกับการใช้เทคโนโลยีโอเพนซอร์ซยอดนิยม {{LINE_34}} {{LINE_35}} ออกแบบเว็บไซต์ที่มีเนื้อหาที่เก็บไว้ใน WordPress แล้ว {{LINE_37}} {{LINE_38}} ทีมที่ต้องการเป็นเจ้าของข้อมูลและสแต็คเทคโนโลยี {{LINE_40}} {{LINE_41}} เวิร์กโฟลว์การควบคุมการเข้าถึงที่ซับซ้อนหรือข้อ จำกัด การสร้างแบบจำลองเนื้อหา {{LINE_43}} {{LINE_44}} โครงการที่ความปลอดภัยมีความสำคัญ {{LINE_46}} {{LINE_47}} โครงการที่มีความต้องการสูงซึ่งประสิทธิภาพเป็นสิ่งสำคัญยิ่ง {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress และ Gatsby ไม่ค่อยดีสำหรับ {{LINE_55}} {{LINE_56}} {{LINE_57}} ทีมที่ต้องการการใช้ธีม WordPress UI {{LINE_59}} {{LINE_60}} ผู้ที่กำลังมองหาคลาวด์ CMS ที่ได้รับการจัดการอย่างสมบูรณ์ {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} นอกเหนือจากคะแนนอย่างเป็นทางการเหล่านี้ฉันต้องการแสดงรายการข้อดีและข้อเสียบางประการของการใช้ Gatsby WordPress ด้วยกัน {{LINE_67}} {{LINE_68}} {{LINE_69}} ข้อดี {{LINE_71}} {{LINE_72}} {{LINE_73}} ความเร็วในการโหลดที่เร็วขึ้น - เว็บไซต์คงที่โหลดได้เร็วกว่าแบบไดนามิก เป็นผลให้มันส่งผลกระทบต่อหน้าของคุณโหลดความเร็วและการจัดอันดับ SEO {{LINE_75}} {{LINE_76}} ค่าใช้จ่ายเซิร์ฟเวอร์ที่น้อยลง - เนื่องจากไฟล์คงที่ไม่จำเป็นต้องใช้ซอฟท์แวร์พิเศษดังนั้นหน้า HTML แบบคงที่จึงสามารถเสิร์ฟได้จากเซิร์ฟเวอร์ที่ถูกกว่าเช่นกัน {{LINE_78}} {{LINE_79}} ปลอดภัยมากขึ้น - สำหรับไซต์คงที่ไม่มีส่วนประกอบที่เคลื่อนไหวของชิ้นส่วนดังนั้นจึงไม่มีโอกาสที่แฮ็กเกอร์จะใช้ประโยชน์จากซอฟต์แวร์ของคุณ {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} ข้อเสีย {{LINE_89}} {{LINE_90}} {{LINE_91}} เส้นโค้งการเรียนรู้ - ต้องใช้ทักษะเพิ่มเติมสำหรับนักพัฒนา เช่นการเรียนรู้ reactjs และ graphql {{LINE_93}} {{LINE_94}} เฉพาะเนื้อหาคงที่ - หากคุณต้องการให้บริการเนื้อหาแบบไดนามิกใด ๆ จากนั้น Gatsby ไม่เหมาะกับคุณ สามารถใช้ไฟล์คงที่เซิร์ฟเวอร์ได้เท่านั้น ดังนั้นคุณไม่สามารถมีระบบแสดงความคิดเห็นใด ๆ ที่ดึงข้อมูลจากฐานข้อมูล {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

วิธีใช้ Gatsby กับ WordPress

ก่อนที่คุณจะสามารถติดตั้ง Gatsby คุณต้องติดตั้ง nodejs และ NPM ในสภาพแวดล้อมเว็บไซต์ของคุณ

ขั้นตอนที่ 1 - ติดตั้ง gatsby

npm install -g gatsby-cli

คำสั่งนี้จะเรียกใช้ตัวติดตั้งโดยอัตโนมัติ มันดาวน์โหลดและติดตั้งการพึ่งพาทั้งหมดก่อนที่จะติดตั้ง Gatsby เมื่อเสร็จสิ้นแล้วคุณสามารถเริ่มสร้างเว็บไซต์ Gatsby แรกของคุณ

gatsby new gatsby-site

สิ่งนี้จะดาวน์โหลดเทมเพลตเริ่มต้นของ Gatsby และวางไว้ในไดเรกทอรี/Gatsby-Wordpress เมื่อการติดตั้งเสร็จสมบูรณ์คุณสามารถเปิดเว็บไซต์พัฒนาได้

gatsby develop

ตอนนี้ในเว็บเบราว์เซอร์ของคุณป้อน http: // localhost: 8000 และเทมเพลตเริ่มต้นของคุณควรเปิด

เทมเพลตเริ่มต้น Gatsby

ขั้นตอนที่ 2 - เชื่อมต่อ Gatsby กับ WordPress

ในส่วนนี้ของคู่มือ Gatsby WordPress เราจะเชื่อมต่อเครื่องกำเนิดไซต์คงที่นี้กับ WordPress คุณมีเว็บไซต์คงที่พื้นฐาน แต่คุณต้องรวมเข้ากับ WordPress สิ่งนี้ชี้ไปที่ไซต์ Gatsby ของคุณไปยังที่อยู่ของบล็อก WordPress ของคุณทำให้สามารถดึงข้อมูลล่าสุดเมื่อคุณเรียกใช้เซิร์ฟเวอร์การพัฒนา เมื่อเชื่อมต่อ Gatsby จะสร้างเว็บไซต์แบบคงที่ตามเทมเพลตปัจจุบันของคุณ ติดตั้งปลั๊กอิน WordPress ของ Gatsby จากที่เก็บ NPM

npm install gatsby-source-wordpress

ขั้นตอนที่ 3 - กำหนดค่า gatsby

ใส่รหัสต่อไปนี้ในไฟล์ gatsby-config.js ของคุณ

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
      }
    },
  ]
}

อัปเดตรหัสนี้เพื่อชี้ไปที่เว็บไซต์ WordPress ของคุณ หากเว็บไซต์ของคุณโฮสต์ในพื้นที่หลังจาก BaseURL คุณสามารถใช้ localhost: 8888/wordpress แทน URL ของเว็บไซต์ของคุณ หลังจากบันทึกไฟล์คุณจะต้องสร้างเทมเพลตหน้าเว็บของคุณ

ขั้นตอนที่ 4 - สร้างเทมเพลตหน้า

เทมเพลตหน้าการสร้างเปิดใช้งานเครื่องกำเนิดไซต์นี้เพื่อสร้างโพสต์สำหรับทุกหน้าบนเว็บไซต์ WordPress ของคุณ ปลั๊กอินต้นทางจะดึงข้อมูลที่คุณต้องการจาก WordPress สำหรับหน้าเหล่านี้ แต่คุณจะต้องสร้างเทมเพลตการออกแบบ ในไฟล์ gatsby-node.js ของคุณเพิ่มรหัสต่อไปนี้

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,
      },
    })
  })
}

หลังจากโทรหาข้อมูลทั้งหมด Gatsby จะสร้างหน้าสำหรับแต่ละโพสต์ การใช้คำสั่งพัฒนาคุณสามารถนำทางไปยังแต่ละหน้าใหม่โดยใช้ URL ที่สร้างขึ้น

บทสรุป

ในการสอน WordPress Gatsby นี้เราได้กล่าวถึงวิธีการสร้างเว็บไซต์ Gatsby จาก WordPress เราได้เรียนรู้ว่าข้อดีและข้อเสียของซอฟต์แวร์โอเพ่นซอร์สทั้งสองนี้คืออะไร นอกจากนี้เรายังครอบคลุมถึงวิธีการติดตั้งและเริ่มต้นด้วยสภาพแวดล้อมการพัฒนา Gatsby ในที่สุด containerize.com กำลังเขียนบทความเกี่ยวกับผลิตภัณฑ์โอเพ่นซอร์สเพิ่มเติม ดังนั้นโปรดติดต่อกับหมวดหมู่แพลตฟอร์มโอเพ่นซอร์ส บล็อก สำหรับข่าวทั่วไปและการอัปเดต