HOME · WORKFLOW

Visual Workflow
Guide

เห็นภาพรวมของ Git + GitHub ทั้งหมด ตั้งแต่เขียนไฟล์แรก ไปจนถึง deploy production
ไม่ต้องจำคำสั่ง แค่เข้าใจ flow — ที่เหลือเดี๋ยวจำเอง

5 stages 3 workflows 8 commands
01 — LIFECYCLE

Git Lifecycle 5 ขั้น

จากไฟล์เปล่าๆ บนเครื่อง → ไปอยู่บน server ทั่วโลก

💻
WORKING
แก้ไฟล์
edit file
แก้ code บนเครื่อง ไม่มีใครเห็น
→
📋
STAGING
เตรียมขึ้น
git add .
เลือกไฟล์ที่จะ save ใน snapshot ถัดไป
→
📦
LOCAL REPO
save snapshot
git commit -m "..."
บันทึก checkpoint พร้อมข้อความอธิบาย
→
☁️
REMOTE
upload
git push
ส่งไป GitHub เพื่อ backup + แชร์ทีม
→
🚀
DEPLOY
ออกสู่โลก
git pull
server ดึงไปรัน เว็บ/แอป live จริง
02 — BRANCH + PR

Branch แตก แล้ว Merge กลับ

ฟีเจอร์ใหม่ทำใน branch แยก main ไม่พัง review ก่อน merge

main v1.0 release v1.1 bug fix a1b2c3d e9f8a7b c4d5e6f feature/login-oauth 🔍 PR REVIEW approved by 2 ✓ merge v1.2 ✨ merge commit hotfix/payment เริ่ม ระหว่างทาง merge ship 🚀
main (production) feature/* (dev) hotfix/* (urgent fix) PR review + merge
12
COMMITS
3
BRANCHES
2
REVIEWERS
0
CONFLICTS
03 — TEAM

3 คน 3 branch ทำงานพร้อมกัน

GitHub จัดการ conflict ให้ ทุกคนทำงานของตัวเองได้โดยไม่ทับกัน

A
Aom
FRONTEND · DAY 1-3
feat/login-ui
ทำอะไร:
  • Login form + OAuth Google
  • Responsive mobile-first
  • A11y keyboard nav
B
Bank
BACKEND · DAY 1-4
feat/api-orders
ทำอะไร:
  • POST /orders endpoint
  • DB schema migration
  • Stripe payment webhook
C
Chay
DEVOPS · DAY 1-2
feat/ci-cd
ทำอะไร:
  • GitHub Actions workflow
  • Auto deploy to staging
  • Slack noti on deploy
main
ทั้ง 3 PR merge → auto deploy production
3 PRs → 3 reviews → 3 merges → 1 deploy 🚀
04 — LIVE LOG

ดูจริง ในชีวิตจริง

3 ตัวอย่าง git log ที่เจอบ่อย — คลิกเปลี่ยนดูได้

👤 Solo Dev
🌿 Feature Branch
🚀 Release Flow
~/my-project — git log --oneline --graph --all ● live
# Solo dev — ทำคนเดียว ไม่มี branch ไม่มี PR
$ git log --oneline --graph --all
* a1b2c3d (HEAD -> main) aom 2 hours ago
│ Add user profile page
* 9f8e7d6 (main) aom 5 hours ago
│ Fix nav bar alignment on mobile
* c4d5e6f (main) aom yesterday
│ Add dashboard chart with Chart.js
* e9f8a7b (main) aom 2 days ago
│ Initial commit with README
$
05 — PITFALLS

พลาดบ่อย ระวังไว้

มือใหม่เจอ 4 อย่างนี้บ่อยสุด — รู้ไว้ก่อนจะเจอ

⚠️ commit ข้อความ "update" "fix" "asdf"

3 เดือนผ่านไป มาดู log ย้อนหลังแล้วงง ทำไมแก้ ทำไมตรงนี้

git commit -m "fix(login): handle null email input"

⚠️ push main ตรง ข้าม PR

โปรเจกต์ใหญ่ ไม่มี review → bug เล็ดลอดไป production

git checkout -b feat/x → PR → 2 review → merge

⚠️ ไม่อ่านก่อน git add .

add ไฟล์ .env ขึ้น GitHub → API key หลุด ทันที

git add ทีละไฟล์ + ใส่ .env ใน .gitignore

⚠️ conflict แล้วตกใจแก้ผิด

เจอ <<<<<<< HEAD ลบมั่ว ลบ code ตัวเอง

git status → ดูว่าไฟล์ไหน conflict → เปิดแก้ทีละบล็อก

เห็นภาพแล้ว เริ่มเลย?

กลับไปหน้าหลัก ดู cheatsheet 8 คำสั่ง หรือไปสมัคร GitHub ฟรีได้เลย

← กลับหน้าหลัก สมัคร GitHub ฟรี →