ทำไมเว็บ arnondora.in.th ถึงย้ายจาก Gatsby.js มาเป็น Ghost

By Arnon Puitrakul - 16 กุมภาพันธ์ 2024

ทำไมเว็บ arnondora.in.th ถึงย้ายจาก Gatsby.js มาเป็น Ghost

คำถามจากหัวเรื่องนี้ มีทั้งเพื่อนและหลาย ๆ คนถามเข้ามากันเยอะมากว่า เห็นเมื่อก่อนเราใช้ Gatsby.js ทำเป็น Static Site แล้วทำไมตอนนี้เราย้ายมาใช้ Ghost กับไหน ๆ เราใช้ CMS แล้ว ทำไมเราถึงไม่ใช้ CMS ยอดนิยมอย่าง Wordpress หลังจากการย้ายมาหลายปี เรายังคิดเหมือนเดิมอยู่มั้ย หรือมีตัวเลือกไหนที่เราแอบปันใจวันนี้เราจะมาเล่าเรื่องนี้กัน

Requirement ที่เปลี่ยนไป ในแต่ละช่วงอายุของเว็บ

จริง ๆ เว็บเราก็เปิดมานานแล้ว ผ่านหลายช่วงเวลาของชีวิตเราตั้งแต่เราเริ่มเขียนเป็นงานอดิเรกจนถึงวันนี้เราแทบจะเรียกว่า Full Time Content Creator แล้วมั้ง ทำให้ Requirement ของตัวเว็บ และลักษณะของสารที่อยากสื่อมันแตกต่างกันไปต่างช่วงเวลา

ช่วงแรก ๆ เราไม่ได้สนใจอะไรมาก เราเน้นการเขียนพวก Tutorial ในราคาถูก นั่นคือ ค่าใช้ใจในการ Operate จะต้องฟรีไปเลย ตอนนั้นเรายังไม่อยากลงทุนอะไรเท่าไหร่ เขียนเป็นงานอดิเรกไปขำ ๆ เลยเลือกใช้ Platform ยอดนิยมในวันนั้นคือ Wordpress ที่เราใช้ Hosting ของเขา เราไม่ต้องทำอะไรมาก เราแค่หา Theme มาแปะ แล้วเขียน Content ได้เลย ไม่ต้องจัดการอะไรทั้งสิ้น

จนมาถึงความสนุกมากกว่าเดิมคือ เราอยาก Custom Site มากกว่าเดิม เริ่มอยากติดตั้ง Plugin ต่าง ๆ เพื่อเพิ่มความสามารถของระบบ ตอนนั้นเรายังเลือก Wordpress เหมือนเดิม แต่เปลี่ยนไป Hosting เอง ตอนนั้นพึ่งเข้ามหาลัยใหม่ ๆ เลยลองขอ Credit ของ Digital Ocean ได้มา 300 USD และตอนนั้นเราใช้ VM เดือนละ 5 USD แต่มันก็ไม่ได้ใช้งานได้นานขนาดนั้นหรอก เพราะเราเอามาเปิดพวก VM อื่น ๆ สำหรับใช้เรียนด้วย เลยหมดไปอย่างรวดเร็ว

เลยต้องหาอะไรที่ฟรีเหมือนเดิม แต่เรายังทำอะไรพิเรนได้เหมือนเดิม ตอนนั้นช่วงปี 3 ไปฝึกงานเป็น Frontend Engineer เชี้ยเท่ปะ ได้เขียน React ครั้งแรก เอาสิครับ ร้อนวิชาเว้ยยย อยากใช้อะไรก็ได้ที่แมร่งเป็น React และ Hosting ได้ฟรี เลยเลือกเป็น Gatsby.js ที่เป็น Static Site Generator ทำให้เราสามารถไป Host ในพวก Static Hosting ได้ ตอนนั้นเริ่มจากไป Firebase Hosting แล้วค่อยไป Netlify แล้วซับ Cache ผ่าน Cloudflare อีกชั้นนึงก่อน เพราะเขาให้ Bandwidth สูงกว่าตอนนั้นคนเริ่มรู้จักละ

