บทช่วยสอน: สร้างเว็บไซต์ของคุณด้วย WordPress และ Gatsby

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

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

ในบทความนี้ เราจะมาดูกันว่า Gatsby คืออะไร และเหตุใดคุณจึงควรใช้กับ WordPress จากนั้นเราจะให้รายละเอียดวิธีการใช้ Gatsby และควรทำอย่างไร มาเริ่มกันเลย!

แกสบี้คืออะไร?

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

ในการสร้างไฟล์เหล่านี้ Gatsby จะดึงข้อมูลสำหรับเว็บไซต์ของคุณจากแหล่งต่างๆ ซึ่งรวมถึงเว็บไซต์ที่มีอยู่ การเรียก API และแฟลตไฟล์ผ่าน GraphQL เว็บไซต์แบบคงที่ของคุณจะถูกสร้างขึ้นตามการกำหนดค่าที่คุณตั้งไว้

เมื่อเทียบกับเครื่องสร้างไซต์คงที่อื่น ๆ Gatsby ค่อนข้างใหม่ อย่างไรก็ตาม สิ่งนี้ไม่ได้หยุดหลายบริษัทจากการทดลองใช้ หนึ่งในตัวอย่างที่ใหญ่ที่สุดคือบล็อก Airbnb Engineering & Data Science ซึ่งขับเคลื่อนโดย Gatsby

ทำไมต้องใช้ Gatsby กับ WordPress?

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

ข้อดีของการใช้แกสบี้

Gatsby มอบสิทธิประโยชน์มากมายที่ทุกเว็บไซต์สามารถใช้ประโยชน์ได้ รวมถึง:

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

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

ข้อเสียของการใช้แกสบี้

ไม่มีระบบซอฟต์แวร์ใดที่สมบูรณ์แบบ และ Gatsby ก็มีข้อเสียบางประการที่คุณต้องรู้เกี่ยวกับ:

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

ในขณะที่นักพัฒนาหลายคนพบว่าข้อดีของ Gatsby มีมากกว่าข้อเสีย ทั้งสองอย่างมีความสำคัญที่ต้องทำความเข้าใจล่วงหน้า

ฉันจะใช้ Gatsby กับ WordPress ได้อย่างไร

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

ขั้นตอนที่ 1: ตรวจสอบข้อกำหนดเบื้องต้น

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

หากคุณมี Windows คุณสามารถติดตั้ง NodeJS และ Git ผ่านตัวติดตั้งในหน้าดาวน์โหลด เช่นเดียวกับ Mac อย่างไรก็ตาม หากคุณใช้งาน Linux จำเป็นต้องมีตัวติดตั้งแพ็คเกจ เช่น apt

ขั้นตอนที่ 2: ติดตั้ง Gatsby

หลังจากติดตั้ง NodeJS และ Git แล้ว คุณสามารถเริ่มติดตั้ง Gatsby ได้ วิธีที่ง่ายที่สุดคือใช้คำสั่งต่อไปนี้ในเทอร์มินัลซอฟต์แวร์ของคุณ:

 npm install -g gatsby-cli

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

ขั้นตอนที่ 3: สร้างไซต์ Gatsby

ในการสร้างเว็บไซต์ Gatsby คุณจะต้องเรียกใช้คำสั่งต่อไปนี้:

 gatsby new gatsby-site

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

 gatsby develop

ในขณะที่สภาพแวดล้อมการพัฒนากำลังทำงาน คุณสามารถเยี่ยมชมเว็บไซต์ใหม่ของคุณได้ภายในเครื่อง ในเว็บเบราว์เซอร์ของคุณ ให้ป้อน http://localhost:8000 และเทมเพลตเริ่มต้นของคุณควรเปิดขึ้น

หากคุณเห็นหน้านี้ คุณสามารถเริ่มสร้างเว็บไซต์ของคุณได้ ซึ่งหมายถึงการสร้างไฟล์คงที่ในไดเร็กทอรีสาธารณะของเว็บไซต์เหล่านั้น คำสั่งต่อไปนี้เริ่มต้นการผลิตไฟล์สแตติก tohse โดยอัตโนมัติ:

 gatsby build

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

 gatsby serve

คำสั่งนี้จะใช้ได้ก็ต่อเมื่อคุณรันคำสั่ง build แล้วเท่านั้น

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

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

ในการเชื่อมต่อทั้งสอง คุณจะต้องติดตั้งปลั๊กอิน Gatsby สำหรับ WordPress คำสั่งต่อไปนี้จะดูแลสิ่งนั้น:

 npm install gatsby-source-wordpress

หลังจากติดตั้งปลั๊กอินแล้ว คุณสามารถเริ่มกำหนดค่า Gatsby ได้

ขั้นตอนที่ 5: กำหนดค่า Gatsby

ในการกำหนดค่า Gatsby คุณต้องทำงานกับไฟล์ gatsby-config.js ในไฟล์นั้น ให้เพิ่มโค้ดต่อไปนี้:

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

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

ขั้นตอนที่ 6: สร้างเทมเพลตเพจ

เทมเพลตการสร้างหน้าช่วยให้ Gatsby สร้างโพสต์สำหรับทุกหน้าบนเว็บไซต์ 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, }, }) }) }

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

ฉันควรใช้ Gatsby สำหรับ WordPress หรือไม่

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

ทำประโยชน์สูงสุดกับไซต์ของคุณบน WP Engine

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

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