วิธีเผยแพร่เว็บไซต์ฟรีด้วย GitHub Pages (เริ่มต้นกับเว็บไซต์สถิต)

ในซีรีส์แนะนำ Git/GitHub ที่ผ่านมา เราได้เรียนรู้ขั้นตอนทั้งหมดตั้งแต่การสร้างบัญชี, การใช้คำสั่งพื้นฐาน, ไปจนถึงขั้นตอนพื้นฐานของการพัฒนาแบบทีมโดยใช้ Branch กันแล้ว

ในบทความสุดท้ายของซีรีส์นี้ เราจะมาแนะนำฟังก์ชันที่ยอดเยี่ยมที่เรียกว่า GitHub Pages ซึ่งช่วยให้คุณสามารถเผยแพร่โปรเจกต์ที่คุณจัดการบน GitHub เป็นเว็บไซต์ให้คนทั่วโลกได้ชมฟรี เป็นวิธีที่เหมาะอย่างยิ่งสำหรับการเผยแพร่เว็บไซต์พอร์ตโฟลิโอ, หน้าเดโมของเว็บแอปที่คุณสร้างขึ้น และอื่นๆ มาเรียนรู้ขั้นตอนสุดท้ายนี้ให้เชี่ยวชาญ แล้วเผยแพร่ผลงานของคุณให้โลกได้เห็นกันเถอะ!

GitHub Pages คืออะไร? มันยอดเยี่ยมอย่างไร?

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

ข้อดีหลักๆ ของ GitHub Pages มีดังนี้:

• ฟรีโดยสมบูรณ์: หากเป็น Public Repository จะไม่มีค่าใช้จ่ายในการโฮสต์ใดๆ ทั้งสิ้น
• ตั้งค่าได้ง่ายอย่างน่าทึ่ง: คุณสามารถเผยแพร่เว็บไซต์ได้ด้วยการคลิกเพียงไม่กี่ครั้งจากหน้าจอการตั้งค่าของ Repository
• สามารถใช้โดเมนของตัวเองได้: คุณจะได้รับโดเมน `github.io` ฟรี แต่ก็สามารถตั้งค่าให้ใช้โดเมนที่คุณเป็นเจ้าของเองได้เช่นกัน
• การทำงานร่วมกับ Git เป็นไปอย่างราบรื่น: เพียงแค่ `git push` การเปลี่ยนแปลงจากเครื่องของคุณ เนื้อหาก็จะถูกอัปเดตบนเว็บไซต์ที่เผยแพร่อยู่โดยอัตโนมัติ

มี 2 วิธีในการเผยแพร่! ไซต์ผู้ใช้และไซต์โปรเจกต์

GitHub Pages มีวิธีการเผยแพร่ 2 แบบ ขึ้นอยู่กับวัตถุประสงค์การใช้งาน

1. ไซต์ผู้ใช้ (หรือไซต์องค์กร)
   • URL: `ชื่อผู้ใช้ของคุณ.github.io`
   • ลักษณะเด่น: สามารถสร้างได้เพียง 1 ไซต์ต่อ 1 บัญชีเท่านั้น ชื่อของ Repository จะต้องเป็น " `ชื่อผู้ใช้.github.io` " เหมาะอย่างยิ่งสำหรับใช้เป็นหน้าหลักของพอร์ตโฟลิโอส่วนตัวหรือบล็อก
2. ไซต์โปรเจกต์
   • URL: `ชื่อผู้ใช้ของคุณ.github.io/ชื่อrepository/`
   • ลักษณะเด่น: สามารถสร้างได้สำหรับแต่ละ Repository ทั่วไป ไม่มีการจำกัดจำนวนในการสร้าง เหมาะสำหรับใช้เป็นหน้าเดโมของโปรเจกต์แต่ละชิ้น หรือเว็บไซต์เอกสารประกอบ

ในครั้งนี้ เราจะมาอธิบายวิธีการเผยแพร่แบบ "ไซต์โปรเจกต์" ซึ่งคุณสามารถลองทำกับ Repository ใดก็ได้

ปฏิบัติจริง! ขั้นตอนการเผยแพร่ไซต์โปรเจกต์

เรามาลองเผยแพร่ Repository `my-first-repo` ที่สร้างขึ้นในบทความก่อนหน้านี้เป็นเว็บไซต์กัน

ขั้นตอนที่ 1: ไปที่ "Settings" ของ Repository ที่ต้องการเผยแพร่

ขั้นแรก ให้เปิดหน้า Repository ที่คุณต้องการเผยแพร่บน GitHub แล้วคลิกที่แท็บ "Settings"

[ภาพ: แท็บ "Settings" ในรายการแท็บของ GitHub Repository ถูกเน้น]

ขั้นตอนที่ 2: เลือกแหล่งที่มาของการเผยแพร่ในส่วน "Pages"

