Devahoy กำลังจะเปลี่ยนมาใช้ Gatsby แล้วจ้า 🔥

สวัสดีครับ ห่างหายไปนาน ทั้งบล็อคส่วนตัว ทั้ง Devahoy หรือ Medium ก็ยุ่งๆนิดๆ วันนี้เลยจะมาเขียนบล็อคนี้เป็นบล็อคสั้นๆละกันนะครับ คือผมกำลังเปลี่ยนเว็บบล็อคเดิม https://devahoy.com ที่ใช้ Middleman เป็นตัว Static Site Generator

มาใช้ Gatsby ครับ

ซึ่งเหตุผลหลักๆเลยคือ

  • อยากลองใช้ Gatsby เปลี่ยนจาก Ruby stack เป็น JavaScript stack
  • เป็น React based
  • ดู Performance, Plugin และ Ecosystem แล้ว Gatsby ทำมาดีเลย

ขั้นตอนการเปลี่ยน

ก่อนการเปลี่ยน ผมมาคิดไว้แล้วว่า จะแค่เปลี่ยน Stack หลังบ้าน ซึ่งสุดท้ายแล้ว ทั้งสองตัวผลลัพธ์มันคือ Static Web ธรรมดานั่นแหละ ตัว End User ไม่น่าจะเห็นการเปลี่ยนแปลง (อาจจะมีบ้างที่หน้าเว็บโหลดไวขึ้น มี PWA ที่ตอนแรกไม่ได้ทำรองรับ)

แต่ก็ไหนๆ จะเปลี่ยนแล้ว ผมก็เลยกะว่าจะ Redesign มันซักนิดนึง เน้นเรียบง่ายละกัน ก็คงไม่มีอะไรมาก มีแค่หน้า Index หน้า Blog Post และก็พวกหน้า About แค่นั้นเอง (ไม่ต้องคิดเยอะ ฮ่าๆ)

เริ่มจาก ผมใช้ตัว​ Starter Template ชื่อว่า Gatsby-starter-blog (ตัวเดียวกับบล็อคของ Dan ใช้เลย)

ซึ่งจริงๆ fork ตัว starter-blog มาแล้วปรับแต่ง ก็เป็นอะไรที่ง่ายมากๆ แถมตัว Devahoy เดิมก็เป็น Markdown based เรียกได้ว่า ก็อปปี้ folder content มาใส่ ก็จบเลย

ซึ่งตัว starter-blog มีตัว typography.js ที่ดีมาก เอาไว้จัดการพวก Style ต่างๆ (Spacing, sizing, theme, color ต่างๆ) ลองใช้ดูครับ อาจจะชื่นชอบ

กำลังเริ่มทำพวก Components ต่างๆ

เรียนรู้ GraphQL

การได้เขียน Gatsby ทำให้ต้องมาเรียนรู้การใช้ GraphQL อยู่พอสมควร แต่หลักๆแล้ว แค่พอรู้การ Query ก็เพียงพอสำหรับการใช้งานเบื้องต้นแล้วครับ (แค่ใช้ Query บทความ มี Condition หรือ Query รูปภาพได้ ก็โอเคแล้ว)

ต่อมา Gatsby จะ build-in รองรับ การ Query GraphQL ได้เลย และผลลัพธ์มันจะถูก pass มาเป็น Props ให้กับ Component นั้นได้เลย แต่ก็จะเฉพาะ Component ที่เป็น Pages ต่างๆ (โฟลเดอร์ pages) แต่ถ้าเราจะทำ Custom Component เอง และอยากเข้าถึง data จากการ Query เราก็ต้องใช้ StaticQuery


เริ่มแยกส่วนต่างๆเป็น Components

ต่อมาผมเริ่มแยก Component ออกมา เช่น ส่วน Header, Footer ส่วนที่เป็น Latest Post, ส่วน Author ส่วน Meta Post ของบทความ หรือส่วน Share, Pagination ต่างๆ แต่สิ่งที่ชวนปวดหัวนิดๆคือ ขี้เกียจนั่งเขียน Query GraphQL ก็ใช้วิธี ก็อปปี้ Component เก่าๆมาปรับแก้ 😃

เช่นส่วน Author ก็ Query รูป และมี Fixed Image ไว้

ที่เหลือก็คิดว่า มีปรับนิดๆหน่อย เช่น ของเก่า ใช้ jQuery และมีพวก Condition เช่น scroll, handle logic บางตัว ก็จะเปลี่ยนไปใช้ React และบาง feature อันไหนไม่จำเป็นก็จะลบๆมันก่อน เน้น Clean เรียบง่ายไว้ก่อน

ต่อมาก็ Syntax Highlighter เป็นบล็อคเกี่ยวกับ Programming ก็ขาดไม่ได้ ตัว Middleman ผมใช้ rouge พอมาเป็น Gatsby ก็เลยเลือกใช้ Prism.js

ส่วน Stylesheet จากเมื่อก่อนใช้ Bourbon, Neat เป็น Mixins (ตอนนั้นใช้เพราะชอบ Animation มันเขียนสั้นดี) ตอนนี้ก็คงคิดว่าไม่ใช้แล้ว เขียน SCSS เอง โดย based on Skeleton เหมือนเดิมละกัน


Plugin ดีเลิศ

สิ่งที่ชอบสำหรับ Gatsby คือมี Plugin ดีมาก ตอบโจทย์เกือบทุกอย่างที่ต้องการ หลักๆเลยก็จะมีplugin จำพวก Transform เช่นแปลง Markdown แปลง Image ต่างๆพวก image-shape, gatsby-image, gatsby-remark ไรพวกนี้ และอีกพวกคือ Source Plugin เอาไว้ดึง local data เช่นพวก source-filesystem เอาไว้อ่านไฟล์ local ต่างๆ


สุดท้าย โพสนี้เขียนไว้สั้นๆ ว่ากำลังเปลี่ยนมาใช้ Gatsby เดี๋ยวเสร็จเมื่อไหร่ จะมาโพสบอก และสรุป Stack ขั้นตอนการเปลี่ยน แบบละเอียดอีกทีนึงเนอะ (เป้าหมายคือไม่เกิน 2อาทิตย์ ถ้ามีเวลาอะนะ) อันนี้เอาแบบคร่าวๆไปก่อน เพราะผมก็เพิ่งลอง เพิ่งเปลี่ยนได้ 2วันเอง ฮ่าๆ

Happy Coding ❤️