สมุดบันทึก: การสร้างบล็อก

สวัสดีครับผู้อ่าน! 👋

ยินดีต้อนรับสู่บล็อกของผม! ผมชื่อหมู เป็นนักพัฒนาซอฟต์แวร์ (Software Developer) ทำงานมาประมาณ 2 ปีแล้ว ผมหลงใหลในการเรียนรู้สิ่งใหม่ๆ และแบ่งปันความรู้กับผู้อื่น ผมคิดที่จะเริ่มเขียนบล็อกมาระยะหนึ่งแล้ว และในที่สุดผมก็ตัดสินใจทำ ผมตื่นเต้นที่จะแบ่งปันการเดินทางของผมกับทุกคน

ปัญหาและกระบวนการพัฒนา

หน้าบ้าน (Frontend)

ทําไมผมถึงเลือก Astro? เมื่อผมเริ่มคิดเกี่ยวกับการเขียนบล็อก Static Site Generators (SSGs) ดูเหมือนจะเป็นทางเลือกที่ดี ตอนนั้นตัวเลือกของผมคือ Astro และ Hugo ผมเลือก Astro เพราะผมต้องการสร้างจากจุดเริ่มต้นและ Astro เพิ่งเปิดตัวเวอร์ชั่น 2.0 ซึ่งดูเหมือนจะสมบูรณ์แบบสําหรับบล็อกของผม มันมีคุณสมบัติเช่น Hybrid Rendering และ Content Collections ที่ผมพบว่าน่าสนใจ อย่างไรก็ตาม ในระหว่างที่ผม dev อยู่ framework Qwik ได้ปล่อยเวอร์ชั่น 1.0 ซึ่งผมอยากจะลอง แต่ผมตัดสินใจที่ทำอันนี้ให้เสร็จก่อนน แทนที่จะเริ่มใหม่

ผมประสบความสําเร็จในการใช้งานการ Lazy-load แม้ว่าผมจะไม่แน่ใจว่าผมทําอย่างถูกต้องหรือไม่ หากผู้อ่านตรวจสอบบล็อกของผมในหน้าแรกผู้อ่านจะสังเกตเห็นว่ามันโหลดด้วยไม่ได้โหลดด้วย JavaScript หรือน้อยมากๆ แต่เมื่อผู้อ่านคลิกที่ปุ่มธีมที่ด้านบนขวามันจะดาวน์โหลด JavaScript เพื่อเตรียมความพร้อมสําหรับการโต้ตอบของผู้อ่าน นั่นมันน่าตื่นเต้นใช่มั้ยครับ?

เมื่อเร็ว ๆ นี้ผมได้พบกับบล็อกที่สร้างขึ้นโดยใช้ Hugo และธีมที่สร้างไว้ล่วงหน้าชื่อPaperMod มันดูดีจริงๆซึ่งทําให้ผมตระหนักว่าการสร้างบล็อกตั้งแต่ต้นต้องใช้การใช้งานหลายอย่างเมื่อเทียบกับการใช้ Hugo

แต่ในท้ายที่สุด สิ่งที่สําคัญคือผมสนุกไปกับมัน (ใช่มั้ยครับ?🤔)

User Interface (UI) and User Experience (UX)

โอเค.. การออกแบบหน้าบ้านไม่ใช่สิ่งที่ผมถนัดสักเท่าไร Tailwind ด้วยแนวทางที่ขึ้นอยู่กับ class-based ดูเหมือนผมแทบไม่ต้องคิดเลยและผมไม่จำเป็นต้องมาเขียนเองแต่ละ class Flowbite เป็นต่อไปในตัวเลือกของผม - เมื่อพิจารณาถึงการขาดความสามารถทาง creative ของผมแล้ว Flowbite ดูเหมือนว่าจะเป็นตัวเลือกที่ไม่แย่

โดยรวมแล้ว CSS Stack นี้ควรจะทําให้ผมเริ่มต้นได้เร็ว แน่นอนเสมอมีพื้นที่สําหรับการ restyling ในอนาคต (บางทีนะ)🫠

เครื่องมือแสดงความคิดเห็น (Commenting Engine)

มีตัวเลือกมากมายสําหรับเครื่องมือแสดงความคิดเห็น เช่น giscus, utterances, remark42, และ disqus. ผู้อ่านอาจคาดเดาแล้วว่าผมได้เลือก Remark42, แต่มาคุยกันก่อนว่าทําไมผมไม่เลือกอย่างที่เหลือ

ทั้ง giscus และ utterances ใช้ GitHub เป็นส่วนหลังบ้าน ซึ่งไม่ตรงกับความชอบของผมในการจัดการข้อมูลเอง Disqus เป็นทางเลือกที่นิยม แต่มันเป็น ซอฟต์แวร์จำกัดสิทธิ์ (Closed Source) ซึ่งผมจะหลีกเลี่ยง นั่นที่ทําให้ผมเห็นเลือก Remark42 มันเป็นตัวเลือก โอเพนซอร์ส (Open Source) และเต็มไปด้วยคุณสมบัติ ส่วนที่ซับซ้อนคือการแก้ไข UI เพื่อให้ตรงกับธีมของบล็อกของผม

ความท้าทายหนึ่งที่มี Remark42 คือผมต้องโฮสต์มันเองและตั้งค่าเซิร์ฟเวอร์ SMTP เพื่อส่งอีเมล หลังจากทดลองผิดถูก วิธีการตั้งค่าเซิร์ฟเวอร์ SMTP บนเซิฟเวอร์ของผมโดยใช้ docker-mailserver มันดูเหมือนจะมากเกินไปในขั้นตอนนี้ ดังนั้นผมจึงตัดสินใจที่จะใช้ Amazon SES สําหรับตอนนี้

Newsletter

ตั้งแต่ผมกําลังใช้ Amazon SES สําหรับ Remark42 ผมตัดสินใจที่จะใช้มันสําหรับจดหมายข่าวของผมเช่นกัน ผมใช้ Listmonk เพื่อจัดการจดหมายข่าวของผม มันเป็นตัวจัดการรายชื่อจดหมายและรายชื่ออีเมลแบบโฮสติ้งออฟเวอร์ซอร์สและฟรี มันง่ายต่อการตั้งค่าและใช้งานและมีอินเตอร์เฟซที่สวยงาม ผมยังใช้ Turnstile เพื่อป้องกันไม่ให้บอทสมัครจดหมายข่าวของผม และแน่นอน ผมใช้ Partytown เพื่อโหลด JavaScript และ CSS ของ Listmonk

ท้ายที่สุดแล้ว

ตอนที่ผมเริ่มโครงการนี้ ผมไม่คิดว่ามันจะซับซ้อนหรือต้องการอะไรมากมายในการพัฒนา ผมคิดว่าผมทํางานด้านหน้าบ้านใน comfort zone ของผมเป็นเวลานานเกินไป เพราะที่ทํางานของผมไม่ได้อนุญาตให้ผมลองอะไรใหม่มากนัก

ประสบการณ์นี้สนุกและสนุกสนานทําให้ผมจําได้ว่าทําไมผมต้องการเป็นนักพัฒนาในตอนแรก มันฟื้นฟูความรักของผม สําหรับการเรียนรู้ตลอดชีวิตและลองสิ่งใหม่ ๆ ผมรอคอยที่จะท้าทายต่อไป! 🚀

หากมีคําถามหรือคําแนะนําใดๆ โปรดแจ้งให้ผมทราบในความคิดเห็นด้านล่าง ขอบคุณครับ 👋