คู่มือการสร้างไซต์แบบคงที่โดยใช้ Hexo และ WordPress

เผยแพร่แล้ว: 2022-03-11

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

จากการเพิ่มประสิทธิภาพ WordPress ให้คงที่

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

แม้แต่ผู้เล่นรายใหญ่ในอุตสาหกรรมของเราก็ยังใช้ WordPress เว็บไซต์เช่น Smashing Magazine และ CSS-Tricks ใช้ WordPress แม้ว่าจะมีการปรับแต่งอินสแตนซ์อย่างมีนัยสำคัญในทั้งสองกรณี อย่างไรก็ตาม การทำงานกับ WordPress อาจเป็นงานที่น่าเบื่อหน่าย โดยเฉพาะอย่างยิ่งเมื่อปรับแต่งและเพิ่มประสิทธิภาพเพื่อประสิทธิภาพ

ฉันเริ่มบล็อกเล็กๆ ในปี 2015 สัญชาตญาณแรกของฉันคือการใช้ WordPress มันทำให้ฉันเริ่มต้นอย่างรวดเร็ว เนื่องจากฉันทำงานกับ WordPress อยู่แล้ว ฉันสร้างหยดใหม่บน DigitalOcean เป็นเซิร์ฟเวอร์ สร้าง Vesta เป็น Hosting Control Panel และติดตั้ง WordPress เป็นแพลตฟอร์มบล็อก ในที่สุด ฉันออกแบบและพัฒนาธีม WordPress ใหม่เอี่ยม สิ่งเดียวที่ขาดหายไปคือเนื้อหา

ฉันรู้ว่าฉันต้องการแบ่งปันเคล็ดลับบางอย่างเกี่ยวกับ Atom ในขณะที่ฉันใช้เครื่องมือแก้ไขที่ยอดเยี่ยมนี้ในขณะนั้น ฉันตีพิมพ์บทความสองสามเรื่องเกี่ยวกับเรื่องนี้และแชร์กับชุมชน

ตอนแรก ฉันไม่ได้ใส่ใจกับการแสดงมากนักเพราะฉันจดจ่อกับเนื้อหามากเกินไป หลังจากนั้นไม่นาน ฉันสังเกตเห็นปัญหาด้านประสิทธิภาพบางอย่าง คะแนนใน Google PageSpeed ​​Insights นั้นแย่มาก ดังนั้นฉันจึงทำงานอย่างหนักเพื่อแก้ไขและเพิ่มประสิทธิภาพเว็บไซต์ของฉัน เพื่อให้ได้คะแนนเกือบสมบูรณ์แบบที่ 99/100:

  • ฉันเปลี่ยนจาก Nginx+Apache เป็น Nginx+PHP-FPM

  • ฉันใช้ CloudFlare เพื่อความรวดเร็วและการป้องกัน

  • ฉันใช้ Cloudinary เพื่อโฮสต์รูปภาพ

  • ฉันปรับแต่งธีมและใช้ Critical CSS

คำเตือนเพียงอย่างเดียวคือปัญหาการแคชของ Google Analytics ซึ่งฉันไม่ทราบวิธีแก้ไขในขณะนั้น

แต่ถ้า 99/100 หรือ 100/100 ยังไม่ได้รับประสิทธิภาพที่ต้องการล่ะ นั่นคือสิ่งที่ตัวสร้างเพจคงที่เข้าสู่การต่อสู้

เข้าสู่เครื่องสร้างเพจแบบคงที่และ Hexo

ดังนั้นเครื่องกำเนิดไซต์แบบคงที่คืออะไร?

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

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

ในเดือนมิถุนายนของปีนี้ Vitaly Friedman จาก Smashing Magazine ได้แนะนำ JAMstack ในเวิร์กช็อปในเมืองของฉัน ฉันไม่เคยได้ยินเรื่องนี้และฉันรู้สึกทึ่งมาก หลังจากการสัมมนาเสร็จสิ้น ฉันได้ศึกษาแนวคิดใหม่นี้เล็กน้อย และฉันก็รู้ว่ามันยอดเยี่ยมเพียงใด ฉันตระหนักว่าเว็บไซต์ของฉันไม่จำเป็นต้องใช้ WordPress

ขั้นตอนแรกคือการตัดสินใจว่าจะใช้ตัวสร้างเพจแบบคงที่ตัวใด ฉันไม่รู้ว่ามีกี่คน ฉันตัดสินใจลองใช้เฟรมเวิร์กบล็อกของ Hexo มันสามารถปรับใช้กับ Netlify มีปลั๊กอินสำหรับโยกย้ายจาก WordPress และใช้ Node.js ซึ่งฉันคุ้นเคย ไม่เหมือนกับ Jekyll และ Hugo ซึ่งใช้ Ruby และ Go ตามลำดับ และอย่างที่ฉันค้นพบในภายหลัง มันเร็วมาก

