Version Control System (VCS) หรือ ระบบควบคุมเวอร์ชัน คือเครื่องมือที่ช่วยจัดการการเปลี่ยนแปลงของไฟล์ในโปรเจกต์ โดยเฉพาะโค้ดโปรแกรม ระบบนี้จะบันทึกประวัติการแก้ไขทุกครั้ง ทำให้เราสามารถ:
Git เป็น Distributed Version Control System ที่ได้รับความนิยมสูงสุดในปัจจุบัน พัฒนาโดย Linus Torvalds ผู้สร้าง Linux Kernel ในปี 2005
# ดาวน์โหลด Git for Windows จาก
# https://git-scm.com/download/win
# หรือใช้ package manager
winget install --id Git.Git -e --source winget
# ใช้ Homebrew
brew install git
# หรือติดตั้งผ่าน Xcode Command Line Tools
xcode-select --install
sudo apt update
sudo apt install git
git --version
# แสดงผล: git version 2.x.x
# ตั้งค่าชื่อผู้ใช้
git config --global user.name "ชื่อของคุณ"
# ตั้งค่าอีเมล
git config --global user.email "your.email@example.com"
# ตรวจสอบการตั้งค่า
git config --list
# ตั้งค่า default branch name เป็น main
git config --global init.defaultBranch main
# ตั้งค่า default editor
git config --global core.editor "code --wait" # สำหรับ VS Code
# เปิดใช้งานสีในการแสดงผล
git config --global color.ui auto
graph LR
A[Working Directory
พื้นที่ทำงาน] -->|git add| B[Staging Area
พื้นที่เตรียมการ]
B -->|git commit| C[Repository
คลังเก็บข้อมูล]
C -->|git checkout| A
style A fill:#e1f5ff
style B fill:#fff4e1
style C fill:#e8f5e9
sequenceDiagram
participant WD as Working Directory
participant SA as Staging Area
participant LR as Local Repository
participant RR as Remote Repository
WD->>SA: git add
SA->>LR: git commit
LR->>RR: git push
RR->>LR: git fetch/pull
LR->>WD: git checkout
# สร้างโฟลเดอร์โปรเจกต์
mkdir my-project
cd my-project
# เริ่มต้น Git repository
git init
# จะเห็นข้อความ: Initialized empty Git repository in /path/to/my-project/.git/
# ดูสถานะปัจจุบันของ repository
git status
# แสดงผลแบบย่อ
git status -s
# เพิ่มไฟล์เดียว
git add index.html
# เพิ่มหลายไฟล์
git add index.html style.css script.js
# เพิ่มไฟล์ทั้งหมดในโฟลเดอร์
git add .
# เพิ่มไฟล์ตามประเภท
git add *.js
# Commit พร้อมข้อความ
git commit -m "Add homepage structure"
# Commit พร้อมเปิด editor เขียนข้อความยาว
git commit
# Commit โดยข้าม staging area (สำหรับไฟล์ที่ tracked แล้ว)
git commit -am "Update styling"
ข้อความ Commit ที่ดี:
# ดูประวัติทั้งหมด
git log
# ดูแบบย่อ (แต่ละ commit 1 บรรทัด)
git log --oneline
# ดูพร้อมกราฟ branch
git log --oneline --graph --all
# ดูประวัติของไฟล์เฉพาะ
git log -- index.html
# ดู 5 commit ล่าสุด
git log -5
# ดูความแตกต่างของไฟล์ที่ยังไม่ได้ stage
git diff
# ดูความแตกต่างของไฟล์ที่ stage แล้ว
git diff --staged
# ดูความแตกต่างของไฟล์เฉพาะ
git diff index.html
# เปรียบเทียบระหว่าง 2 commit
git diff abc123 def456
Branch เปรียบเสมือน "แยกเส้นทางการพัฒนา" ออกมาจากโค้ดหลัก เพื่อพัฒนาฟีเจอร์ใหม่หรือแก้บั๊กโดยไม่กระทบโค้ดหลัก
%%{init: {'theme':'base', 'themeVariables': { 'commitLabelColor':'#ffffff', 'commitLabelBackground':'#000000', 'commitLabelFontSize':'14px', 'git0':'#58a6ff', 'git1':'#3fb950', 'git2':'#d29922', 'git3':'#f778ba', 'gitBranchLabel0':'#ffffff', 'gitBranchLabel1':'#ffffff', 'gitBranchLabel2':'#ffffff'}}}%%
gitGraph
commit id: "Initial commit"
commit id: "Add base structure"
branch feature-login
checkout feature-login
commit id: "Create login form"
commit id: "Add validation"
checkout main
commit id: "Fix typo"
checkout feature-login
commit id: "Complete login"
checkout main
merge feature-login
commit id: "Deploy v1.0"
# ดู branch ทั้งหมด
git branch
# ดู branch ทั้งหมดรวม remote
git branch -a
# สร้าง branch ใหม่
git branch feature-navbar
# สลับไปยัง branch อื่น
git checkout feature-navbar
# สร้างและสลับไปยัง branch ใหม่ในคำสั่งเดียว
git checkout -b feature-navbar
# ใช้ switch (คำสั่งใหม่กว่า)
git switch feature-navbar
git switch -c feature-navbar # สร้างใหม่
# เปลี่ยนชื่อ branch
git branch -m old-name new-name
# ลบ branch
git branch -d feature-navbar # ลบแบบปลอดภัย (ต้อง merge แล้ว)
git branch -D feature-navbar # ลบแบบบังคับ
# สลับไปยัง branch ที่ต้องการรับการเปลี่ยนแปลง (เช่น main)
git checkout main
# Merge branch อื่นเข้ามา
git merge feature-navbar
# หากเกิด conflict จะต้องแก้ไขด้วยมือ แล้ว
git add .
git commit -m "Merge feature-navbar"
ประเภทของ Merge:
%%{init: {'theme':'base', 'themeVariables': { 'commitLabelColor':'#ffffff', 'commitLabelBackground':'#000000', 'commitLabelFontSize':'14px', 'git0':'#58a6ff', 'git1':'#3fb950', 'git2':'#d29922', 'git3':'#f778ba', 'gitBranchLabel0':'#ffffff', 'gitBranchLabel1':'#ffffff', 'gitBranchLabel2':'#ffffff'}}}%%
gitGraph
commit id: "A"
commit id: "B"
branch feature
commit id: "C"
commit id: "D"
checkout main
commit id: "E"
merge feature id: "Merge commit"
commit id: "F"
# Rebase feature branch บน main
git checkout feature-navbar
git rebase main
# หากมี conflict ให้แก้ไข แล้ว
git add .
git rebase --continue
# ยกเลิก rebase
git rebase --abort
Merge vs Rebase:
# เพิ่ม remote ชื่อ origin
git remote add origin https://github.com/username/repo-name.git
# ดู remote ที่มี
git remote -v
# ดูข้อมูลเพิ่มเติม
git remote show origin
# เปลี่ยน URL ของ remote
git remote set-url origin https://github.com/username/new-repo.git
# ลบ remote
git remote remove origin
# Clone repository จาก remote
git clone https://github.com/username/repo-name.git
# Clone และเปลี่ยนชื่อโฟลเดอร์
git clone https://github.com/username/repo-name.git my-folder
# Clone เฉพาะ branch เดียว
git clone --branch develop --single-branch https://github.com/username/repo-name.git
# Push ไปยัง remote (ครั้งแรก)
git push -u origin main
# Push ครั้งต่อไป
git push
# Push branch ใหม่
git push -u origin feature-navbar
# Push โดยบังคับ (ระวัง! จะเขียนทับประวัติ)
git push --force
# Push โดยปลอดภัย (ไม่เขียนทับถ้ามีการเปลี่ยนแปลง)
git push --force-with-lease
# Fetch ข้อมูลจาก remote (ยังไม่ merge)
git fetch origin
# Pull = Fetch + Merge
git pull origin main
# Pull ด้วย rebase แทน merge
git pull --rebase origin main
# Pull เฉพาะ branch ปัจจุบัน
git pull
# สร้างและเข้าโฟลเดอร์โปรเจกต์
mkdir portfolio-website
cd portfolio-website
# เริ่มต้น Git
git init
# สร้างไฟล์ HTML
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Portfolio Website</h1>
</header>
<main>
<p>Welcome to my portfolio!</p>
</main>
<script src="script.js"></script>
</body>
</html>
EOF
# สร้างไฟล์ CSS
touch style.css
# สร้างไฟล์ JavaScript
touch script.js
# สร้าง .gitignore
cat > .gitignore << 'EOF'
# Dependencies
node_modules/
# Logs
*.log
# OS files
.DS_Store
Thumbs.db
# IDE
.vscode/
.idea/
EOF
# เพิ่มไฟล์ทั้งหมด
git add .
# ตรวจสอบสถานะ
git status
# Commit
git commit -m "Initial commit: Add basic HTML structure"
# สร้าง branch สำหรับ navigation
git checkout -b feature-navigation
# แก้ไฟล์ index.html (เพิ่ม navigation bar)
cat >> index.html << 'EOF'
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
EOF
# เพิ่ม CSS สำหรับ navigation
cat > style.css << 'EOF'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #333;
padding: 1rem;
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
justify-content: center;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
nav a:hover {
color: #4CAF50;
}
EOF
# Commit การเปลี่ยนแปลง
git add .
git commit -m "Add navigation bar with styling"
# ยังอยู่บน branch feature-navigation
# เพิ่มส่วน About
# ... แก้ไขไฟล์ ...
git add .
git commit -m "Add about section"
# ดูประวัติ
git log --oneline --graph
# กลับไปที่ main branch
git checkout main
# Merge feature-navigation
git merge feature-navigation
# ลบ branch ที่ไม่ใช้แล้ว
git branch -d feature-navigation
# สร้าง repository บน GitHub ก่อน (ผ่าน web interface)
# จากนั้นเชื่อมต่อ
git remote add origin https://github.com/yourusername/portfolio-website.git
# Push ไปยัง GitHub
git push -u origin main
# สร้าง branch ใหม่สำหรับ projects section
git checkout -b feature-projects
# แก้ไขและ commit
# ... พัฒนาฟีเจอร์ ...
git add .
git commit -m "Add projects showcase section"
# Push branch ใหม่ไปยัง GitHub
git push -u origin feature-projects
%%{init: {'theme':'base', 'themeVariables': { 'commitLabelColor':'#ffffff', 'commitLabelBackground':'#000000', 'commitLabelFontSize':'14px', 'git0':'#58a6ff', 'git1':'#3fb950', 'git2':'#d29922', 'git3':'#f778ba', 'gitBranchLabel0':'#ffffff', 'gitBranchLabel1':'#ffffff', 'gitBranchLabel2':'#ffffff'}}}%%
gitGraph
commit id: "Initial"
commit id: "Feature 1"
commit id: "Feature 2"
commit id: "Bug fix"
commit id: "Feature 3"
# ทำงานบน main branch เท่านั้น
git checkout main
# แก้ไข
git add .
git commit -m "Add feature"
git push
%%{init: {'theme':'base', 'themeVariables': { 'commitLabelColor':'#ffffff', 'commitLabelBackground':'#000000', 'commitLabelFontSize':'14px', 'git0':'#58a6ff', 'git1':'#3fb950', 'git2':'#d29922', 'git3':'#f778ba', 'gitBranchLabel0':'#ffffff', 'gitBranchLabel1':'#ffffff', 'gitBranchLabel2':'#ffffff'}}}%%
gitGraph
commit id: "Init"
branch feature-A
checkout feature-A
commit id: "Work on A"
commit id: "Complete A"
checkout main
merge feature-A
branch feature-B
checkout feature-B
commit id: "Work on B"
checkout main
merge feature-B
ขั้นตอน:
# 1. สร้าง feature branch
git checkout -b feature-new-button
# 2. พัฒนาและ commit
git add .
git commit -m "Implement new button"
# 3. Push ไปยัง remote
git push -u origin feature-new-button
# 4. สร้าง Pull Request บน GitHub
# 5. หลัง review และ approve
git checkout main
git pull
git merge feature-new-button
git push
# 6. ลบ branch
git branch -d feature-new-button
git push origin --delete feature-new-button
%%{init: {'theme':'base', 'themeVariables': { 'commitLabelColor':'#ffffff', 'commitLabelBackground':'#000000', 'commitLabelFontSize':'14px', 'git0':'#58a6ff', 'git1':'#3fb950', 'git2':'#d29922', 'git3':'#f778ba', 'gitBranchLabel0':'#ffffff', 'gitBranchLabel1':'#ffffff', 'gitBranchLabel2':'#ffffff'}}}%%
gitGraph
commit id: "Init"
branch develop
checkout develop
commit id: "Feature 1"
branch feature-x
checkout feature-x
commit id: "Work on X"
checkout develop
merge feature-x
branch release-1.0
checkout release-1.0
commit id: "Bug fixes"
checkout main
merge release-1.0 tag: "v1.0"
checkout develop
merge release-1.0
Branch หลัก:
main - โค้ดที่ productiondevelop - โค้ดที่กำลังพัฒนาfeature/* - ฟีเจอร์ใหม่release/* - เตรียม releasehotfix/* - แก้บั๊กด่วน# ยกเลิกการแก้ไขไฟล์ (ก่อน staging)
git checkout -- index.html
# ยกเลิกการ stage ไฟล์
git reset HEAD index.html
# ย้อน commit ล่าสุด (เก็บการเปลี่ยนแปลง)
git reset --soft HEAD~1
# ย้อน commit ล่าสุด (ยกเลิกการเปลี่ยนแปลง)
git reset --hard HEAD~1
# เอาไฟล์จาก commit ก่อนหน้ามา
git checkout HEAD~1 -- index.html
# แก้ข้อความ commit ล่าสุด
git commit --amend -m "New commit message"
# เพิ่มไฟล์เข้า commit ล่าสุด
git add forgotten-file.txt
git commit --amend --no-edit
# เก็บการเปลี่ยนแปลงชั่วคราว
git stash
# เก็บพร้อมข้อความ
git stash save "WIP: working on navbar"
# ดูรายการ stash
git stash list
# นำ stash กลับมาใช้
git stash pop
# นำ stash กลับมา (แต่ยังเก็บไว้)
git stash apply
# นำ stash เฉพาะ
git stash apply stash@{1}
# ลบ stash
git stash drop stash@{0}
# ลบ stash ทั้งหมด
git stash clear
เมื่อเกิด conflict:
# ดู conflict
git status
# เปิดไฟล์ที่ conflict จะเห็นเครื่องหมายแบบนี้:
<<<<<<< HEAD
Your changes
=======
Their changes
>>>>>>> branch-name
# แก้ไขไฟล์ด้วยมือ ลบเครื่องหมาย <<<, ===, >>>
# เลือกโค้ดที่ต้องการ หรือรวมทั้งสองส่วน
# หลังแก้เสร็จ
git add .
git commit -m "Resolve merge conflict"
# ดูรายละเอียด commit
git show abc1234
# ดูไฟล์ที่แก้ไขใน commit
git show abc1234 --name-only
# ดูการเปลี่ยนแปลงของไฟล์เฉพาะ
git show abc1234:path/to/file.js
# ค้นหาข้อความใน commit messages
git log --grep="bug fix"
# ค้นหาใน code
git log -S"function name"
# ค้นหาผู้ที่แก้ไขแต่ละบรรทัด
git blame index.html
# ค้นหาว่า commit ไหนสร้างบั๊ก
git bisect start
git bisect bad # commit ปัจจุบันมีบั๊ก
git bisect good abc123 # commit นี้ไม่มีบั๊ก
# Git จะช่วยหา commit ที่สร้างบั๊ก
# เอา commit เฉพาะมาใช้
git cherry-pick abc1234
# เอาหลาย commit
git cherry-pick abc1234 def5678
# Revert commit เฉพาะ
git revert abc1234
# Revert หลาย commit
git revert abc1234..def5678
# ดูว่าจะลบอะไรบ้าง (dry run)
git clean -n
# ลบไฟล์
git clean -f
# ลบทั้งไฟล์และโฟลเดอร์
git clean -fd
# ลบรวมไฟล์ที่ ignore ด้วย
git clean -fdx
# ดู reflog
git reflog
# ย้อนกลับไปยังสถานะใดก็ได้
git reset --hard HEAD@{2}
# สร้าง lightweight tag
git tag v1.0.0
# สร้าง annotated tag (แนะนำ)
git tag -a v1.0.0 -m "Release version 1.0.0"
# ดู tag ทั้งหมด
git tag
# ดูข้อมูล tag
git show v1.0.0
# Push tag ไป remote
git push origin v1.0.0
# Push tag ทั้งหมด
git push origin --tags
# ลบ tag
git tag -d v1.0.0
git push origin :refs/tags/v1.0.0
รูปแบบที่แนะนำ:
<type>: <subject>
<body>
<footer>
Types:
feat: ฟีเจอร์ใหม่fix: แก้บั๊กdocs: เอกสารstyle: การจัดรูปแบบ (ไม่เปลี่ยนโค้ด)refactor: ปรับโครงสร้างโค้ดtest: เพิ่มหรือแก้ testchore: งานเบ็ดเตล็ดตัวอย่าง:
feat: Add user authentication system
- Implement JWT token generation
- Add login and signup endpoints
- Create user model and database schema
Closes #123
# Operating System
.DS_Store
Thumbs.db
# IDEs
.vscode/
.idea/
*.swp
*.swo
# Dependencies
node_modules/
vendor/
# Build outputs
dist/
build/
*.min.js
*.min.css
# Logs
*.log
logs/
# Environment
.env
.env.local
# Temporary files
*.tmp
*.temp
# ตรวจสอบว่า commit อะไรบ้างที่มี sensitive data
git log --all --full-history -- path/to/sensitive/file
# ลบไฟล์ออกจากประวัติทั้งหมด (ระวัง!)
git filter-branch --force --index-filter \
"git rm --cached --ignore-unmatch path/to/sensitive/file" \
--prune-empty --tag-name-filter cat -- --all
# หรือใช้ BFG Repo-Cleaner (แนะนำ)
bfg --delete-files sensitive-file.txt
git reflog expire --expire=now --all
git gc --prune=now --aggressive
sequenceDiagram
participant Dev as Developer
participant FB as Feature Branch
participant GH as GitHub
participant Rev as Reviewer
participant Main as Main Branch
Dev->>FB: Create feature branch
Dev->>FB: Make commits
Dev->>GH: Push to remote
Dev->>GH: Create Pull Request
GH->>Rev: Request review
Rev->>GH: Review code
alt Approved
Rev->>GH: Approve PR
GH->>Main: Merge to main
else Changes requested
Rev->>GH: Request changes
GH->>Dev: Notify
Dev->>FB: Make changes
Dev->>GH: Push updates
end
# 1. Pull update ล่าสุด
git checkout main
git pull origin main
# 2. สร้าง feature branch
git checkout -b feature/add-payment-system
# 3. พัฒนาและ commit
git add .
git commit -m "feat: Add Stripe payment integration"
# 4. Push ไป remote
git push -u origin feature/add-payment-system
# 5. สร้าง Pull Request บน GitHub/GitLab
# 6. รอการ review และแก้ไขตาม feedback
# 7. หลัง merge แล้ว
git checkout main
git pull origin main
git branch -d feature/add-payment-system
# ตั้งค่า aliases
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'
git config --global alias.visual 'log --oneline --graph --all --decorate'
git config --global alias.amend 'commit --amend --no-edit'
# ใช้งาน
git st # แทน git status
git co main # แทน git checkout main
git visual # ดู log แบบกราฟ
Git เป็นเครื่องมือที่ทรงพลังสำหรับการจัดการโค้ดและการทำงานร่วมกันเป็นทีม คำสั่งพื้นฐานที่ควรจำ:
# เริ่มต้น
git init
git clone <url>
# การทำงานพื้นฐาน
git status
git add .
git commit -m "message"
git push
git pull
# Branch
git branch
git checkout -b <branch-name>
git merge <branch-name>
# ยกเลิก/แก้ไข
git reset
git revert
git stash
จำไว้ว่า:
การเรียนรู้ Git อาจดูยากในตอนแรก แต่เมื่อคุ้นชินแล้วจะเป็นเครื่องมือที่ขาดไม่ได้สำหรับการพัฒนาซอฟต์แวร์ ฝึกฝนบ่อยๆ แล้วคุณจะเชี่ยวชาญในไม่ช้า!
Happy Coding! 🚀