Devahoy - Devahoy อัพเดทเว็บ เปลี่ยนมาใช้ Gatsby แล้วนะ

สวัสดีครับ ห่างหายบทความไปพักใหญ่ๆเลย วันนี้มาพร้อมกับบทความว่าด้วยเรื่อง Devahoy เปลี่ยนจาก Middleman มาเป็น Gatsby เรียบร้อยแล้ว หลังจากใช้เวลาปรับแก้อยู่นานมากๆ (จริงๆคือดองไว้นั่นเอง ฮ่าๆ)

ก็เลยจะมาเชียนบล็อกว่ามีอะไรเปลี่ยนบ้าง มีอะไรแก้ไปบ้าง

ภาพรวมของ Devahoy ด้วย Gatsby และ Note บางส่วน

ยังคงใช้ Github Pages เป็น Hosting
ใช้ Cloudflare ครอบอีกที แล้วชี้ไป Github Pages
ใช้ gatsby-starter-blog เป็น base แล้วนำมาปู้ยี้ปู้ยำซะเละเลย 55
ติดตั้ง gatsby-node-sass เพราะยังใช้ SCSS อยู่
ไฟล์ config ต่างๆที่เมื่อก่อนใช้ config.rb เป็น gatsby ก็ใช้ gatsby-config.js แทน
StaticQuery เอาไว้ใช้ Query กรณีไม่ใช่ Page Component (พวก custom component ทั้งหลาย ที่ไม่ได้อยู่ใน src/pages/**)
ภาพทั้งหมด ใช้ gatsby-image และ gatsby-plugin-sharp
ใช้ Prism เป็น Syntax Highlighter แทนตัวเก่า Pygment และ Rouge
Disqus comment ใช้เหมือนเดิม
URL Permalink ถูกเปลี่ยนใหม่
Page ต่างๆ จะมีการเปลี่ยนและทำใหม่ (กำลังทำ)
ปรับ Design ปรับแต่างหน้าเว็บต่างๆ แล้วแต่อารมณ์เจ้าของบล็อก ฮ่าๆ

Starter Template

ผมใช้ตัว gatsby-starter-blog เป็นตัว base ในการปรับแต่ง เป็น Boilerplate ที่เหมาะสำหรับทำ Blog มีการ Config ไว้ให้ระดับนึงแล้ว

ตัวอย่าง Blog ที่ใช้ Gatsby และ Open Source ไปดูโค๊ดได้ เช่น

แต่ตัว starter blog ใช้ library ที่ชื่อ typography.js ผมจัดการเอาออก และใช้ Style css ของตัวเอง ตอนนี้ยังใช้เป็น SCSS (อนาคตจะเปลี่ยนไปใช้ Styled Component)

Permalink

Permalink ทั้งหมดในเว็บถูกเปลี่ยน เนื่องจากเมื่อก่อนจะเป็น

/posts/{title}

ตอนนี้เปลี่ยนมาเป็น format

/blogs/{yyyy}/{mm}/{title}

ทำให้พวก Comment ต่างๆที่ผูกกับ Disqus ก็จะหาย (อาจจะต้องเสียเวลา Migrate comment ใน Disqus Admin กรณีเปลี่ยน URL)

หรือแม้แต่ใครเข้าหน้าเว็บจาก Search engine ต่างๆ ก็จะพบว่าหน้าที่ค้นหาไม่เจอ เพราะ URL เปลี่ยนนั่นเอง ข้อนี้ก็ต้องรอให้ Google index URL ใหม่ไปซะก่อน

ทำไมถึงเป็น Permalink? เพราะว่าต้องการให้ URL มันสื่อถึงว่า Blog นั้นถูก publish ครั้งแรกเมื่อไหร่ ง่ายต่อการอ่าน และง่ายต่อการ maintain รวมถึง URL จะไม่ซ้ำกันง่ายๆด้วย ก็แค่นี้เลยครับ :)

Migrate Blog posts

ข้อนี้อาจจะดูไม่ค่อยยุ่งยากมากนัก เนื่องจาก blog เก่าใช้ Middleman เป็น Static site generator อยู่แล้ว แถมข้อมูลทั้งหมดในบล็อกก็เป็น Markdown ทำให้เวลา Migrate มา Gatsby ไม่ยุ่งยากเท่าไหร่ มีเพิ่ม frontmatter เข้ามาไว้ในการ Query นิดหน่อยครับ

แล้วก็เปลี่ยนชื่อไฟล์ เป็น .md จากเมื่อก่อน สามารถเป็น extension อื่นได้ เช่น title.md.erb คือ compile ruby และ markdown ในตัวได้ (คล้ายๆกับ .mdx ที่ compile jsx และ markdown ในไฟล์เดียว)

Deployment

การ Deploy เป็นปัญหาอย่างหนึ่งที่ผมเจอในการทำ Gatsby เนื่องจาก ตอน build เพื่อขึ้น production ด้วย

gatsby build

ไฟล์ทั้งหมดจะถูก optimized และทำการ generate พวก thumbnail ต่างๆ และบล็อกนี้ก็มีรูปเยอะมาก ทำให้มัน generate thumbnail ออกมามีขนาดถึง 800MB เลยทีเดียว

ขั้นตอนต่อมาคือ จะอัพโหลดไฟล์ 800MB ทุกๆครั้งที่อัพเดท content และ build ใหม่เลยหรอ?

สิ่งที่ผมคิดเป็นไปได้คือ

ส่ง Netlify ให้มันจัดการให้หมด (ข้อนี้ลองรันแล้ว มัน timeout ก่อนเพราะว่ามัวแต่ gatsby build นาน เพราะว่าครั้งแรกไม่มี .cache อะไรเลย)
ส่งเข้า CI/CD Provider ซักตัว ผมเลือก SemaphoreCI จากนั้นให้มัน build แล้วก็ push ไปที่ Github Pages ที่ branch gh-pages (ข้อนี้ลองแล้ว ก็เหมือนจะ work แต่ว่า push ไฟล์ใหญ่ๆ ไปทุกๆครั้งที่อัพเดทข้อมูล)
อาจจะเพิ่ม public โฟลเดอร์ ไปไว้ใน git repository เลย (จากปกติ ignore ไว้) ยอมเพิ่มขนาด git size แล้วเวลา อัพเดท content ก็จะ build ผ่าน CI แล้วก็ push เฉพาะ files changed

ซึ่งทั้งหมดนี้ผมก็ยังไม่ได้ลอง และหาข้อสรุปว่าใช้วิธีไหนดีที่สุด

สรุป

ตอนนี้ผมก็ตั้งใจทำบล็อก พยายามจะมาอัพเดทบทความให้มากขึ้นกว่าเดิม เท่าที่จะเป็นไปได้ครับ อยากจะมีบทความใหม่ๆมาให้เพื่อนๆได้อ่าน มาจากทั้งการลองผิดลองถูก มาจากการ Research ลองเล่นนั่นนี่ไปเรื่อย รวมถึงตัวเว็บ ก็อาจจะเจอปัญหา error ต่างๆ หรือวันดีคืนดีอยากเปลี่ยน Layout เปลี่ยนสีเว็บ ก็อย่าแปลกใจนะครับ 😎 เพราะผมอยากมองว่าบล็อกมันคือ Product ตัวนึง ฉะนั้น Product มันไม่มีทางหยุดนิ่ง หยุดพัฒนาแน่นอน ก็จะมี Feature มีอัพเดทอยู่เรื่อยๆ โดยที่ยังคง launch ปกติ เพราะถ้าเราทำ Product ซักตัว พัฒนาไปเรื่อยๆ ไม่ยอม launch ไม่ยอมใช้งาน แล้วเราจะรู้ feedback จะ change อะไรได้ยังไง รอจนพร้อม ก็ไม่ได้ launch (ไม่มีคำว่าพร้อม หรือสมบูรณ์ 100%) ซึ่งผมชอบแนวทางแบบนี้มากกว่า

และใครมีข้อเสนอแนะ ติชม สอบถาม ก็มาพูดถึง ปรึกษากันได้ครับ ขอบคุณครับ

Happy Coding ♥️