แผนภาพนามธรรมการย้ายบล็อก WordPress ไปยังบล็อก Hexo เพื่อประสิทธิภาพที่ดีขึ้น

การย้าย WordPress ไปยัง Hexo

การติดตั้ง Hexo ทำได้ง่ายอย่างที่ควรจะเป็น ติดตั้ง hexo-cli ทั่วโลกโดยใช้ npm รันคำสั่ง hexo init ติดตั้งการพึ่งพา npm และ voila:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

หากต้องการย้ายข้อมูล ให้ติดตั้งปลั๊กอิน hexo-migrator-wordpress ปลั๊กอินนี้ต้องการไฟล์ XML เป็นแหล่งที่มา ไฟล์ XML สามารถส่งออกได้โดยใช้เครื่องมือส่งออกของ WordPress ซึ่งอยู่ในแผงการดูแลระบบภายใต้ เครื่องมือ -> ส่งออก -> Wordpress สุดท้าย พิมพ์คำสั่ง hexo migrate เพื่อเสร็จสิ้นการนำเข้า

 hexo migrate wordpress <source>

สิ่งเดียวที่ต้องทำคือตรวจสอบผลลัพธ์ รันคำสั่ง เซิร์ฟเวอร์ hexo เพื่อเริ่มต้นเซิร์ฟเวอร์และเปิดเบราว์เซอร์ตามที่อยู่ที่ระบุ

 hexo server

Markdown และข้อ จำกัด ของมัน

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

ข้อดีอีกประการสำหรับ Markdown คือมันสร้าง HTML ที่สะอาดและถูกต้อง ที่ช่วยให้นักพัฒนาสามารถสร้างกฎ CSS ที่สะอาดและบำรุงรักษาได้สำหรับการจัดสไตล์บทความและหน้าบล็อก

ชีวิตของนักพัฒนาไม่เคยง่าย เรามักประสบปัญหาที่อาจทำให้เราใช้เวลากับสิ่งที่ไม่คาดคิด หากเราเรียนรู้บางสิ่งระหว่างทาง เราจะไม่เสียเวลา และนั่นก็เป็นสิ่งที่ดี สิ่งเดียวกันนี้เกิดขึ้นกับฉัน ฉันคิดว่าทุกอย่างเป็นไปด้วยดีเพราะไม่มีข้อผิดพลาดในการคอมไพล์ แต่แล้วฉันก็สังเกตเห็นว่าบางสิ่งไม่ทำงานตามที่คาดไว้

ตัวอย่างเช่น การสาธิต Codepen ไม่โหลด ฉันค้นหาปลั๊กอิน Hexo และพบปลั๊กอิน ขออภัย ปลั๊กอินนี้ไม่เป็นทางการ และสร้างข้อผิดพลาด HTML ที่ไม่สามารถยอมรับได้ ฉันต้องการมีส่วนร่วมและแก้ไขปัญหา แต่คำขอดึงล่าสุดไม่ได้รับการแก้ไขมานานกว่าหนึ่งปีครึ่ง ฉันตัดสินใจว่ามันจะง่ายกว่าที่จะแยกที่เก็บ แก้ไขปัญหา และเผยแพร่ปลั๊กอินบนหน้า Hexo เพื่อให้ทุกคนสามารถใช้งานได้ ปลั๊กอินได้รับการยอมรับ ฉันอัปเดตเนื้อหา และการสาธิตของ Codepen ทำงานได้อย่างมีเสน่ห์

ปัญหาที่คล้ายกันเกิดขึ้นกับการฝัง CanIUse ตอนนี้ฉันรู้วิธีสร้างปลั๊กอิน Hexo แล้ว ก็ไม่มีข้อแก้ตัวที่จะไม่ทำเช่นนั้น ปลั๊กอิน hexo-caniuse ของฉันได้รับการเผยแพร่เช่นกัน เช่นเดียวกับปลั๊กอิน hexo-cloudinary ของฉันสำหรับรูปภาพที่ตอบสนองที่โหลดจาก Cloudinary CDN

การออกแบบใหม่และการเพิ่มประสิทธิภาพ

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

ในการสร้างเทมเพลตใหม่ ฉันตัดสินใจใช้ EJS สำหรับการสร้างเทมเพลต ไม่เคยทำงานกับ EJS มาก่อน ฉันเห็นว่ามันเป็นโอกาสในการเรียนรู้ไวยากรณ์เทมเพลตใหม่ หากคุณไม่ชอบ EJS Hexo ให้การสนับสนุน Swig, Haml หรือ pug ผ่านปลั๊กอิน