จะเห็นว่าที่ผ่านมา Tech Stack ที่เราเลือกของเว็บเราตัดสินใจด้วยเหตุทาง Cost และ Engineering Playground ล้วน ๆ แต่อันนี้มันเปลี่ยนไป เพราะมันเป็นช่วงที่เราอยากจะ All-in กับเว็บของเรา อยากทำให้มันเติบโต เลยเป็นครั้งแรกที่เรายอมถอยเรื่อง Engineering Playground ออกไปแล้วมาเน้นทางด้าน การทำให้มันง่าย และ Content-Focus มากขึ้น ตอนนั้นได้เสี่ยต้นจาก Hostify มาลอง Set อะไรสนุก ๆ ในบ้านของเรา ทำให้เราสามารถ Host เว็บของเราในบ้านได้ เลยลองมาเลือก CMS ที่ ง่าย และ ใช้งานได้ยาว ๆ ไม่ต้องติดว่าต้องทำงานบน Shared Hosting ได้ละ เลยหยิบ Ghost ขึ้นมา ทำให้เว็บเราใช้ Ghost จนถึงวันนี้นั่นเอง

การ Rebuild หน้าเว็บใช้เวลากว่าที่คิด

สิ่งแรกที่เรารู้สึกตอนใช้ Gatsby.js คือ การที่เราจะเปลี่ยนแปลง หรือสร้าง Content บนหน้าเว็บของเรา จำเป็นต้องมี Process การ Build และ Deploy ถ้าเป็นเมื่อก่อนตอนที่เราใช้แรก ๆ ตอนนั้นไม่มีปัญหาเท่าไหร่ เพราะ เราไม่ได้มี Content ใหม่ออกมาบ่อย เราสามารถใช้เวลากับแต่ละ Content ได้ค่อนข้างเยอะ จะเสียเวลา Build หน่อยมันไม่ใช่ปัญหาเท่าไหร่

แต่พอมาถึงช่วงที่เรามา All-in กับเว็บและเพจ ทำมันจริงจังมากขึ้น เราจะเห็นว่าทุกวันนี้เราลง Content ที่เป็นบทความสัปดาห์ละ 2 บทความเลยทีเดียว หากเราต้องเสียเวลาในการ Build และ Deploy Site สัปดาห์ละ 2 ครั้ง มันเป็นอะไรที่กินเวลาน่าดู นี่ยังไม่นับว่า หากเราพิมพ์ผิด หรือต้องการแก้ไข เราไม่สามารถแก้ไขได้ทันที เราจะต้องแก้ไข Build และ Deploy ขึ้นไปใหม่อีก ซึ่งมันกินเวลาพอสมควรเลยทีเดียว

และยังไม่นับปัญหาสุดเดือดคือ บางครั้ง การ Build มันไม่ได้ราบลื่น มันเกิดปัญหาขึ้น อาจจะเกิดจากการที่เรา Update Dependencies Version หรือเขียนอะไรเพิ่มเติมทำให้ Site มันจำเป็นต้อง Rebuild ใหม่ทั้งหมด ซึ่งบอกเลยว่า หาก Image Cache ไม่มี เราอาจจะใช้เวลา Build หลัก 20-30 นาที ซึ่งมันเป็นอะไรที่ไม่ดีเท่าไหร่

นั่นทำให้ ณ วันที่ เราลง Content ไม่เยอะมาก ปัญหา Rebuild Site Time มันไม่มีปัญหา แต่พอเราลง Content มากขึ้น มันกลายเป็นปัญหาใหญ่มาก ๆ นั่นเป็นเหตุหนึ่งที่เราเริ่มหันหน้าไปหาพวก Dynamic Site เช่นการใช้ CMS ละ

เราเริ่มมี Workflow ในการทำ Content

Ulysses

ก่อนหน้านี้ตอนเราใช้ Gatsby.js เราเขียน Content ผ่านการทำ Markdown File (MD) ซึ่งโปรแกรมที่ใช้งานตอนนั้นคือ Ulyssess ซึ่งใช้วิธีการเก็บ Markdown ไว้ที่เครื่องของเราเอง ทำให้ถ้าเราเปลี่ยนเครื่อง เราจะไม่สามารถทำงานได้ นอกจากนั้นยังไม่รองกับการทำงานแบบมี Editor หลายคนด้วย เพราะตอนนั้นเราคาดหวังว่า เราจะมีคนเข้ามาช่วยเรา Proofread Content ซึ่งการทำผ่าน Markdown ไม่สามารถทำทั้งเรื่องของการทำงานในหลาย ๆ เครื่อง และ การทำงานแบบมี Editor หลายคนได้

