Build + Deploy Hugo ขึ้น GitHub Pages

Build/Deploy Hugo to GitHub Pages

เกริ่นก่อนว่า บทความนี้เป็น Part ต่อของ [Develop] สร้าง Blog แบบคลู ๆ ด้วย Markdown

ในบทความนี้จะกล่าวถึงขั้นตอนการ Build และ Deploy ขึ้น GitHub Pages นะครับ ส่วนการสร้าง blog ด้วย markdown กดลิงค์ด้านบนเลย

Step แรก สร้าง Repository บน GitHub

เนื่องจากว่าเราต้องการให้ blog ของเราเป็น website ที่คนอื่นสามารถเข้ามาดูได้ ซึ่งอันที่จริงแล้วเราจะทำ server เอง หรือท่ายาก ๆ cluster อะไรบ้าบอ ก็ได้

เพียงแต่ว่าผมขี้เกียจมากเลย ใช้ github เนื่องจากง่าย เร็ว และใช้แม่งทุกวันอยู่แล้ว ตามนั้น

• ก่อนอื่นเลย ก็สร้าง repository แบบ public โดยตั้งชื่อ Repo ตามที่เราต้องการ ไม่ต้องตามผมก็ได้ ตามใจตัวเอง ชีวิตเป็นของเรา

หลังจากนั้นก็พักไว้ก่อน เดี๋ยวมาดูอีกที

Step สอง ทำการ Build Hugo

โดยก่อนที่เราจะ Build ต้องเข้าใจก่อนว่า เรากำลัง Deploy ของขึ้น GitHub Page ดังนั้น ถ้าเป็นไปได้ กันตัวเองงงตอนกลับมาแก้หรือเขียนเพิ่ม ก็ทำการแยก folder ไว้ซะ อันนึงสำหรับ Production อีกอัน Dev ว่ากันไป

• โดยตอนนี้ Path ที่ทำจะอยู่ตามนี้นะครับ

• สร้าง folder สำหรับการ build/deploy

mkdir hugo-build

• หลังจากนั้นก็กลับไปที่ path ของ project เรา

แล้ว cmd ตามด้านล่างนี้

hugo -d ../../hugo-build

• โดย hugo ก็คือคำสั่ง build ของ Hugo ถ้าไม่กำหนด path จะมี folder ชื่อ public ขึ้นมาใน path นั้น ๆ
• -d หมายถึง destination ว่าจะเก็บ build file ไว้ที่ไหน
• หลังจาก cmd ไปก็จะมี log ออกมาว่าส่วนไหนโดนอะไรไปบ้าง

• คราวนี้กลับมาดู folder ที่เราทำไว้เพื่อการ build โดยเฉพาะ ว่ามีอะไรเกิดขึ้นบ้าง

ก็จะพบว่า Blog ของเราได้ผ่านการทำ build แล้ว pack จะมาอยู่ที่นี่เลย

ถ้าใครติดตรงนี้ ให้ลองเช็ค Path/Directory ดูนะครับ

Step สาม Deploy into GitHub

หลังจากที่ผ่านการสร้าง Repo และ Build แล้ว ก็ถึงเวลาว่าเอาสิ่งที่ทำเราทำทั้งหมด ไปแสดงให้ชาวโลกได้รับรู้ ว่า Noob Dev ก็มีอยู่จริงบนโลก

• อย่างแรกก็ทำการ Git init ก่อน

git init 
git add .
git commit -m "fisrt commit"
git remote add origin https://github.com/noobmaster6996/noobmaster6996.github.io.git
git push -u origin master

• โดย git init ก็คือ ทำให้เราใช้ git ได้ใน path นั้น
• git add ก็คือ add . ก็คือ add ทุกอย่างใน path ที่เราอยู่ ณ ตอนนั้น
• ส่วน git commit อันนี้ ก็ตามชื่อคำสั่ง จะพิมอะไรกวนๆ ไปก็ได้ ถ้าไม่เกรงใจคนที่มาอ่านต่อ หรือ ถ้าไม่อยาก add ก็ใช้ -am ได้นะครับ
• git remote add origin อันนี้ก็คือการทำให้ git ของเราที่อยู่ local สามารถติดต่อกับ repository ของ github ได้
• และสุดท้าย git push ก็คืิอ push สิ่งที่เรา add มาให้ไปอยู่บน repository ของ github

ซึ่งขั้นตอนนี้มี tutorial ให้อยู่แล้ว เมื่อเราทำ step แรกที่สร้าง repository เสร็จ

• และเมื่อเรากลับเข้าไปดูใน github ก็จะเห็นว่า repo ที่เราสร้างไว้มีไฟล์ โฟลเดอร์ต่าง ๆ นานาแล้ว

Step สุดท้าย ก็คือเข้าไปดูเว็บเราบน domain GitHub

ก่อนอื่นให้เราทำการตั้งค่า Repository ของเราให้เป็น Github Pages ซะก่อน

• ในกรณีที่ชื่อ repository ของเราเป็น format ตามาตรฐานของ GitHub Pages

<username>.github.io

ก็สามารถใช้ได้ทันทีเลยครับ

• แต่ถ้ากรณีที่เราเปิด Repo มาแค่จะทำเป็น Page เฉยๆ แบบด้านล่าง ก็มีข้อควรระวังเรื่อง Path กับ permalink , https เป็นต้น แต่โดยทั่วไปใช้งานได้ปกติ

<username>.github.io/<repository_name>

• เพื่อความแน่ใจ ลองเข้าไปที่ Settings ของ Repository แล้วไปที่ GitHub Pages

• จะเห็นว่า GitHub Pages ทำงานแล้ว โดยอ้างอิงจาก master branch
• โอเคงั้นลองเข้าไปกันเลย noobmaster6996.github.io

• เรียบร้อยง่อยสุด ๆ ไม่ได้แต่งอะไรมากแต่ใช้งานได้ คุ้มค่ากับเวลาที่เสียไปอันน้อยนิด อิอิ

เนื่องด้วย ผมขี้เกียจ จะไม่มีการทำ CI/CD ใด ๆ ทั้งนั้น

ในบทความไม่ได้ใช้ gh-pages แต่ถ้าใครจะใช้ก็แค่สร้าง branch แล้วไปเปลี่ยน settings ให้อ้างอิงจาก branch ที่เราต้องการเลยครับ

สำหรับคนที่ต้องการดู source code คลิกที่นี่เลยครับ

ถ้าใครอ่านจนจบ ขอบคุณมากครับ