ในระหว่างขั้นตอนการออกแบบใหม่ ฉันให้ความสำคัญกับประสิทธิภาพเป็นอย่างมาก การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดจะทำให้เว็บไซต์คงที่ของเราเร็วขึ้นอีก การวางไฟล์ JavaScript ที่ด้านล่างของเอกสารและใช้เทคนิค Critical CSS จะสร้างประสบการณ์ที่ดีที่สุดสำหรับผู้ชมของคุณ

การเพิ่มประสิทธิภาพ SEO เป็นสิ่งสำคัญสำหรับการมองเห็นบล็อกบนเครื่องมือค้นหาเช่น Google Hexo มีตัวช่วยในตัวสำหรับการแทรกข้อมูล Open Graph Hexo ใช้ไฟล์ YAML เพื่อจัดเก็บการกำหนดค่าไซต์และธีม ฉันใช้ไฟล์คอนฟิกูเรชันของธีมเพื่อกำหนดชื่อไซต์ คำอธิบาย และ ID ทางสังคมต่างๆ

การเพิ่ม Gulp หรือ Webpack ให้กับกระบวนการสร้างของคุณจะเป็นประโยชน์และแนะนำเสมอ ฉันใช้อึกเพื่อย่อขนาดและบีบอัดไฟล์ CSS และ JavaScript และทุกอย่างก็พร้อม ฉันสามารถปรับใช้ได้

Netlify

Netlify เป็นแพลตฟอร์มที่ให้บริการโฮสต์สำหรับเว็บไซต์และแอพที่มีประสิทธิภาพอย่างรวดเร็ว มันทำตลาดตัวเองเป็นแพลตฟอร์มแบบครบวงจรที่ทำโค้ดอัตโนมัติเพื่อสร้างเว็บไซต์ที่มีประสิทธิภาพและง่ายต่อการบำรุงรักษา

เพียงกดรหัสของคุณและให้เราดูแลส่วนที่เหลือ

อย่างที่คุณคาดหวัง การกำหนดค่าเว็บไซต์นั้นตรงไปตรงมา:

  1. ตั้งค่าโดเมน

  2. เปลี่ยนระเบียน DNS

  3. ตั้งค่าการสร้างและการปรับใช้

  4. เปิด SSL

เมื่อทุกอย่างถูกตั้งค่า ฉันทำการทดสอบพื้นฐานจำนวนหนึ่งเพื่อดูคะแนน รวมถึงการทดสอบความเร็วเว็บไซต์ Pingdom การทดสอบหน้าเว็บ และ Testmysite.io ผลลัพธ์นั้นยอดเยี่ยม เนื่องจากเว็บไซต์ได้รับคะแนนสูงสุดในทุกเครื่องมือ

CloudFlare

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

การทดสอบครั้งสุดท้ายคือ Google PageSpeed ​​Insights คะแนนเกือบ 100% ทั้งเวอร์ชันมือถือและเดสก์ท็อป ปัญหาคือการแคชเบราว์เซอร์ Google Analytics ฉันจัดการเพื่อแก้ไขปัญหาโดยใช้แอป CloudFlare สำหรับ Google Analytics

ราคาเท่าไหร่?

การใช้ Hexo บน Netlify กับ CloudFlare ไม่มีค่าใช้จ่าย

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

Netlify มีแผนเปิดซึ่งมอบตัวเลือกที่ยอดเยี่ยมสำหรับการโฮสต์ของเรา รูปภาพถูกโฮสต์บนแผนเปิดของ Cloudinary เช่นกัน แผนบริการฟรีของ CloudFlare ทำให้เราสามารถกำหนดค่ากฎจำนวนมาก ซึ่งสามารถเร่งความเร็วเว็บไซต์ของคุณได้อย่างรวดเร็วอยู่แล้ว นอกจากนี้ยังช่วยให้เราแก้ไขปัญหาการแคชของเบราว์เซอร์ Google Analytics ได้อีกด้วย ฉันไม่ได้จ่ายค่าโดเมนด้วย เนื่องจากฉันใช้โดเมนส่วนตัวฟรีที่รัฐบาลจัดให้

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

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

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

กรณีสำหรับเครื่องกำเนิดไซต์แบบคงที่

การย้ายจาก WordPress ไปเป็นเครื่องสร้างเพจแบบสแตติกนั้นไม่ใช่เรื่องง่าย และไม่ใช่สิ่งที่ผู้ใช้ WordPress ทุกคนควรทำอย่างแน่นอน อย่างไรก็ตาม Hexo ทำให้การเปลี่ยนแปลงนี้ค่อนข้างง่าย ต้องขอบคุณปลั๊กอิน เอกสารประกอบที่ยอดเยี่ยม และ API ที่เรียบง่าย

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

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

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

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