ตั้ง GitHub Pages — โฮสต์โปรเจกต์ของคุณฟรี

คุณมีไฟล์เว็บอยู่แล้ว หรือมีโปรเจกต์เล็กๆ ที่อยากให้คนอื่นเปิดผ่านลิงก์ได้

ถ้าคุณแค่อยากได้ลิงก์เว็บฟรี GitHub Pages เป็นจุดเริ่มที่ดีมาก

GitHub Pages คือบริการจาก GitHub ที่เอาไฟล์ใน repository (โฟลเดอร์โปรเจกต์บน GitHub) ไปเปิดเป็นเว็บไซต์ให้คุณได้เลย

เหมาะมากกับเว็บที่เป็นไฟล์นิ่งๆ เช่น HTML, CSS, JavaScript, หน้าแนะนำตัว, landing page หรือ docs เล็กๆ

ถ้าคุณอยากได้แค่ลิงก์ไว้ส่งให้คนอื่นดู โดยไม่ต้องเช่า server ก่อน GitHub Pages เป็นทางที่ง่ายที่สุดแบบหนึ่ง

อะไรที่ควรรู้ก่อนเริ่ม

ก่อนลงมือ มีอยู่ 2 เรื่องที่ควรรู้ก่อน

1. คุณต้องมีบัญชี GitHub
2. คุณต้องมีไฟล์เว็บที่พร้อมเปิดบนเว็บแล้ว อย่างน้อยควรมีไฟล์หน้าแรก เช่น index.html

GitHub Pages เหมาะกับโปรเจกต์ที่เปิดเป็นไฟล์เว็บได้ตรงๆ ถ้าโปรเจกต์ของคุณต้องมีฐานข้อมูล ระบบล็อกอินฝั่ง server หรือ API ที่รันเอง GitHub Pages อย่างเดียวจะไม่พอ

ขั้นตอนที่ 1 — สร้าง repository ใหม่

ถ้ายังไม่มี repository สำหรับโปรเจกต์นี้ ให้เริ่มตรงนี้ก่อน

1. เข้า GitHub แล้วกดปุ่ม “New” (หรือ ”+” ที่มุมบนขวา → “New repository”)
2. ตั้งชื่อ repository เช่น my-website
3. ถ้าต้องการใช้แบบง่ายสุด ให้เลือก “Public”
4. ติ๊ก “Add a README file” เพื่อให้ repo ไม่ว่างเปล่า
5. กด “Create repository”

ขั้นตอนที่ 2 — อัปโหลดไฟล์เว็บไซต์

ถ้ามีไฟล์เว็บอยู่ในเครื่องอยู่แล้ว คุณอัปโหลดผ่านหน้าเว็บ GitHub ได้เลย

1. เข้า repository ที่เพิ่งสร้าง
2. กด “Add file” → “Upload files”
3. ลากไฟล์ทั้งหมดมาวาง
4. เลื่อนลงมาด้านล่าง กด “Commit changes”

ขั้นตอนที่ 3 — เปิดใช้งาน GitHub Pages

1. ใน repository ของคุณ กดแท็บ “Settings” (เฟือง ⚙️)
2. เลื่อนลงมาที่เมนูซ้าย หา “Pages”
3. ในส่วน “Source” เลือก “Deploy from a branch”
4. เลือก branch เป็น “main” และโฟลเดอร์เป็น ”/ (root)”
5. กด “Save”

หลังจากนั้น GitHub จะเริ่ม deploy เว็บไซต์ของคุณ อาจใช้เวลาหลายนาที และบางครั้งอาจนานได้ถึงประมาณ 10 นาที

ขั้นตอนที่ 4 — เปิดเว็บไซต์

หลังจากรอสักครู่:

1. กลับไปที่หน้า Settings → Pages
2. จะเห็นข้อความ “Your site is live at…” พร้อม URL
3. กด URL นั้นเพื่อเปิดเว็บไซต์ของคุณ

URL จะหน้าตาประมาณไหน

โดยทั่วไป URL จะออกมาประมาณนี้:

your-username.github.io/your-repo-name

แต่ถ้าคุณใช้ repository ชื่อพิเศษแบบ your-username.github.io URL อาจสั้นลงและไม่มีชื่อ repo ต่อท้าย

ตรงนี้ไม่ต้องกังวลมากในรอบแรก แค่ดู URL ที่ GitHub แสดงในหน้า Pages เป็นหลัก

ถ้าจะแก้เว็บทีหลัง ทำยังไง

ทุกครั้งที่คุณอัปโหลดไฟล์ใหม่หรือ commit การเปลี่ยนแปลงเข้า repo เดิม GitHub Pages จะสร้างเว็บใหม่ให้อัตโนมัติ

ส่วนใหญ่คุณไม่ต้องเปิด Pages มาตั้งค่าใหม่ แค่แก้ไฟล์แล้ว push ขึ้นไป จากนั้นรอสักครู่แล้วรีเฟรชหน้าเว็บ

ถ้ายังไม่ขึ้น ลองเช็ก 4 อย่างนี้ก่อน

1. ยังเห็น 404

เช็กก่อนว่าในโปรเจกต์มีไฟล์หน้าแรกจริงไหม เช่น index.html และไฟล์นั้นอยู่ในตำแหน่งที่ GitHub Pages อ่านเจอ

2. ตั้ง branch หรือ folder ผิด

กลับไปดูที่ Settings → Pages ว่าเลือก branch ถูกหรือยัง และเลือกโฟลเดอร์เป็น /(root) ตามที่ตั้งใจไว้หรือเปล่า

3. รอไม่นานพอ

บางครั้ง GitHub Pages ใช้เวลาหลายนาที ถ้าเพิ่งกด Save ไปไม่นาน อย่าเพิ่งรีบสรุปว่าพัง

4. โปรเจกต์นี้ไม่ใช่เว็บ static

ถ้าโปรเจกต์ของคุณต้องรัน server เอง หรือมี backend จริงๆ หน้าเว็บอาจขึ้นไม่ครบ หรือทำงานได้ไม่เหมือนตอนรันในเครื่อง

สรุป

• GitHub Pages เป็นวิธีเอาไฟล์เว็บขึ้นออนไลน์ฟรีที่เริ่มง่ายมาก
• เหมาะกับเว็บ static เช่น HTML/CSS/JS, portfolio, landing page หรือ docs
• เปิดใช้งานได้จาก Settings → Pages → เลือก branch
• ถ้ามีการแก้ไฟล์ใน repo เดิม เว็บจะอัปเดตให้อัตโนมัติหลังจากนั้น
• ถ้ายังไม่ขึ้น ให้เช็กไฟล์หน้าแรก branch ที่เลือก และรอให้ deploy เสร็จก่อน

← กลับไปหน้าบทความทั้งหมด