การติดตั้งและการตั้งค่า Git เพื่อดีพลอยโค้ดขึ้น Vercel (ละเอียดทุกขั้นตอน)

ดาวน์โหลดที่จำเป็น (ลิงก์ทางการ)

• Git (Official): https://git-scm.com/downloads
• Git for Windows (ตรง): https://git-scm.com/download/win
• Git for macOS: https://git-scm.com/download/mac
• Git for Linux/Unix: https://git-scm.com/download/linux
• GitHub Desktop (ทางเลือกสำหรับคนไม่อยากใช้คำสั่ง): https://desktop.github.com/
• สร้าง GitHub Account: https://github.com/signup
• ดาวน์โหลด VS Code (แนะนำ): https://code.visualstudio.com/download
• สมัคร/เข้าสู่ระบบ Vercel: https://vercel.com/login
• Vercel Docs: Deploy จาก Git Repository: https://vercel.com/docs/deployments/git
• Next.js Docs (Deploy บน Vercel): https://nextjs.org/docs/app/building-your-application/deploying

บทความนี้เหมาะกับใคร?

• มือใหม่ที่ยังไม่เคยใช้ Git มาก่อน แต่อยากอัปโค้ดขึ้น GitHub และดีพลอยขึ้น Vercel
• คนที่ติดปัญหา Git (เช่น push ไม่ได้, permission denied, remote not found)
• คนที่ทำโปรเจกต์ Next.js/React หรือเว็บทั่วไป แล้วอยากดีพลอยเร็ว ๆ บน Vercel

Git คืออะไร และเกี่ยวอะไรกับ Vercel?

Git คือระบบจัดการเวอร์ชันของโค้ด (Version Control) ที่ช่วยให้เราเก็บประวัติการแก้ไข, ย้อนกลับเวอร์ชัน, ทำงานร่วมกับทีมได้ง่าย ส่วน Vercel สามารถดีพลอยโปรเจกต์จาก GitHub/GitLab/Bitbucket ได้โดยตรง เมื่อเราพุชโค้ดขึ้น repo แล้ว Vercel จะ build และ deploy ให้อัตโนมัติ

1) ติดตั้ง Git

Windows

1. ดาวน์โหลดและติดตั้ง Git for Windows
2. ระหว่างติดตั้ง แนะนำเลือกตัวเลือกมาตรฐาน (Default) ก่อน
3. ติดตั้งเสร็จ เปิด Git Bash หรือ Command Prompt แล้วเช็คเวอร์ชัน:

git --version

macOS

วิธีที่ง่ายที่สุดคือใช้ Xcode Command Line Tools หรือ Homebrew

• แบบเร็ว (Xcode CLI):

git --version

ถ้ายังไม่มี ระบบจะถามให้ติดตั้ง Command Line Tools ให้กดติดตั้ง

• แบบ Homebrew (ถ้ามี brew แล้ว):

brew install git
git --version

Linux (Ubuntu/Debian)

sudo apt update
sudo apt install git -y
git --version

2) ตั้งค่า Git ครั้งแรก (สำคัญมาก)

ต้องตั้งค่า ชื่อ และ อีเมล เพื่อให้ commit มีตัวตนชัดเจน

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

ตรวจสอบค่าที่ตั้ง:

git config --global --list

ตั้งค่าชื่อ Branch เริ่มต้นเป็น main (แนะนำ)

git config --global init.defaultBranch main

ตั้งค่า line ending (Windows แนะนำทำ)

git config --global core.autocrlf true

3) สร้างโปรเจกต์ให้เป็น Git Repository

เข้าโฟลเดอร์โปรเจกต์ของคุณก่อน เช่น โปรเจกต์ Next.js

cd path/to/your-project

เริ่มต้น Git:

git init

เช็คสถานะไฟล์:

git status

สร้างไฟล์ .gitignore (แนะนำมาก)

สำหรับ Next.js ควร ignore โฟลเดอร์ build และ node_modules

# .gitignore (ตัวอย่างสำหรับ Next.js)
node_modules
.next
out
dist
.env
.env.local
.DS_Store

4) Commit ครั้งแรก

เพิ่มไฟล์ทั้งหมดเข้ารายการ staging

git add .

commit พร้อมข้อความ

git commit -m "Initial commit"

5) สร้าง GitHub Repository และเชื่อม remote

1. ไปที่ GitHub แล้วสร้าง repo ใหม่ (ตั้งชื่ออะไรก็ได้)
2. เลือกเป็น Public/Private ตามต้องการ
3. แนะนำ: ยังไม่ต้องสร้าง README/License ตอนสร้าง repo (เพื่อเลี่ยงชนกับของเรา) แต่ถ้าสร้างไปแล้วก็แก้ได้

เชื่อม remote (HTTPS)

git remote add origin https://github.com/USERNAME/REPO_NAME.git
git remote -v