นอกจากนั้น ในการทำงานตอนนี้เราเริ่มมีการทำงานร่วมกับ Sponsor ทำให้ การทำงานจะต้องมี Workflow จากเดิมที่เขียนคนเดียว เขียนเสร็จแล้วเอาลงเลย แต่ตอนนี้เราจะต้องมี Draft ส่งให้ Sponsor เช็คก่อนที่เราจะลง ซึ่งการใช้ Gatsby.js ตอนนั้นเราทำแบบนั้นได้ยากมาก ๆ ต้องเขียน Logic เพื่อเช็ค และไม่ให้มันแสดงผลอยู่ในหน้าแรก แต่ถ้าเป็นใน CMS เช่น Ghost เอง เราสามารถส่งเป็น Draft Link ไปให้ Sponsor ตรวจก่อนได้ นอกจากนั้นยังรองรับการเขียนโดย Editor หลาย ๆ คนได้เหมือนกัน เลยทำให้ CMS อาจจะตอบโจทย์การทำงานของเราที่เปลี่ยนไปมากกว่าแน่นอน แต่ยังไม่ลงว่าจะเป็น CMS อะไร

Ghost มีโครงสร้างที่เรียบง่าย

มาที่ตรงนี้แหละ จุดที่ทำให้เราเลือกมาที่ Ghost แทนที่จะเป็น Wordpress เพราะโครงสร้างการออกแบบของ Ghost นั้นเรียบง่ายกว่า Wordpress มาก ๆ

เป็นเพราะ Ghost นั้นถูกออกแบบมาเพื่อเป็น Blogging Platform โดยเฉพาะ กลับกัน Wordpress ถูกออกแบบมาให้มีความสามารถเป็นได้หลายอย่างมาก ๆ ตั้งแต่ Blogging Platform จนไปถึง E-Commerce Platform นั่นดูเหมือนจะดี แต่พอมันเป็นได้หลายอย่าง มันจะต้องออกแบบมาเพื่อรองรับทุกอย่าง อ้วนเทอะทะไปหมด ประกอบกับตอนที่เราฝึกงาน เราได้เห็นเคสที่ การใช้ Wordpress ในระยะยาว และขาดการดูแล และ Optimise จริงจังมันออกมาเป็นอย่างไร เห็นภาพเว็บตัวเองแว่บ ๆ เลยนะ ไม่อยากเจอปัญหาแบบนั้นเท่าไหร่ เลยไป Ghost ดีกว่า

Wordpress Theme Hierachy

เรายกตัวอย่าง ความซับซ้อน ที่ Ghost ทำได้ง่ายกว่า Wordpress มาก ๆ คือ บทความ ใน Ghost ง่ายมาก คือ ใน 1 บทความ เรามีแค่ ผู้เขียน และ Tags เท่านั้น แต่ใน Wordpress เราสามารถทำ Taxonomy ได้ละเอียดกว่านั้นมาก ๆ เช่นการทำ Category และพวก Sub-Category หรือกระทั่งการทำ Custom Taxonomy ซึ่งเราไม่ได้ใช้ Feature พวกนั้นเลย ถ้าลองอ่านเว็บเราจะเห็นว่า เราแบ่ง Catagory บทความง่ายมาก ๆ ไม่ได้ซับซ้อนอะไร ทำให้ Feature พวกนี้เราไม่ได้ใช้เลย การมีมันมาทำให้การจัดการเว็บเรายุ่งยากโดยไม่จำเป็นอีก

นั่นส่งผลไปถึง Theme Development อีก ทั้งฝั่ง Wordpress และ Ghost เขามีชุดคำสั่ง API ออกมาเพื่อให้เราสามารถเข้าถึงพวกบทความและข้อมูลต่าง ๆ ภายในเว็บของเราหมดละ แต่ด้วยความเรียบง่ายของ Ghost จึงทำให้ การเข้าถึงข้อมูลพวกนี้ทำได้ง่ายกว่า Wordpress มาก ๆ ตอนนั้นเราใช้เวลาเรียนรู้ พร้อมกับทำเว็บที่ทุกคนกำลังอ่านนี้ขึ้นมา ไม่เกิน 2 วันเท่านั้นเอง โอเคแหละ Feature อาจไม่เยอะละเอียดเท่า Wordpress แต่เพียงพอกับการใช้งานของเราแล้ว

