Jun 9th, 2022
ที่มาที่ไปของการ Rebuild blog ครั้งนี้ก็คือเริ่มตั้งแต่ปีที่แล้ว เป็นปีของการเรียนรู้ React.js เราก็เลยคิดว่าจะทำยังไงดีนะ ที่จะทำให้เรียนแล้วได้ใช้ด้วย การเรียนที่ได้ผลคือต้องทำไปด้วย Blog นี้เลยเป็นที่ลองของ โพสต์นี้ก็เลยจะเล่าถึงการ Rebuild blog นี้ค่ะว่าใช้เทคโนโลยีอะไรบ้าง
Blog นี้ทำจาก Next.js และเป็นการลองใช้ Mantine ซึ่งเป็น React component ก่อนหน้านี้เราใช้ MUI คราวนี้ก็เลยอยากลองเป็น Mantine บ้าง เหตุผลที่เลือก Mantine ก็เพราะว่ามันมี Plugin หลายตัวที่น่าสนใจ เช่น Notification system ส่วนตัวคิดว่ามัน ดึ๋งดึ๋ง วืบวาบ น่าใช้มาก จัดการได้ดีเลยทีเดียว และ Prism code highlight สำหรับคนทำ Blog สายเดฟ น่าจะชอบมาก เพราะมี feature hignlight code, copy code, สลับ tab code แต่ละภาษาได้ ซึ่งก็ยังไม่ได้ลองจริงจัง ต้องขอเวลาไปลองใช้อีกทีก่อนนะคะ แล้วจะกลับมาเล่าให้ฟัง 🙂
ส่วน Style ก็มี Tailwind เข้ามาช่วย ในการจัด Layout ของบทความ เราก็ใช้ Plugin Tailwind Typography
การจัดการ content ต่างๆ เราใช้ GraphCMS ค่ะ ซึ่งเป็น HeadlessCMS เราสามารถออกแบบ schema ได้เอง ตัวนี้จะมี Rich text editor ช่วยให้เราเขียน content ได้ง่ายมากขึ้น
ส่วนการเริ่มโปรเจค install ของต่างๆ เราก็ใช้ Superplate เป็นตัวช่วยลงของที่ต้องใช้หลายๆ ตัว เช่น UI framework, CSS Preprocessor, State management, Testing Framework บางตัวเราก็ลงเผื่อมา เอามาลองใช้ใน blog นี้ แต่ข้อเสียของ Superplate คือ มันยังไม่อัพเดทเวอร์ชั่น React, TailwindCSS, Next.js เป็นเวอร์ชั่นใหม่ เราต้องมาอัพเดทเองอีกทีค่ะ
การ Setup project โดยใช้ Superplate
เมื่อ Setup เสร็จแล้ว run project
สำหรับการ Deploy และ Hosting ใช้ Netlify เรา commit code ไปที่ Github ปุ๊บ มันก็จะทำการ Build และ Deploy ให้อัตโนมัติค่ะ
หน้าเว็บหลัง Rebuilding (Test drive)
ส่วน Comment section ใช้ Giscus ซึ่งเป็น comments system ที่สร้างจาก GitHub Discussions ค่ะ