วิธี deploy บล็อกสแตติกแบบฟรี ๆ ด้วย Astro
ตอนใช้บล็อกแบบไดนามิกนี่ผมกลัวตลอดว่าลืมต่ออายุเซิร์ฟเวอร์หรือไม่ก็เจอปัญหาตอนอัปเกรดโปรแกรม พอได้มารู้จักบล็อกสแตติกถึงบางอ้อว่านี่แหละทางออกในอุดมคติ ลองเทียบ Hugo, Hexo กับ Astro อยู่พักนึง สุดท้ายก็เลือก Astro ครับ
ข้อดีของบล็อกสแตติก
- โฮสติ้งฟรี - นอกจากค่าชื่อโดเมนแล้ว บริษัทเทคเจ้าใหญ่ ๆ ก็มีบริการโฮสติ้งฟรีให้นักพัฒนารายบุคคลด้วย
- ไม่ต้องดูแลอะไรเลย - บทความเก็บไว้ในเครื่องเราเอง ขอแค่แพลตฟอร์มโฮสติ้งไม่ปิดตัวลง บล็อกก็อยู่ยาวไปตลอด
- เรนเดอร์ล่วงหน้า - บล็อกสแตติกจะสร้างไฟล์ HTML/CSS/JS แท้ ๆ ออกมาก่อน deploy ไม่มีแบ็กเอนด์ให้ปวดหัว
- เข้ากับ CDN - เพราะทุกอย่างเป็นไฟล์สแตติก เอาไปกระจายตาม edge node ทั่วโลก ผู้ใช้ก็โหลดกันระดับมิลลิวินาที
ทำไมถึงเลือก Astro
- สแตติกมาก่อน - สร้างไฟล์ HTML แท้ ๆ ไม่ต้องมีฐานข้อมูลหรือเซิร์ฟเวอร์
- ประสิทธิภาพดีเยี่ยม - ค่าเริ่มต้นไม่มี JavaScript เลย โหลดเร็วสุด ๆ
- ยืดหยุ่นสูง - รองรับ Markdown, MDX และการผสมเฟรมเวิร์กได้
- อีโคซิสเต็มคึกคัก - ชุมชนมีชีวิตชีวา เอกสารครบ มีปลั๊กอินให้เลือกเยอะ
ธีม Sintu แบบคอลัมน์เดียวสำหรับ Astro
เทมเพลตธีม Astro แบบคอลัมน์เดียวตัวนี้ผมออกแบบและสร้างเองเลยครับ ช่วงนี้เพิ่งให้ Hermes ย้ายมันจาก Typecho มาเป็น Astro ตอนย้ายก็อัปเกรดฟีเจอร์ไปหลายอย่าง โค้ดตอนนี้กระชับกว่าเดิมตั้งหนึ่งในสามเลยถือโอกาสนี้พูดถึงการที่ AI แพร่หลายขึ้นทำให้งานที่เคยยุ่งยากกลายเป็นเรื่องง่ายไปหมด ความคืบหน้าการพัฒนานี่แทบจะระดับเทพ คุณภาพโค้ดก็เกือบสมบูรณ์แบบ ทำให้ผมเข้าใกล้ระดับโปรแกรมเมอร์อัจฉริยะแบบสุด ๆ 😂
ไฮไลต์ฟีเจอร์
- ประสิทธิภาพสมบูรณ์แบบ - โหลดระดับมิลลิวินาที คะแนน Google Lighthouse ได้เต็ม 100 ทั้งมือถือและเดสก์ท็อป
- โหมดมืด - เพิ่มปุ่มสลับโหมดมืดไว้ข้างโลโก้
- รูปย่อซูมตอนชี้ - นอกจากจะซูมเข้าละเอียดแล้ว กดที่รูปยังพาไปหน้าบทความได้ด้วย
- มือถือไม่โหลดรูปตัวอย่าง - ปรับการโหลดรีซอร์สตามขนาดหน้าจอ ช่วยประหยัดแบนด์วิดท์
- ประมวลผลรูปผ่าน Aliyun OSS - รูปถูกประมวลผลผ่าน OSS โดยเติมพารามิเตอร์หลัง HTML เรนเดอร์เสร็จ ช่วยประหยัดแบนด์วิดท์
- ปรับแต่งประสิทธิภาพ - รวม CSS ผ่าน Vite และทำ lazy loading รูป
- ดีไซน์ตอบสนอง - ปรับให้เข้ากับเดสก์ท็อปและมือถือได้สมบูรณ์แบบด้วยระบบกริดเดียวกัน
- กล่องคอมเมนต์ - ต่อผ่านโซลูชัน Twikoo ตัวทางการ
ขั้นตอนการเผยแพร่
- เขียนบทความ Markdown ในเครื่อง
- ส่งข้อความหา Hermes Agent ให้พุชขึ้น GitHub repository (หรือจะพุชเองผ่าน GitHub ก็ได้)
- Tencent EdgeOne, Vercel, Netlify หรือ Cloudflare Pages จะดึงอัปเดตไปบิลด์อัตโนมัติ
- deploy ขึ้น CDN node ทั่วโลกให้เองเลย
โอเพนซอร์ส
ธีมนี้เป็นโอเพนซอร์สนะครับ ถ้าชอบก็เลี้ยงกาแฟผู้เขียนได้เหมือนกัน: