Chapter 00 · Welcome

รู้จัก GitHub
ฉบับคนเพิ่งเริ่ม

ไม่ต้องเป็นโปรแกรมเมอร์ก็อ่านเข้าใจได้ ห้องนี้จะพาไปรู้จักว่า GitHub คืออะไร ทำงานยังไง และนักเรียนอย่างเราเอาไปใช้ประโยชน์อะไรได้บ้าง

เวลาอ่าน ~20 นาที ระดับ มือใหม่ มี แบบทดสอบ ท้ายบท
Chapter 01

GitHub คืออะไร?

GitHub คือเว็บไซต์สำหรับ เก็บไฟล์งาน (โดยเฉพาะโค้ด) ไว้บนอินเทอร์เน็ต พร้อมจดจำทุกครั้งที่เราแก้ไขงาน และเปิดให้คนอื่นมาช่วยทำงานด้วยกันได้

📚

ลองนึกภาพ Google Drive + สมุดบันทึกประวัติ + ห้องทำงานกลุ่ม รวมกัน
เก็บไฟล์ได้เหมือน Drive · ย้อนดูได้ว่าแก้อะไรไปเมื่อไหร่เหมือนไทม์แมชชีน · และเพื่อนช่วยแก้งานพร้อมกันได้โดยไม่ทับกัน

01 · STORE

เก็บงาน

ไฟล์อยู่บนคลาวด์ คอมพัง งานก็ไม่หาย

02 · HISTORY

จำทุกการแก้ไข

แก้พลาด? ย้อนกลับไปเวอร์ชันเก่าได้

03 · TEAM

ทำงานร่วมกัน

หลายคนแก้โปรเจกต์เดียวกันได้อย่างเป็นระเบียบ

💡 ไม่เคยเจอแบบนี้เหรอ? ไฟล์ชื่อ รายงาน_final.docx → รายงาน_final2.docx → รายงาน_final_จริงๆ.docx … GitHub แก้ปัญหานี้ได้ เพราะมันจำทุกเวอร์ชันให้เองในไฟล์เดียว
Chapter 02

Git กับ GitHub ต่างกันยังไง?

สองคำนี้ชื่อคล้ายกันจนงง แต่จริง ๆ เป็นคนละอย่าง:

TOOL · ในเครื่อง

Git

โปรแกรมที่ติดตั้งในคอมของเรา ทำหน้าที่ บันทึกประวัติการแก้ไข ของไฟล์ ใช้ได้แม้ไม่มีอินเทอร์เน็ต

+
WEBSITE · ออนไลน์

GitHub

เว็บไซต์ที่ รับฝากงานที่ใช้ Git ไว้บนอินเทอร์เน็ต ให้แชร์และทำงานร่วมกับคนอื่นได้

📷

Git = กล้องถ่ายรูป (ถ่ายภาพงานเก็บไว้ทีละช็อต)
GitHub = อัลบั้มออนไลน์ (เอาภาพไปเก็บและแชร์ให้คนอื่นดู)

Chapter 03 · Glossary

คำศัพท์ที่ต้องรู้

แตะที่การ์ดเพื่อดูตัวอย่างเปรียบเทียบ

