บทที่ 3 — Git และการผูก repo กับ GitHub

ปัญหาที่ Git มาแก้

ลองนึกภาพทำงานโดยไม่มี Git: ไฟล์ index_final.js, index_final2.js, index_final_ใช้อันนี้.js แก้อะไรพังก็ย้อนไม่ได้ สองคนแก้ไฟล์เดียวกันก็ทับกัน

Git แก้ปัญหานี้ด้วยการจำ "ทุกสถานะ" ของโปรเจกต์ไว้ ย้อนกลับไปจุดไหนก็ได้ และรวมงานหลายคนเข้าด้วยกันได้อย่างเป็นระบบ

แยกให้ชัดก่อน — คนสับสนสองคำนี้บ่อยมาก:

• Git = โปรแกรมบนเครื่องคุณ ทำงานได้แม้ไม่มีเน็ต
• GitHub = เว็บไซต์ที่รับฝาก repo ไว้บนอินเทอร์เน็ต ให้ทีมแชร์กันได้ (และเป็นที่รัน CI ด้วย)

git status   # ดูว่าตอนนี้แก้อะไรไปบ้าง

git add src/features/cart/CartContext.tsx

git commit -m "Add cart context"

git push

4 คำสั่งที่ใช้ 90% ของเวลา

git status              # ตอนนี้แก้อะไรไปบ้าง (พิมพ์บ่อยที่สุด ไม่มีอันตราย)
git add <ไฟล์>          # เลือกไฟล์ที่จะบันทึก (ใช้ . แทน "ทุกไฟล์")
git commit -m "ข้อความ" # บันทึกจริง พร้อมคำอธิบาย
git push                # ส่งขึ้น GitHub

วงจรการทำงานจริงคือ: แก้โค้ด → status ดูว่าแก้อะไร → add → commit → push วนแบบนี้ทั้งวัน

ทำงานกับ AI: ปกติ Claude Code จะจัดการ 4 ขั้นนี้ให้เอง แต่คุณต้องรู้ว่ามันกำลังทำอะไร เพราะเวลามีปัญหา (เช่น push ไม่ขึ้น หรือ commit ผิด branch) คนที่ต้องตัดสินใจว่าจะแก้ยังไงคือคุณ

commit ที่ดีเป็นยังไง

commit คือข้อความที่คุณเขียนถึงคนในอนาคต (ซึ่งมักจะเป็นตัวคุณเองอีก 3 เดือน) ให้บอกว่า ทำอะไรและทำไม ไม่ใช่บอกว่าแก้บรรทัดไหน — เพราะบรรทัดไหนดูจาก diff เอาได้อยู่แล้ว

Add front bumper fitment table to product page

Fix cart badge not updating after variant switch

update
fix bug
งานวันนี้
asdf

ใน repo นี้เราเขียน commit เป็นภาษาอังกฤษ (ดู AGENTS.md หัวข้อ Language conventions) แต่คุยกันในทีมเป็นไทยได้ตามปกติ

ไฟล์ที่ห้ามขึ้น repo — .gitignore

บางไฟล์ต้องไม่ขึ้น GitHub เด็ดขาด:

• node_modules/ — ใหญ่มาก และสร้างใหม่ได้ด้วย npm install
• .next/ — ผลลัพธ์จากการ build สร้างใหม่ได้เหมือนกัน
• .env — ไฟล์เก็บรหัสผ่านและ key ต่าง ๆ หลุดขึ้นไปแล้วถือว่ารั่ว ต้องเปลี่ยนรหัสทั้งหมดทันที

ไฟล์ .gitignore คือรายชื่อสิ่งที่ Git จะแกล้งมองไม่เห็น ในโปรเจกต์นี้เขียนไว้แบบนี้:

node_modules/
.next/
.env*
!.env.example        # ยกเว้นไฟล์ตัวอย่าง — อันนี้ต้องขึ้น repo
.claude/settings.local.json

สังเกตบรรทัด !.env.example — เราปิดกั้น .env ทุกไฟล์ แต่ ยกเว้น ไฟล์ตัวอย่างที่มีแต่ชื่อตัวแปรกับค่าปลอม เพื่อให้คนใหม่รู้ว่าต้องตั้งค่าอะไรบ้าง โดยไม่เห็นค่าจริง

กฎเหล็ก: ถ้าเผลอ commit ไฟล์ที่มีรหัสผ่านขึ้นไปแล้ว การลบไฟล์ใน commit ถัดไป ไม่พอ เพราะประวัติยังมีอยู่ ต้องถือว่ารหัสนั้นรั่วและเปลี่ยนใหม่ทันที แล้วค่อยว่ากันเรื่องลบประวัติ

ตอนที่ผูก repo นี้เข้ากับ GitHub จริง

ในโปรเจกต์นี้ ตอนเริ่มมีแค่โฟลเดอร์ในเครื่อง ขั้นตอนที่ทำคือ:

# 1. สร้าง repo เปล่าบน GitHub ก่อน (ผ่านหน้าเว็บ) — ตั้งเป็น private เพราะเป็นงานลูกค้า

# 2. บอก Git ในเครื่องว่า "ปลายทางอยู่ที่นี่"
git remote add origin https://github.com/Natt-Woramet/apexhuas.git

# 3. ส่งงานทั้งหมดขึ้นไปครั้งแรก
git push -u origin main

• origin คือชื่อเล่นของปลายทาง (ชื่อมาตรฐาน ไม่ต้องเปลี่ยน)
• -u แปลว่า "จำไว้ด้วย" ครั้งต่อไปพิมพ์แค่ git push พอ

สิ่งที่คุณจะทำจริงตอนเข้ามาใหม่

คุณไม่ต้องสร้าง repo แล้ว แค่ดึงของที่มีอยู่ลงมา:

git clone https://github.com/Natt-Woramet/apexhuas.git
cd apexhuas
npm install               # ติดตั้ง dependency (ใช้เวลาสักครู่)
cp .env.example .env.local
npm run dev               # เปิด http://localhost:3000

ลองทำเอง: ทำ 5 บรรทัดข้างบนให้จบ แล้วเปิด http://localhost:3000 ถ้าเห็นหน้าเว็บ ApexHuas ภาษาไทย = เครื่องคุณพร้อมทำงานแล้ว

จากนั้นลองเล่นกับประวัติดู:

git log --oneline | head -20   # ดู 20 commit ล่าสุด
git show <รหัส commit>          # ดูว่า commit นั้นแก้อะไรบ้าง

ลองหา commit ที่ชื่อ "Add catalogue mockup..." แล้วเปิดดูว่ามีไฟล์อะไรถูกเพิ่มบ้าง

เจอปัญหาบ่อย ๆ

บทหน้าจะเป็นเรื่องที่สำคัญที่สุดในการทำงานเป็นทีม: branch และกติกาว่าโค้ดต้องเดินทางยังไงกว่าจะขึ้นเว็บจริง