พุชขึ้น GitHub

git branch -M main
git push -u origin main

ถ้าถาม Username/Password และเข้าไม่ได้: ปัจจุบัน GitHub ไม่ให้ใช้รหัสผ่านปกติกับ HTTPS แล้ว ให้ใช้ Personal Access Token (PAT) แทน หรือเปลี่ยนไปใช้ SSH (แนะนำ)

6) แนะนำให้ใช้ SSH (ง่ายและลื่นกว่าในระยะยาว)

6.1 สร้าง SSH Key

Windows (Git Bash) / macOS / Linux ทำคล้ายกัน

ssh-keygen -t ed25519 -C "youremail@example.com"

กด Enter ผ่านได้เลย (หรือจะตั้ง passphrase ก็ได้)

6.2 เปิด SSH agent และ add key

# macOS/Linux
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

Windows (Git Bash) ส่วนมากใช้คำสั่งเดียวกันได้:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

6.3 คัดลอก public key ไปใส่ใน GitHub

cat ~/.ssh/id_ed25519.pub

คัดลอกผลลัพธ์ทั้งหมด แล้วไปที่ GitHub > Settings > SSH and GPG keys > New SSH key

6.4 ทดสอบ SSH

ssh -T git@github.com

ถ้าขึ้นข้อความแนว ๆ ว่า "You've successfully authenticated" ถือว่าใช้ได้

6.5 เปลี่ยน remote เป็น SSH

git remote set-url origin git@github.com:USERNAME/REPO_NAME.git
git remote -v

7) ดีพลอยขึ้น Vercel (วิธีมาตรฐาน: Import จาก GitHub)

1. เข้าสู่ระบบ Vercel
2. ไปที่ Add New Project
3. เลือก Import Git Repository
4. เลือก repo ที่พึ่ง push ขึ้น GitHub
5. ตั้งค่าโปรเจกต์:
   • Framework Preset: ให้ Vercel เดาอัตโนมัติ (Next.js มักเจอเอง)
   • Root Directory: เลือกโฟลเดอร์โปรเจกต์ (ปกติเป็น root)
   • Build Command / Output: ปกติไม่ต้องแก้
6. กด Deploy

การ Deploy อัตโนมัติ (Auto Deploy)

หลังจากเชื่อม Git แล้ว ทุกครั้งที่คุณ git push ไปที่ branch หลัก (เช่น main) Vercel จะ build และ deploy ให้อัตโนมัติ

8) ตั้งค่า Environment Variables บน Vercel (ถ้าโปรเจกต์มี .env)

ถ้าโปรเจกต์คุณมีไฟล์ .env หรือ .env.local (เช่น API key, DB url) ห้าม push ของจริงขึ้น GitHub และต้องไปตั้งใน Vercel แทน

1. Project บน Vercel > Settings > Environment Variables
2. เพิ่ม key/value ให้ครบ
3. Redeploy อีกครั้ง

9) ปัญหาที่พบบ่อย + วิธีแก้ (สำคัญ)

9.1 push ไม่ได้: "rejected (fetch first)"

สาเหตุ: remote มี commit ที่เราไม่มี (เช่น repo มี README อยู่แล้ว)

git pull --rebase origin main
git push origin main

9.2 error: "Permission denied (publickey)" ตอนใช้ SSH

• ยังไม่ได้ add SSH key ใน GitHub
• ยังไม่ได้ ssh-add key
• ใช้ key คนละตัวกับที่ add ใน GitHub

ลองทดสอบก่อน:

ssh -T git@github.com

9.3 error: "remote origin already exists"

แปลว่ามี origin อยู่แล้ว ให้แก้ URL แทน:

git remote set-url origin YOUR_REMOTE_URL
git remote -v

9.4 Vercel build fail เพราะหา package ไม่เจอ

• ลืมติดตั้ง dependency: ตรวจ package.json
• พุชไฟล์ไม่ครบ
• ใช้ Node version ไม่ตรง

แนะนำ: ตั้ง Node version ใน Vercel > Settings > General > Node.js Version และเช็ค log build

10) สรุปขั้นตอนแบบเร็ว

1. ติดตั้ง Git + เช็ค git --version
2. ตั้งค่า user.name, user.email
3. ไปโฟลเดอร์โปรเจกต์: git init
4. ทำ .gitignore ให้ถูก
5. git add . และ git commit -m
6. สร้าง repo บน GitHub + ตั้ง remote
7. git push -u origin main
8. เข้า Vercel > Import repo > Deploy
9. ตั้งค่า Env ใน Vercel ถ้ามี

หากคุณทำตามครบทั้งหมดนี้ คุณจะสามารถดีพลอยขึ้น Vercel ได้แบบอัตโนมัติทุกครั้งที่ push โค้ดขึ้น GitHub และจัดการเวอร์ชันของโปรเจกต์ได้อย่างเป็นระบบ