Repositoryรีโพ / คลังงาน
โฟลเดอร์โปรเจกต์หนึ่งชิ้นบน GitHub เก็บไฟล์ทั้งหมดพร้อมประวัติ
เหมือน "แฟ้มงาน" หนึ่งแฟ้ม เช่น แฟ้มโปรเจกต์วิทย์ ม.5
Commitคอมมิต / บันทึก
การ "เซฟจุด" ของงาน พร้อมเขียนโน้ตสั้น ๆ ว่าแก้อะไรไป
เหมือนเซฟเกมก่อนสู้บอส ถ้าพลาดก็โหลดกลับมาที่จุดนี้ได้
Branchแบรนช์ / กิ่ง
แตกงานออกมาเป็นอีกเส้น เพื่อทดลองโดยไม่กระทบงานหลัก
เหมือนถ่ายเอกสารรายงานไปขีดเขียนลองไอเดีย ตัวจริงยังสะอาดอยู่
Mergeเมิร์จ / รวม
รวมงานจาก branch หนึ่งกลับเข้าไปในอีก branch
ไอเดียที่ลองในสำเนาเวิร์ก ก็เอากลับไปใส่ในรายงานตัวจริง
Pull RequestPR / ขอรวมงาน
คำขอให้เจ้าของโปรเจกต์ตรวจและรวมงานที่เราแก้
เหมือนส่งงานให้หัวหน้ากลุ่มตรวจก่อน ถ้าโอเคก็ใส่ในเล่มจริง
Cloneโคลน / ดาวน์โหลดมา
คัดลอก repository จาก GitHub ลงมาในคอมเรา
เหมือนดาวน์โหลดแฟ้มงานทั้งแฟ้มพร้อมประวัติลงเครื่อง
Push / Pullส่งขึ้น / ดึงลง
Push = ส่งงานจากคอมขึ้น GitHub · Pull = ดึงงานล่าสุดลงมา
Push เหมือนอัปโหลด · Pull เหมือนกดรีเฟรชให้ได้ของใหม่
Forkฟอร์ก / ก๊อปไปเป็นของเรา
คัดลอก repository ของคนอื่นมาเป็นของเราบน GitHub
เหมือนยืมสูตรอาหารเพื่อนมาดัดแปลงเป็นสูตรของเราเอง
Issueอิชชู / แจ้งปัญหา
กระทู้สำหรับแจ้งบั๊ก เสนอไอเดีย หรือจดงานที่ต้องทำ
เหมือนโพสต์อิทแปะบอร์ดว่า "หน้า 3 พิมพ์ผิด ใครว่างช่วยแก้ที"
README.mdไฟล์แนะนำ
ไฟล์หน้าแรกของ repository อธิบายว่าโปรเจกต์นี้คืออะไร
เหมือน "คำนำ" ของหนังสือ คนเปิดเข้ามาจะเห็นก่อนเลย
Chapter 04 · Visual

ภาพการทำงาน: Branch และ Merge

จุดแต่ละจุดคือ commit (การเซฟงาน 1 ครั้ง) เส้นล่างคืองานหลัก main ส่วนเส้นบนคือการแตก branch ไปลองทำส่วนใหม่ แล้ว merge กลับมา

เริ่มโปรเจกต์ เขียนบทนำ แก้คำผิด merge ✓ ส่งงาน ลองทำกราฟ กราฟเสร็จ main branch: add-chart

ระหว่างที่เราลองทำกราฟอยู่ในกิ่งของตัวเอง เพื่อนยังแก้คำผิดในงานหลักได้ตามปกติ — พอเสร็จทั้งคู่ก็รวมกันเป็นงานเดียว ไม่มีใครทับงานใคร

Chapter 05 · Hands-on

เริ่มใช้งานครั้งแรก (ไม่ต้องใช้คำสั่งเลย)

มือใหม่เริ่มจากหน้าเว็บได้เลย ไม่ต้องลงโปรแกรมอะไร:

สมัครบัญชี

เข้า github.com → กด Sign up → ตั้ง username ดี ๆ (ใช้เป็นพอร์ตในอนาคต อย่าตั้งชื่อแปลกเกิน)

สร้าง Repository แรก

กดปุ่ม + มุมขวาบน → New repository → ตั้งชื่อ เช่น my-first-repo → ติ๊ก “Add a README file” → Create

แก้ไฟล์ README

คลิกไฟล์ README.md → กดรูปดินสอ ✏️ → เขียนแนะนำตัวเองสั้น ๆ

Commit ครั้งแรก

กด Commit changes → เขียนโน้ตว่าแก้อะไร เช่น “เพิ่มคำแนะนำตัว” → ยืนยัน 🎉 นี่คือ commit แรกของเรา!

ลองอัปโหลดไฟล์งาน

กด Add file → Upload files ลากไฟล์การบ้านหรือโน้ตมาวาง แล้ว commit อีกครั้ง

