/Projects
Let’s talk
Git
ProjectsCS ChallengeDeploymentGit

Git และ GitHub: commit และ push

ใช้ใน Challenge Day 2

Git คือโปรแกรมบนเครื่องที่บันทึกประวัติโค้ดเป็น “จุดเซฟ” เรียกว่า commit ย้อนกลับได้ทุกเมื่อ ส่วน GitHub คือเว็บที่เก็บ repository ไว้บนคลาวด์ ให้คนอื่นเห็นและให้ Vercel ดึงไป deploy ได้

At a glance

คำศัพท์ความหมาย
Repository (repo)โฟลเดอร์โปรเจกต์ที่ Git ติดตามประวัติ
Staging areaไฟล์ที่เลือกแล้วว่าจะเอาเข้า commit ถัดไป (git add)
Commitจุดเซฟ 1 จุด พร้อมข้อความว่าเปลี่ยนอะไร
Remote (origin)repo ฉบับบน GitHub
Push / Pullส่ง commit ขึ้น GitHub / ดึง commit ใหม่ลงมา

How it works

แก้ไฟล์  ──git add──▶  Staging  ──git commit──▶  Local repo  ──git push──▶  GitHub

Git เก็บประวัติบนเครื่องของคุณ แม้ไม่มีอินเทอร์เน็ตก็ commit ได้ พอ git push ประวัติทั้งหมดจะไปอยู่บน GitHub ด้วย

Installation

ดาวน์โหลดจาก git-scm.com/downloads แล้วกด Next ตามค่าเริ่มต้น จะได้ Git Bash มาด้วย หรือ

winget install -e --id Git.Git

  1. เช็กเวอร์ชัน

    git --version

  2. บอก Git ว่าคุณคือใคร

    ทำครั้งเดียวต่อเครื่อง ใช้อีเมลเดียวกับบัญชี GitHub

    git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main

  3. สมัคร GitHub

    สมัครที่ github.com/signup ถ้ายังไม่มีบัญชี

เอาโปรเจกต์ขึ้น GitHub ครั้งแรก

  1. สร้าง repo บน GitHub

    ไปที่ github.com/new ตั้งชื่อ แล้ว ไม่ต้อง ติ๊ก Add README

  2. commit บนเครื่อง

    git init                          # เริ่มให้ Git ติดตามโฟลเดอร์นี้
git add .                         # เลือกทุกไฟล์เข้า staging
git commit -m "first commit"      # สร้างจุดเซฟ

  3. ผูกกับ GitHub แล้ว push

    git branch -M main
git remote add origin https://github.com/<username>/<repo>.git
git push -u origin main

ครั้งต่อไปที่แก้โค้ด ใช้แค่ 3 คำสั่งวนไป

git add .
git commit -m "add projects section"
git push

push แล้วถูกถามรหัสผ่าน?Windows จะเปิดหน้าต่างให้ล็อกอิน GitHub ผ่านเบราว์เซอร์ ถ้า macOS ถามรหัสผ่าน ให้ติดตั้ง GitHub CLI แล้วรัน gh auth login

คำสั่งหลัก

คำสั่งทำอะไร
git statusดูว่าไฟล์ไหนแก้ ไฟล์ไหนอยู่ใน staging (ใช้บ่อยที่สุด)
git add <file> / git add .เลือกไฟล์เข้า staging
git commit -m "ข้อความ"สร้าง commit
git log --onelineดูประวัติ commit แบบย่อ
git diffดูว่าแก้อะไรไปบ้าง
git push / git pullส่งขึ้น / ดึงลงจาก GitHub
git clone <url>ดาวน์โหลด repo ลงเครื่อง

สร้างไฟล์ .gitignore เพื่อบอก Git ว่าไฟล์ไหนไม่ต้องเก็บ

node_modules/
.env
.DS_Store

ฝึกต่อ

เว็บสำหรับลงมือทำ

ลงมือทำ · learngitbranching.js.orgLearn Git Branching เกมฝึก Git แบบเห็นภาพ เลือกภาษาไทยได้ลงมือทำ · w3schools.comW3Schools Git ทีละคำสั่งพร้อมแบบฝึกหัดลงมือทำ · docs.github.comGitHub: Hello World สร้าง repo และ commit แรกบน GitHubเอกสาร · git-scm.comPro Git (หนังสือฟรี) อ้างอิงฉบับเต็ม

วิดีโอเรียนเอง

วิดีโอ · youtube.comGit Explained in 100 Seconds Fireshipวิดีโอ · youtube.comGit and GitHub for Beginners freeCodeCamp · 1 ชม.วิดีโอ · youtube.comค้นคลิปภาษาไทย: Git และ GitHub

Next steps

  • Vercel: push แล้วเว็บขึ้นเอง
  • GitHub: ทำงานเป็นทีมด้วย branch และ pull request
CS ChallengeLast updated Oct 2026