สวัสดี Hugo

เว็บไซต์นี้ย้ายจาก WordPress มาเป็น Hugo แล้วครับ 🎉

ผมรู้สึกว่า WordPress มันเยอะไปสำหรับบล็อกเล็กๆ แบบนี้ เลยมองหาตัวเลือกอื่นแทน ตอนแรกที่สนใจคือ Medium แต่ลองแล้วไม่ชอบเพราะปรับแต่งอะไรได้ไม่เยอะ สุดท้ายมาลงเอยที่ static site generator อย่าง Hugo ครับ

ทำไมถึงเลือก Hugo?

หน้าแรก Hugo

ตอนตัดสินใจย้าย ผมมีตัวเลือกที่เป็น static site generator อยู่ 3 ตัวคือ

แต่ที่ตัดสินใจเลือก Hugo เพราะ setup ง่ายสุด ใช้แค่ไฟล์เดียวก็พร้อมใช้งานแล้ว ไม่ต้องมี dependencies อื่น ฟีเจอร์ต่างๆ ก็มีครบ และถ้าเทียบกัน 3 ตัวนี้ Hugo ยังทำเวลา build เร็วสุดอีกด้วย

สร้างธีม

Hugo มีระบบธีมให้เราปรับแต่งเว็บไซต์ได้ง่ายๆ แถมยังมีธีมให้เลือกใช้เพียบ แต่ก็ไม่ถูกใจเท่าสร้างขึ้นมาเองครับ 🤣

ผมใช้ Bulma เป็น CSS Framework ที่เลือก Bulma เพราะไม่ต้องใช้ JavaScript ช่วยให้เว็บเบาลง นำมาใช้ร่วมกับ Hugo Pipes ที่ช่วยจัดการให้อัตโนมัติทั้ง compile, bundle, minify และสร้าง fingerprint เป็นอีกหนึ่งฟีเจอร์ของ Hugo ที่เป็นประโยชน์มาก 👍

ฟอนต์

ส่วนฟอนต์ที่เลือกใช้ในบล็อกนี้คือ IBM Plex Thai เป็นฟอนต์หลัก จริงๆฟอนต์นี้มีแบบมีหัวด้วย (IBM Plex Thai Looped) แต่ผมรู้สึกว่ามันอ่านยากไปนิด เลยตัดสินใจใช้ฟอนต์ Sarabun เป็นฟอนต์เนื้อหาแทน

ทั้งสองเป็นฟอนต์โอเพนซอร์สและใช้ได้ฟรี ด้านล่างนี้เป็นตัวอย่างฟอนต์ IBM Plex Thai และ IBM Plex Thai Looped ส่วนฟอนต์ Sarabun ก็ตามที่อ่านอยู่นี้เลย

มี dark theme ด้วยนะ 🌙

ธีมนี้มีฟีเจอร์เล็กๆ 🤔 คือรองรับธีมสีมืดหรือ dark theme ด้วย ลองคลิกบนปุ่ม “ตั้งค่าธีม” ที่แถบเมนูด้านบน หรือคลิกที่นี่ก็ได้ครับ 👈

และนอกจากธีมสีมืดแล้ว ยังมีตัวเลือกให้ใช้ฟอนต์ระบบแทนฟอนต์สารบัญ สำหรับคนที่ไม่ชอบหรือรู้สึกว่าอ่านยากด้วยครับ

โฮสต์บน Netlify

หน้าแรก Netlify

ผมเลือกโฮสต์เว็บนี้บน Netlify ซึ่งเป็นบริการโฮสต์ที่ออกแบบมาสำหรับ static site โดยเฉพาะ รวมถึงเป็น CI ในตัว เพียงแค่เชื่อมต่อกับบริการ GitHub แล้วตั้งค่า build command เพียงแค่นี้เวลาเรา push ขึ้น GitHub ตัว Netlify จะจัดการ build และโฮสต์เว็บของเราให้อัตโนมัติ

ลำดับการทำงานของ Netlify

นอกจากนี้แล้ว Netlify ยังมีฟีเจอร์เช่น

  • branch deploy และ deploy preview
  • ระบบ Network และ CDN (Netlify Edge)
  • ใช้โดเมนของเราเอง (custom domain)
  • HTTPS อัตโนมัติ (Let’s Encrypt)
  • กำหนด HTTP header และตั้งค่า redirect

และอื่นๆ อีกเพียบ และที่สำคัญ ทั้งหมดนี้ฟรีครับ 🆓

ก็หวังว่าจะชอบบล็อกโฉมใหม่นี้กันนะครับ คิดเห็นอย่างไรคอมเมนต์ไว้ด้านล่างเลย หรือถ้าสนใจรายละเอียดเพิ่มเติม ดูเครื่องมือทั้งหมดที่ผมใช้สร้างเว็บไซต์นี้ได้ที่หน้าเกี่ยวกับ และซอร์สโค้ดทั้งหมดของเว็บไซต์นี้อยู่บน GitHub แวะเข้าไปชมกันได้ครับ 😄



ความคิดเห็น