สิ่งที่ต้องแลก

แน่นอนว่า มันมีข้อดี แต่มันก็ต้องมีสิ่งที่ต้องแลกมาด้วย เรื่องที่สำคัญคือ การที่ Ghost พื้นฐานทำงานอยู่บน Javascript ทำให้เราไม่สามารถที่จะเอาไป Host อยู่บนพวก Shared-Hosting ในประเทศไทยที่เกือบทั้งหมดต้องรัน PHP ซึ่ง Wordpress รัน PHP ซึ่งปัญหานี้ เราไม่มีผลอะไรละ เพราะเรา Host อยู่บน NAS ตัวเอง ซึ่งใช้ Docker Container เราจะเอาอะไรมารันไม่ใช่ปัญหา รันได้หมดถ้าสดชื่น

อีกจุดที่เสียไปคือ ความมี Library และ Theme Support ที่น้อยกว่า Wordpress นั่นเป็นเพราะ Ghost นั้นยังถือว่าใหม่กว่าพวก Wordpress และมีกลุ่มผู้ใช้ขนาดเล็กกว่ามาก ๆ เลยทำให้พวก Library และ Theme สำเร็จที่ให้เราโหลดได้ยอมรับเลยว่าน้อยกว่ามาก ๆ คำว่ามากของเราคือ ต่างกันจริง ๆ เช่นเราไปหา Theme สำเร็จรูปใน Envato Element ตัว Theme สำหรับ Ghost มีเพียงแค่ 25 ตัวเท่านั้น แต่กลับกันหากเป็น Wordpress มีถึง 2,063 ตัว ยังไม่นับ Plugin อีก เลยทำให้มันต่างกันมาก ๆ

บันทึกการ Upgrade Ghost 4.x เป็น 5.x เ_ย อะไรเนี่ย !!!!
หลังจากตอนก่อน Upgrade MySQL ไป วันนี้เรามาต่อกันที่อีกตัวที่ปวดหัวไม่ต่างกันเลยคือ Ghost CMS หรือเว็บ Blog ของเรานั่นเอง ที่ขยับมาใช้ MySQL 8 แล้วนั่นเอง จะเป็นยังไง ชิบหาย ขนาดไหน มาอ่านที่บทความนี้ได้เลย

นอกจากนั้นพวก Commnuity ที่จะช่วย Support เวลาเราเจอปัญหา Ghost เองก็มีจำนวนไม่เยอะเท่า Wordpress อีก ทำให้เมื่อเราเจอปัญหาหลาย ๆ อย่าง เรามักจะต้องพึ่งตัวเองซะเยอะ เช่นปัญหาที่เราเจอ ตอน Upgrade จาก Ghost 4 เป็น 5 ก็คือนั่งแก้ปัญหาเอง ค่อย ๆ Debug ด้วยตัวเองไปเรื่อย ๆ อยู่นานเหมือนกัน หากเป็น Wordpress เรามั่นใจว่า เราเจอพวก Migration Issues น่าจะมี Post ที่บอกวิธีแก้ปัญหาอยู่สักที่แน่ ๆ

ดังนั้นการเลือกใช้ Ghost ถึงจะบอกว่ามัน Lean กว่า Wordpress มาก ๆ แต่มันมีสิ่งที่ต้องแลกมากอยู่เหมือนกัน ซึ่งประเด็นที่เรายกขึ้นมา เราต้องบอกว่าเรารับได้ทั้งหมด ไม่งั้นเราไม่เลือกใช้ Ghost แน่นอน เช่น การมี Theme สำเร็จรูปน้อย เราไม่ได้สนใจเท่าไหร่ เพราะ Theme ที่ใช้อยู่ เราเขียนเองทั้งหมด น่าจะ Lean กว่ามาก ๆ เลยทีเดียว ซึ่งอาจจะต้องเสียเวลาดูแลหน่อย แต่เรายังรับได้ และเป็น Playground ให้เราพัฒนาฝีมืองาน Frontend ของเราด้วย ส่วนเรื่องของการ Support เอาจริง ๆ แอบ Pain นิดหน่อย แต่ส่วนใหญ่เราใช้ไม่เจอปัญหาอะไรเลย โอเค พอผ่านไปได้อยู่

สรุป

เหตุที่เราย้ายจาก Gatsby.js เป็นเพราะเราต้องการพาเว็บ arnondora.in.th ไปอีกขั้นหนึ่ง ด้วยการลง Content ที่บ่อยมากขึ้น มีการเปลี่ยนแปลง Content มากขึ้น รวมไปถึงการทำงานกับ Sponsor ทำให้เราต้องการระบบที่สามารถอัพเดท Content ได้รวดเร็วมากขึ้นกว่าเมื่อก่อน แน่นอนว่า สิ่งที่ต้องแลกคือ เราจำเป็นต้องใช้ Hosting เฉพาะที่มีราคาแพงกว่าเดิม แต่สำหรับเว็บเรา เรา Host อยู่ในบ้านของเราเอง ทำให้ต้นทุนในการ Operate ลดลงกว่าการใช้ Shared-Hosting แน่นอน และนี่แหละคือเหตุผลสำหรับการย้ายของเรา เราไม่ได้บอกนะว่า Ghost ดีกว่าทั้งหมด แต่มันเหมาะกับการใช้งานของเรามากกว่าแค่นั้น

Read Next...

ทำไมภาษา Programming สมัยใหม่ ถึงไม่มี Pointer Concept

ทำไมภาษา Programming สมัยใหม่ ถึงไม่มี Pointer Concept

ทำไมภาษาบางตัวอย่างภาษา C มี Pointer ในขณะที่ภาษาใหม่ ๆ หลายตัว ไม่มี ทำไมการ Implement Concept หรือเครื่องมือเหล่านี้ถึงไม่ได้รับความนิยม วันนี้เราจะมาเล่าข้อดีข้อเสียของ Feature นี้ในภาษา Programming กัน...

รีวิว Yubikey C Bio ตัวใหม่ มีลายนิ้วมือแล้วนะ

รีวิว Yubikey C Bio ตัวใหม่ มีลายนิ้วมือแล้วนะ

หลังจากรอบก่อน เราซื้อ Yubikey มา เวลาผ่านไป ตอนนี้เขามีรุ่นใหม่ออกมาแล้ว บอกเลยว่า ตอนที่เห็น คืออยากได้มาก ๆ จนเวลาผ่านไปชาติเศษ ในที่สุด เราได้มันมาแล้ว กับ Yubikey C Bio จะมีอะไรใหม่ อะไรสนุก ๆ พิเศษกว่าตัวอื่นอย่างไร วันนี้เราจะมารีวิวให้ได้อ่านกัน...

Synology NAS และ SSD Cache จำเป็นจริง ๆ เหรอ เหมาะกับระบบแบบใด

Synology NAS และ SSD Cache จำเป็นจริง ๆ เหรอ เหมาะกับระบบแบบใด

ใน Synology NAS มีความสามารถนึงที่น่าสนใจคือ การใช้ SSD เป็น Cache สำหรับระบบ ที่ทำให้ Performance ในการอ่านเขียน เร็วขึ้นกว่าเดิมมาก ๆ แน่นอนว่า เราลองละ วันนี้เราจะมาเล่าให้อ่านกันว่า หากใครคิดที่จะทำ มันเหมาะ หรือ ไม่เหมาะกับการใช้งานของเรา...

รีวิว Photomator App แต่งรูปรับจบทั้ง macOS, iPad และ iPhone มี AI ด้วยนะ

รีวิว Photomator App แต่งรูปรับจบทั้ง macOS, iPad และ iPhone มี AI ด้วยนะ

หลายปีที่ผ่านมาพยายามหาโปรแกรมอื่นมาแทน Lightroom เพื่อจะได้ไม่ต้องจ่าย Subscription จนวันนี้เรามาเจอแล้ว ตัวเต่งเข้ามาที่หนึ่งตอนนี้เลย กับ Photomator จะแทนได้มั้ย อ่านได้ในรีวิวนี้เลย...