วิธีใช้ GitHub Pages สร้างเว็บไซต์ฟรีสำหรับนักศึกษา: ตั้งแต่สร้าง Repository จนเผยแพร่เว็บไซต์ HTML

28 Oct 2026 · เข้าชม 3

IT HOW-TO | WEB DEVELOPMENT

วิธีใช้ GitHub Pages สร้างเว็บไซต์ฟรีสำหรับนักศึกษา: ตั้งแต่สร้าง Repository จนเผยแพร่เว็บไซต์ HTML

ระดับ: ผู้เริ่มต้น | ระยะเวลา: 20–30 นาที | อัปเดต: ตุลาคม 2569

สำหรับนักศึกษาที่เรียนการพัฒนาเว็บไซต์ การเขียน HTML และ CSS ให้แสดงผลบนคอมพิวเตอร์เป็นเพียงจุดเริ่มต้น ขั้นตอนต่อไปคือการเผยแพร่เว็บไซต์ให้เพื่อนหรืออาจารย์เปิดผ่านอินเทอร์เน็ตได้ โดยไม่จำเป็นต้องซื้อ Hosting สำหรับเว็บไซต์แบบ Static

GitHub Pages ช่วยเผยแพร่เว็บไซต์ HTML, CSS และ JavaScript จาก Repository บน GitHub ได้ บทความนี้จะพาสร้างเว็บไซต์ Portfolio อย่างง่าย และนำขึ้นออนไลน์ผ่านเว็บเบราว์เซอร์ โดยไม่ต้องใช้คำสั่ง Git ใน Terminal

ผลลัพธ์ที่คาดหวัง: เว็บไซต์ส่วนตัวที่เปิดได้ผ่าน URL ลักษณะ https://username.github.io/student-portfolio/ โดยเปลี่ยน username เป็นชื่อบัญชี GitHub ของตนเอง

1. GitHub Pages คืออะไร?

GitHub Pages เป็นบริการโฮสต์เว็บไซต์แบบ Static จากไฟล์ใน GitHub Repository เหมาะกับ Portfolio เว็บไซต์รายวิชา หน้าแนะนำโครงงาน และเอกสารประกอบการเรียนรู้ บัญชี GitHub Free สามารถเผยแพร่จาก Public Repository ได้ตามเงื่อนไขของบริการ

ข้อจำกัด: GitHub Pages ไม่ประมวลผล PHP หรือเชื่อมต่อ MySQL ฝั่งเซิร์ฟเวอร์โดยตรง หากทำระบบสมัครสมาชิกหรือระบบฐานข้อมูล ต้องมี Backend หรือ Hosting เพิ่มเติม

2. สิ่งที่ต้องเตรียม

บัญชี GitHub (สมัครที่ github.com/signup)
โปรแกรม VS Code หรือ Text Editor
เว็บเบราว์เซอร์และอินเทอร์เน็ต
ไฟล์เว็บไซต์ชื่อ index.html

3. ขั้นตอนที่ 1: สร้าง Repository

เข้าสู่ระบบที่ github.com
คลิกเครื่องหมาย + แล้วเลือก New repository
ตั้งชื่อ Repository เป็น student-portfolio
เลือกการมองเห็นเป็น Public และเลือกสร้าง README ได้
คลิก Create repository

ตัวอย่างที่อยู่ Repository: https://github.com/username/student-portfolio

4. ขั้นตอนที่ 2: สร้างไฟล์เว็บไซต์ HTML

สร้างโฟลเดอร์ student-portfolio ในคอมพิวเตอร์ เปิดโฟลเดอร์ด้วย VS Code แล้วสร้างไฟล์ชื่อ index.html จากนั้นวางโค้ดตัวอย่างต่อไปนี้

<!DOCTYPE html>

<head>

<title>Student Portfolio</title>

<style>

* { box-sizing: border-box; }

