GitHub Pages: เปลี่ยน Repository ให้เป็นเว็บไซต์ Static

GitHub Pages คือบริการฟรีจาก GitHub ที่ช่วยแปลงโค้ดใน Repository ให้กลายเป็นเว็บไซต์แบบ Static โดยไม่ต้องเสียค่าใช้จ่าย เหมาะสำหรับโปรเจกต์ส่วนตัว, แฟ้มผลงาน, บล็อกง่ายๆ หรือเอาไว้ทำเป็นหน้าเพจเอกสารอธิบายการใช้งานโปรแกรม (manual)

ทำความเข้าใจ GitHub Pages และ Static Website

GitHub Pages ถูกออกแบบมาเพื่อโฮสต์ เว็บไซต์แบบ Static ซึ่งหมายถึงเว็บไซต์ที่ประกอบด้วยไฟล์ HTML, CSS และ JavaScript ล้วนๆ ไม่มีส่วนที่ต้องประมวลผลจากฝั่งเซิร์ฟเวอร์ (เช่น PHP, Python, Ruby) หรือฐานข้อมูลใดๆ รองรับการสร้างบล็อกง่ายๆ, หน้าโปรไฟล์ส่วนตัว, เว็บไซต์ธุรกิจขนาดเล็ก หรือ Landing Page

การทำงานของ GitHub Pages คือ จะแปลงไฟล์ที่อยู่ใน GitHub Repository ให้สามารถเข้าถึงผ่านเว็บเบราว์เซอร์ เหมือนกับการนำไฟล์ไปวางไว้ในเว็บเซิร์ฟเวอร์เพื่อให้คนทั่วไปสามารถเข้าชมได้ (บทความที่เกี่ยวข้องก่อนหน้านี้ : ลองทำเว็บเพจ แชร์บัญชีโซเชียลฟรี และให้ Gemini สร้างเนื้อหาให้)

ขั้นตอนการเปลี่ยน Repository เป็นเว็บไซต์ Static

1. การเตรียม Repository

หากยังไม่เคยมีบัญชี GitHub ให้สมัครใหม่ และถ้าหากยังไม่เคยสร้าง Repository ก็ให้สร้างขึ้นมาใหม่ด้วย จากนั้นอัปโหลดไฟล์เว็บไซต์ทั้งหมดเข้าไปในนั้น เช่นไฟล์ index.html ไฟล์ css หรือไฟล์ javascript รวมถึงรูปภาพที่จะแสดงในเว็บไซต์ โดยให้ไฟล์ index.html อยู่ในตำแหน่ง Root ของ Repository เพื่อเวลาเรียกดูผ่านเบราว์เซอร์จะถูกนำมาแสดง

2. การกำหนดค่า GitHub Pages

เมื่อเตรียมไฟล์ต่างๆ พร้อมแล้ว ขั้นตอนต่อไปคือ เลือกเมนู Settings ของ Repository ในแถบเมนูด้านซ้ายมือ ให้คลิก Pages เพื่อตั้งค่าเกี่ยวกับ GitHub Pages

จากนั้นในส่วนของ Build and deployment ให้เลือก Branch ที่จะใช้เป็น Source สำหรับเว็บไซต์ โดยทั่วไปแล้วจะเป็น main หรือ master และสำหรับโฟลเดอร์ หากไฟล์ index.html อยู่ที่ Root ของ Repository ให้เลือก /root แต่หากเว็บไซต์อยู่ในโฟลเดอร์ย่อย เช่น docs/ ต้องเลือก /docs หรือโฟลเดอร์อื่นที่ต้องการ จากนั้นกด Save

3. การเผยแพร่และการเข้าถึงเว็บไซต์

เมื่อกำหนดค่า GitHub Pages ในหัวข้อ Settings ของ Repository เรียบร้อยแล้ว จะสามารถเข้าถึงเว็บไซต์ดังกล่าวในรูปแบบ URL ดังนี้

https://user-name.github.io/repository-name

4. การตั้งค่า Custom Domain (ตัวเลือกเพิ่มเติม)

เมื่อได้ URL ที่เป็นค่าเริ่มต้นของ GitHub Pages แล้ว ยังสามารถกำหนด Custom Domain เพื่อให้เว็บไซต์นี้ เข้าถึงได้ง่ายขึ้น โดยการกำหนด DNS ของโดเมนที่มีอยู่ ให้ชี้มาที่ GitHub Pages อันนี้

ในหน้า Settings > Pages จะมีหัวข้อ Custom domain ให้กรอกโดเมนที่ต้องการใช้ เช่น your-domain.com

หลังจากนั้นให้ไปแก้ไขข้อมูล DNS ของโดเมน โดยกำหนด A record จำนวน 4 รายการดังนี้

หากทุกอย่างถูกต้อง จะสามารถเปิดเว็บไซต์ GitHub Pages ผ่าน Custom Domain ที่เป็น your-domain.com ได้เลย

ข้อมูลเพิ่มเติม:

• https://github.com
• https://pages.github.com