การสร้างหน้าเว็บด้วย Hugo framework เป็นกระบวนการที่ตรงไปตรงมา ซึ่งได้รับความนิยมจากความเร็วและการสร้างเว็บไซต์แบบสแตติกที่แข็งแกร่ง ไม่เพียงแต่ Hugo framework จะมอบวิธีการสร้างหน้าเว็บที่มีประสิทธิภาพเท่านั้น แต่ยังให้ความยืดหยุ่นในแง่ของการปรับแต่งด้วยนะ ในที่นี้เราจะแนะนำคุณตลอดขั้นตอนต่างๆ เพื่อช่วยให้คุณสร้างเว็บเพจของคุณเอง
ก่อนอื่น คุณต้องติดตั้ง Hugo ก่อน Hugo สามารถติดตั้งได้บน macOS, Windows และ Linux คุณสามารถดาวน์โหลด Hugo ได้จาก Hugo Releases และทำตามคำแนะนำในการติดตั้งสำหรับระบบปฏิบัติการเฉพาะของคุณ
หลังจากติดตั้ง Hugo แล้ว คุณสามารถสร้างไซต์ใหม่ด้วยคำสั่ง Hugo ได้เลย:
hugo new site mysite
คำสั่งนี้จะสร้างไดเร็กทอรีใหม่ชื่อ “mysite”
ขั้นตอนต่อไปคือการเพิ่มธีมให้กับไซต์ของคุณ Hugo มีธีมให้เลือกมากมายใน Themes Gallery หากต้องการเพิ่มธีม ให้ไปที่โฟลเดอร์ไซต์ของคุณแล้วพิมพ์:
git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
สิ่งนี้จะเพิ่มธีม Ananke เป็นตัวอย่าง
ตอนนี้ ให้เพิ่มธีมลงในการกำหนดค่าไซต์ ไฟล์กำหนดค่าของไซต์จะอยู่ในไดเร็กทอรีรากของเว็บไซต์ของคุณ เปิดไฟล์ config.toml แล้วเพิ่มบรรทัด theme = "ananke"
ตอนนี้คุณพร้อมที่จะเพิ่มเนื้อหาลงในไซต์ของคุณแล้ว ด้วย Hugo คุณสามารถเพิ่มเนื้อหาได้โดยการเพิ่มไฟล์ Markdown ในไดเร็กทอรี content
hugo new posts/my-first-post.md
คำสั่งข้างต้นจะสร้างไฟล์ markdown ภายในไดเร็กทอรี post ตอนนี้คุณสามารถเปิดไฟล์ markdown นี้ด้วยโปรแกรมแก้ไขข้อความใดก็ได้แล้วเริ่มเขียนเนื้อหาของคุณได้เลย
คุณสามารถเริ่มเซิร์ฟเวอร์ Hugo โดยเปิดใช้งานฉบับร่างได้โดยพิมพ์ hugo server -D สิ่งนี้จะเริ่มเซิร์ฟเวอร์ Hugo และเฝ้าดูไฟล์ของคุณอย่างต่อเนื่องเพื่อหาการเปลี่ยนแปลง
ตอนนี้ เปิดเว็บเบราว์เซอร์แล้วไปที่ localhost:1313 Voila! คุณควรเห็นโพสต์ใหม่ของคุณบนเว็บไซต์ของคุณ
จำไว้ว่าการสร้างหน้าเว็บด้วย Hugo framework ต้องใช้การฝึกฝนและการสำรวจ ยิ่งคุณใช้ Hugo มากเท่าไหร่ คุณก็จะยิ่งคุ้นเคยกับคุณสมบัติและความแตกต่างของมันมากขึ้นเท่านั้น
โลกของการสร้างเว็บไซต์แบบสแตติกนั้นกว้างใหญ่ และ Hugo เป็นหนึ่งในเครื่องมือที่ดีที่สุดที่คุณมี ความเร็ว ประสิทธิภาพ และความยืดหยุ่นทำให้เป็นตัวเลือกอันดับต้น ๆ สำหรับนักพัฒนาที่ต้องการสร้างเว็บไซต์คุณภาพสูง
ขอให้สนุกกับการเขียนโค้ดนะ!
สำหรับรายละเอียดเพิ่มเติม โปรดดู Hugo Documentation