ดูประวัติ

กดคำว่า Commits (มีรูปนาฬิกา) จะเห็นทุกการแก้ไขเรียงตามเวลา — นี่แหละไทม์แมชชีนของเรา

Chapter 06 · Use cases

นักเรียนเอา GitHub ไปใช้ทำอะไรได้บ้าง?

// 01

📁 คลังงานและการบ้าน

เก็บโค้ด รายงาน โน้ต ไว้ที่เดียว เปิดจากเครื่องไหนก็ได้ และย้อนดูเวอร์ชันเก่าได้

// 02

🌐 ทำเว็บไซต์ส่วนตัวฟรี

ใช้ GitHub Pages ทำเว็บแนะนำตัว ได้ลิงก์ ชื่อเรา.github.io แบบไม่เสียเงิน

// 03

💼 พอร์ตโฟลิโอ

ใช้ยื่นมหาวิทยาลัย สมัครค่าย หรือฝึกงาน กรรมการเห็นผลงานจริงและความสม่ำเสมอ

// 04

👥 ทำงานกลุ่ม

แบ่งงานผ่าน Issue แต่ละคนทำใน branch ของตัวเอง แล้วรวมผ่าน Pull Request

// 05

📝 จดโน้ตด้วย Markdown

เขียนสรุปบทเรียนเป็นไฟล์ .md จัดหัวข้อ ตัวหนา ตาราง ได้สวย ๆ

// 06

🎁 Student Developer Pack

นักเรียน/นักศึกษาสมัครรับสิทธิ์ฟรีได้ เช่น GitHub Copilot, โดเมน, เครื่องมือเขียนโปรแกรมต่าง ๆ

// 07

🔍 เรียนจากโค้ดคนอื่น

มีโปรเจกต์เปิดให้ดูฟรีนับล้าน อยากรู้ว่าเกม/แอปทำยังไง เปิดอ่านได้เลย

// 08

🤝 ร่วม Open Source

ช่วยแปลเอกสาร แก้คำผิด รายงานบั๊ก — เป็นก้าวแรกของการทำงานกับนักพัฒนาทั่วโลก

Chapter 07 · Terminal

คำสั่ง Git พื้นฐาน (เมื่อพร้อมแล้ว)

เมื่อคุ้นกับหน้าเว็บแล้ว ขั้นต่อไปคือใช้ Git ในคอมผ่าน Terminal — จำแค่ 6 คำสั่งนี้ก็ใช้งานได้ 90%

~/projects — zsh
# 1) ดาวน์โหลดโปรเจกต์จาก GitHub ลงเครื่อง
$ git clone https://github.com/ชื่อเรา/my-first-repo.git

# 2) ดูว่าไฟล์ไหนถูกแก้ไปบ้าง
$ git status

# 3) เลือกไฟล์ที่จะเซฟ (. = ทุกไฟล์)
$ git add .

# 4) เซฟจุด พร้อมเขียนโน้ต
$ git commit -m "เพิ่มสรุปบทที่ 3"

# 5) ส่งงานขึ้น GitHub
$ git push

# 6) ดึงงานล่าสุดลงมา (เช่น เพื่อนเพิ่งแก้)
$ git pull
🔁

วงจรประจำวัน: pull → แก้งาน → add → commit → push
ดึงของใหม่ก่อน ทำงาน เซฟ แล้วส่งขึ้น — ทำซ้ำแค่นี้ทุกวัน

🧭 ไม่ถนัด Terminal? ใช้โปรแกรม GitHub Desktop แทนได้ เป็นปุ่มกดทั้งหมด ทำงานเหมือนคำสั่งข้างบนทุกอย่าง
Chapter 08 · Checklist

ภารกิจแรกของฉัน

ติ๊กเมื่อทำเสร็จ — ความคืบหน้าถูกจำไว้ในเบราว์เซอร์นี้

0 / 8
Chapter 09 · Quiz

ทดสอบความเข้าใจ

เลือกคำตอบที่คิดว่าถูก ไม่มีใครเห็นนอกจากเรา 😉