body { margin: 0; font-family: Arial, sans-serif; background: #f3f6fb; color: #233047; }

header { background: #174ea6; color: white; padding: 45px 20px; text-align: center; }

nav { background: #12366e; text-align: center; padding: 12px; }

nav a { color: white; margin: 0 10px; text-decoration: none; }

main { max-width: 850px; margin: 25px auto; padding: 0 16px; }

section { background: white; margin-bottom: 16px; padding: 22px; border-radius: 10px; }

h2 { color: #174ea6; }

footer { text-align: center; background: #12366e; color: white; padding: 18px; }

</style>

</head>

<body>

<header><h1>My Portfolio</h1><p>เว็บไซต์แนะนำตัวและผลงานนักศึกษา</p></header>

<nav><a href="#about">เกี่ยวกับฉัน</a><a href="#skills">ทักษะ</a><a href="#projects">ผลงาน</a><a href="#contact">ติดต่อ</a></nav>

<main>

<section id="about"><h2>เกี่ยวกับฉัน</h2><p>สวัสดีครับ/ค่ะ ฉันสนใจการพัฒนาเว็บไซต์</p></section>

<section id="skills"><h2>ทักษะ</h2><ul><li>HTML5</li><li>CSS3</li><li>JavaScript พื้นฐาน</li></ul></section>

<section id="projects"><h2>ผลงาน</h2><p>เว็บไซต์แนะนำตัว และเว็บไซต์ประชาสัมพันธ์</p></section>

<section id="contact"><h2>ติดต่อ</h2><p>GitHub: <a href="https://github.com/">โปรไฟล์ของฉัน</a></p></section>

</main>

<footer>Student Portfolio</footer>

</body>

</html>

บันทึกไฟล์ แล้วดับเบิลคลิก index.html เพื่อเปิดทดสอบบนเว็บเบราว์เซอร์ หากแสดงหน้า Portfolio ได้ แสดงว่าพร้อมอัปโหลด

5. ขั้นตอนที่ 3: อัปโหลดไฟล์ขึ้น GitHub

เปิด Repository student-portfolio
เลือก Add file → Upload files (หรือปุ่มอัปโหลดที่หน้า Repository)
ลากไฟล์ index.html ลงในหน้าอัปโหลด
กรอกข้อความ Commit เช่น Add portfolio homepage
คลิก Commit changes

ตรวจสอบว่าไฟล์ index.html อยู่ในโฟลเดอร์หลักของ Repository (Root) ไม่ใช่อยู่ภายในโฟลเดอร์ซ้อนอีกชั้น

6. ขั้นตอนที่ 4: เปิด GitHub Pages

เปิดเมนู Settings ของ Repository
เลือก Pages จากเมนูด้านข้าง
ในส่วน Build and deployment เลือก Source: Deploy from a branch
เลือก Branch เป็น main และ Folder เป็น /(root)
คลิก Save แล้วรอระบบเผยแพร่

หาก Repository ใช้ชื่อ Branch อื่น ให้เลือก Branch ที่มีไฟล์ index.html จริง

7. ขั้นตอนที่ 5: เปิดเว็บไซต์ที่เผยแพร่แล้ว

กลับไปที่ Settings → Pages แล้วดู URL เว็บไซต์หรือปุ่ม Visit site โดยทั่วไป Project Site จะอยู่ที่

https://username.github.io/student-portfolio/

ตัวอย่าง: หากบัญชีชื่อ studentdemo เว็บไซต์จะอยู่ที่ https://studentdemo.github.io/student-portfolio/ การเผยแพร่อาจใช้เวลาหลายนาที และตามคู่มือ GitHub อาจใช้เวลาสูงสุดประมาณ 10 นาที

8. ขั้นตอนที่ 6: แก้ไขเว็บไซต์หลังเผยแพร่

เปิด Repository แล้วคลิกไฟล์ index.html
เลือกไอคอนแก้ไขไฟล์
เปลี่ยนชื่อ ข้อมูลส่วนตัว ทักษะ หรือผลงาน
คลิก Commit changes
ตรวจสอบสถานะการเผยแพร่ที่แท็บ Actions แล้วเปิดเว็บไซต์ใหม่

9. ขั้นตอนที่ 7: เพิ่ม CSS และรูปภาพ

เมื่อต้องการแยกไฟล์ออกจาก HTML สามารถจัดโครงสร้างโฟลเดอร์ดังนี้

student-portfolio/

├── index.html

├── about.html

├── css/

│ └── style.css

└── images/

└── profile.jpg

เชื่อมไฟล์ CSS ในส่วน <head> และแสดงรูปภาพในหน้า HTML ดังนี้

แนะนำให้ใช้ Relative Path เช่น css/style.css ไม่ใช่ /css/style.css สำหรับ Project Site เพื่อหลีกเลี่ยงปัญหาเส้นทางไฟล์

10. เปรียบเทียบ GitHub Pages กับ Hosting ทั่วไป

คุณสมบัติ	GitHub Pages	Hosting ทั่วไป
HTML / CSS / JavaScript	รองรับ	รองรับ
PHP ฝั่งเซิร์ฟเวอร์	ไม่รองรับ	ขึ้นอยู่กับแพ็กเกจ
MySQL ในบริการเดียวกัน	ไม่มี	ขึ้นอยู่กับแพ็กเกจ
เหมาะกับ Portfolio	เหมาะ	เหมาะ
ค่าเริ่มต้นสำหรับ Public Repo	ใช้ฟรีตามเงื่อนไข	ขึ้นอยู่กับผู้ให้บริการ

11. ปัญหาที่พบบ่อย

เว็บไซต์ขึ้น 404 Not Found

ตรวจสอบ URL ชื่อ Repository ชื่อไฟล์ index.html และการตั้งค่า Branch/Folder ใน Pages รวมถึงสถานะการ Deploy ที่แท็บ Actions

รูปภาพหรือ CSS ไม่แสดง

ตรวจสอบเส้นทางไฟล์และตัวพิมพ์เล็ก–ใหญ่ของชื่อไฟล์ให้ตรงกันทุกตัวอักษร และใช้ Relative Path ให้เหมาะกับ Project Site

แก้ไขไฟล์แล้วเว็บไซต์ไม่เปลี่ยน

ตรวจสอบว่า Commit สำเร็จและ Deploy เสร็จแล้ว จากนั้น Refresh หน้าเว็บหรือทดลองเปิดในหน้าต่างไม่ระบุตัวตน

ไฟล์ PHP ไม่ทำงาน

GitHub Pages เป็นบริการ Static Hosting ไม่รองรับ PHP ฝั่งเซิร์ฟเวอร์ ควรใช้ Hosting หรือ Backend ที่รองรับหากต้องการระบบดังกล่าว

สรุป

GitHub Pages ช่วยให้นักศึกษาเผยแพร่เว็บไซต์ HTML ได้โดยไม่ต้องเช่า Hosting เริ่มจากสร้าง Repository พัฒนาไฟล์ index.html อัปโหลดและ Commit จากนั้นเปิดใช้ Pages และตรวจสอบ URL ที่เผยแพร่ การฝึกนี้ยังช่วยให้เข้าใจแนวคิด Repository, Branch, Commit และ Deployment ซึ่งต่อยอดสู่การทำงานพัฒนาเว็บจริงได้

เอกสารอ้างอิง

GitHub Docs. Quickstart for GitHub Pages. อ่านคู่มือ
GitHub Docs. Creating a GitHub Pages site. อ่านคู่มือ
GitHub Docs. Configuring a publishing source for your GitHub Pages site. อ่านคู่มือ

หมายเหตุ: ชื่อเมนูและหน้าจอของ GitHub อาจเปลี่ยนแปลงตามการอัปเดตระบบ

ประเมินบทความ:

0.0 จาก 5 (0 รีวิว) คลิกที่ดาวเพื่อให้คะแนนบทความนี้

แชร์เรื่องนี้:

บทความที่แนะนำ

จารุณี ทองอร่าม

วิธีทำให้เว็บที่เราพัฒนาเอง ติดอันดับ webometric

จารุณี ทองอร่าม

วิธีทำให้เว็บไซต์ปรากฏบน Google Search ด้วย Google Search Console: คู่มือทำตามได้จริงสำหรับมือใหม่

จารุณี ทองอร่าม

วิธีตรวจสอบว่าเว็บไซต์ของเราปรากฏใน ChatGPT และ Google AI Search หรือไม่?

ความคิดเห็น (0)

เข้าสู่ระบบ เพื่อเขียนความคิดเห็น