จากเมนูด้านซ้ายของหน้า Settings ให้คลิกที่ "Pages" สังเกตที่การตั้งค่า "Source" ในหัวข้อ "Build and deployment"

[ภาพ: "Deploy from a branch" ถูกเลือกเป็นแหล่งที่มาของ GitHub Pages]

ตรวจสอบให้แน่ใจว่าได้เลือก "Deploy from a branch" ไว้ ซึ่งเป็นวิธีพื้นฐานที่สุดคือ "การเผยแพร่เว็บไซต์จาก Branch ที่ระบุ"

ขั้นตอนที่ 3: เลือก Branch ที่จะเผยแพร่และบันทึก

ในหัวข้อ "Branch" ให้ตั้งค่าว่าจะเผยแพร่ Branch ใด เนื่องจากเราต้องการเผยแพร่โค้ดจาก Branch `main` ให้ตั้งค่าดังนี้

• Branch: เลือก `main`
• Folder: เลือก `/(root)`

เมื่อตั้งค่าเสร็จแล้ว ให้คลิกปุ่ม "Save"

[ภาพ: `main` ถูกเลือกเป็น Branch, `/(root)` เป็นโฟลเดอร์, และกำลังกดปุ่ม "Save"]

ขั้นตอนที่ 4: ตรวจสอบ URL ที่เผยแพร่แล้ว

เมื่อกดปุ่ม Save หน้าเว็บจะโหลดใหม่ และจะมีแบนเนอร์สีเขียวปรากฏขึ้นด้านบนพร้อมข้อความว่า "Your site is live at ..." อาจใช้เวลาประมาณ 1-2 นาทีเพื่อให้เว็บไซต์ของคุณเผยแพร่บนอินเทอร์เน็ต

[ภาพ: แบนเนอร์สีเขียว "Your site is live at..." ที่แสดงอยู่ด้านบนของการตั้งค่า GitHub Pages]

ลองคลิกที่ URL ที่แสดงขึ้นมา หากหน้าเว็บ "Hello, World!" ที่คุณสร้างไว้ก่อนหน้านี้แสดงขึ้นมาเป็นเว็บไซต์ที่ใครๆ ก็สามารถเข้าถึงได้บนอินเทอร์เน็ต ก็ถือว่าสำเร็จ!

วิธีการอัปเดตเว็บไซต์

จุดเด่นที่ยอดเยี่ยมของ GitHub Pages คือการอัปเดตที่ง่ายมาก เพียงแค่แก้ไขไฟล์ในเครื่องของคุณ แล้ว push การเปลี่ยนแปลงนั้นไปยัง Branch ที่ตั้งค่าไว้สำหรับเผยแพร่ (ในกรณีนี้คือ `main`) ในอีกไม่กี่นาที เนื้อหาก็จะถูกอัปเดตบนเว็บไซต์ที่เผยแพร่อยู่โดยอัตโนมัติ

มาลองกันเลย แก้ไขเนื้อหาของไฟล์ `index.html` ในเครื่องของคุณ

echo "<h1>เว็บไซต์ของฉันอัปเดตแล้ว!</h1>" > index.html

ทำการ `add` และ `commit` การเปลี่ยนแปลง

git add index.html
git commit -m "อัปเดต index.html สำหรับ GitHub Pages"

สุดท้าย ทำการ `push` การเปลี่ยนแปลง

git push origin main

เมื่อ push เสร็จแล้ว รอประมาณ 1-2 นาที แล้วลองรีเฟรช URL ของเว็บไซต์ที่คุณเผยแพร่ไปก่อนหน้านี้ดู เนื้อหาของหน้าเว็บควรจะอัปเดตแล้ว

สรุป: เผยแพร่ผลงานของคุณให้โลกเห็นด้วย GitHub!

ในซีรีส์แนะนำ GitHub นี้ คุณได้เรียนรู้และสัมผัสประสบการณ์ทั้งหมด ตั้งแต่การสร้างบัญชี, การใช้งานคำสั่งพื้นฐานของ Git, ขั้นตอนการพัฒนาร่วมกับทีม, และในที่สุดก็คือการเผยแพร่เว็บไซต์ด้วยมือของคุณเอง นี่เป็นก้าวที่ยิ่งใหญ่มากในฐานะนักสร้างสรรค์เว็บ

ความรู้ที่ได้รับในครั้งนี้จะเป็นรากฐานที่แข็งแกร่งสำหรับกิจกรรมการพัฒนาของคุณในอนาคต ขอให้คุณใช้ GitHub Pages เพื่อเผยแพร่พอร์ตโฟลิโอของคุณเองหรือโปรเจกต์ใหม่ๆ ให้คนทั่วโลกได้เห็น และหวังว่าชีวิตการพัฒนาของคุณจะสะดวกสบายและสร้างสรรค์ยิ่งขึ้น!