[แนะนำการเชื่อมต่อ Git] คู่มือการใช้งาน Git และ GitHub เบื้องต้นใน VSCode

แนะนำตัว: ผมคือคนที่สร้างเว็บไซต์ขึ้นมา 2 แห่งจากความรู้ที่เป็นศูนย์ และจะมาอธิบายให้ฟัง

สวัสดีครับ! ผมที่กำลังเขียนบทความนี้อยู่ เมื่อไม่กี่เดือนก่อนก็เป็นมือใหม่ที่มีความรู้ด้านโปรแกรมมิ่งเป็นศูนย์เหมือนกับทุกๆ คนครับ

ด้วยความตั้งใจที่ว่า "อยากสร้างบริการของตัวเอง!" ผมจึงลองผิดลองถูกโดยมี AI เป็นคู่หู และในที่สุดก็สามารถสร้างเว็บไซต์ 2 แห่ง (buyonjapan.com, copicode.com) ขึ้นมาได้ด้วยตัวเองภายในเดือนครึ่ง

ในกระบวนการนั้น อุปสรรคใหญ่แรกที่ผมเจอคือ "Git" และ "GitHub" นี่แหละครับ ทุกครั้งที่เจอข้อผิดพลาดก็รู้สึกท้อใจ แต่เมื่อแก้ปัญหาไปทีละอย่าง ตอนนี้มันกลายเป็นคู่หูที่ดีที่สุดของผมไปแล้ว ในบทความนี้ ผมจะกลั่นกรองเฉพาะ "สิ่งที่มือใหม่ต้องการรู้จริงๆ" จากประสบการณ์ตรงของผมมาให้ทุกคนได้อ่านกันครับ

[ขั้นตอนที่ 0] มาวอร์มอัพกันก่อน! เตรียมเครื่องมือที่จำเป็นให้พร้อม

การเตรียมตัวเป็นสิ่งสำคัญในทุกเรื่อง ก่อนจะเริ่มทำงานจริงจัง ลองตรวจสอบดูว่าคุณได้ติดตั้งเครื่องมือ 3 อย่างนี้ลงในคอมพิวเตอร์ของคุณแล้วหรือยัง ถ้ายัง ก็เข้าไปที่เว็บไซต์ทางการแล้วติดตั้งได้เลย!

• VSCode (Visual Studio Code): ปราสาทของเรา ซึ่งเป็นเอดิเตอร์ที่มีฟังก์ชันครบครัน
  ➡️ ไปที่เว็บไซต์ทางการของ VSCode
• Git: ไทม์แมชชีนที่ช่วยบันทึกและจัดการประวัติการเปลี่ยนแปลงไฟล์
  ➡️ ไปที่เว็บไซต์ทางการของ Git
• บัญชี GitHub: ตู้นิรภัยออนไลน์สำหรับเก็บประวัติที่บันทึกโดย Git
  ➡️ ไปที่เว็บไซต์ทางการของ GitHub

💡 ปัญหาที่มือใหม่เจอบ่อย: "ติดตั้ง Git แล้ว แต่ VSCode มองไม่เห็น!"
กรณีส่วนใหญ่ปัญหานี้จะแก้ไขได้ด้วยการรีสตาร์ทคอมพิวเตอร์ ลองรีสตาร์ทเครื่องหลังจากการติดตั้งดูนะครับ ถ้ายังไม่ได้ผล ตอนติดตั้ง Git ให้ลองเลือกตัวเลือกที่มีคำว่า "(Recommended)" กำกับไว้ ส่วนใหญ่มักจะแก้ปัญหาได้ครับ

[ขั้นตอนที่ 1] บอกชื่อของคุณให้ Git รู้จัก (ทำครั้งแรกครั้งเดียว)

ครั้งแรกเพียงครั้งเดียว คุณต้องแนะนำตัวเองกับ Git ว่า "ฉันคือคนที่ใช้คอมพิวเตอร์เครื่องนี้" เพื่อบันทึกชื่อว่าใครเป็นคนสร้างข้อมูลที่บันทึก (commit) ที่เราจะสร้างขึ้น

ขั้นแรก ให้เปิด VSCode แล้วไปที่เมนูด้านบน "Terminal" แล้วเลือก "New Terminal" เพื่อเปิดหน้าต่าง Terminal (หน้าจอดำ) ขึ้นมาด้านล่าง

เมื่อ Terminal แสดงขึ้นมาแล้ว ให้คัดลอกและวางคำสั่ง 2 คำสั่งต่อไปนี้ทีละบรรทัด แล้วกดปุ่ม Enter เพื่อรัน

ขั้นแรก ตั้งชื่อผู้ใช้ของคุณ แก้ไขส่วน "Your Name" เป็นชื่อผู้ใช้ GitHub ของคุณหรือชื่ออื่นที่ต้องการ

git config --global user.name "Your Name"

ต่อไปคือที่อยู่อีเมล แก้ไขส่วน "your.email@example.com" เป็นที่อยู่อีเมลที่คุณลงทะเบียนไว้กับ GitHub

git config --global user.email "your.email@example.com"

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

[ขั้นตอนที่ 2] เริ่มติดตามโปรเจกต์ (git init)

ต่อไป เรามาเริ่มนำโปรเจกต์ของคุณเข้าสู่การจัดการของ Git กันเลยครับ ขั้นตอนนี้เรียกว่า "การเริ่มต้น repository" อาจจะฟังดูยาก แต่ถ้าใช้ VSCode ก็แค่คลิกปุ่มเดียวก็เสร็จแล้ว

1. เปิดโฟลเดอร์โปรเจกต์ที่คุณต้องการจัดการเวอร์ชันใน VSCode (เช่น โฟลเดอร์ `my-project`)
2. จาก Activity Bar ด้านซ้าย คลิกที่ไอคอนรูปกิ่งไม้แตกแขนงอันที่สามจากบนสุด (Source Control)
3. จะมีปุ่มสีน้ำเงิน "Initialize Repository" แสดงขึ้นมา ให้คลิกได้เลย!

เพียงเท่านี้ โฟลเดอร์ที่ซ่อนอยู่ชื่อ .git ก็จะถูกสร้างขึ้นในโฟลเดอร์โปรเจกต์ของคุณ และ Git ก็จะเริ่มติดตามการเปลี่ยนแปลงไฟล์ ง่ายจนน่าทึ่งเลยใช่ไหมครับ!

ถือโอกาสสร้างไฟล์ .gitignore ไปด้วยเลย!

ในโปรเจกต์ อาจมีไฟล์ที่คุณไม่ต้องการให้ Git ติดตาม (หรือไม่ต้องการอัปโหลดขึ้น GitHub) เช่น ข้อมูลส่วนตัวอย่างรหัสผ่าน หรือไฟล์ที่สร้างขึ้นอัตโนมัติ ไฟล์ .gitignore คือไฟล์ที่ใช้ระบุไฟล์เหล่านั้นล่วงหน้า

ให้สร้างไฟล์ใหม่ชื่อ .gitignore ในระดับบนสุด (root) ของโปรเจกต์ แล้วเขียนชื่อไฟล์หรือโฟลเดอร์ที่คุณต้องการละเว้นลงไป ตัวอย่างเช่น

# ไฟล์ที่ OS สร้างขึ้นอัตโนมัติ
.DS_Store

# ไฟล์ตั้งค่าที่ใช้เก็บรหัสผ่าน
.env

# โฟลเดอร์ที่ติดตั้งแพ็คเกจจำนวนมาก
node_modules

💡 เคล็ดลับ: เป็นเรื่องปกติที่จะไม่รู้ว่าควรละเว้นอะไรในตอนแรก ลองค้นหาด้วยคำว่า "[ชื่อเทคโนโลยีที่ใช้] .gitignore" (เช่น Next.js .gitignore) ก็จะเจอเทมเพลตดีๆ มากมายเลยครับ

[ขั้นตอนที่ 3] บันทึกการเปลี่ยนแปลง (Staging & Commit)

มาถึงจุดเด่นของ Git แล้วครับ เราจะบันทึกการเปลี่ยนแปลงไฟล์เป็น "จุดเซฟ" ซึ่งมี 2 ขั้นตอน

1. Staging (การเตรียม): การเลือก "การเปลี่ยนแปลงที่จะรวมอยู่ในการเซฟครั้งนี้"
2. Commit (การยืนยัน): การยืนยันจุดเซฟโดยแนบข้อความไปกับการเปลี่ยนแปลงที่เลือก

เปรียบเหมือนการย้ายบ้าน คือ "เก็บของลงกล่อง (staging)" -> "เขียนป้าย 'ของใช้ในครัว' แล้วปิดกล่อง (commit)"

งั้นเรามาลองทำกันเลยครับ ขั้นแรก ให้ทำการเปลี่ยนแปลงอะไรบางอย่างในโปรเจกต์ ตัวอย่างเช่น ลองสร้างไฟล์ชื่อ index.html ดู

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ทดสอบ Git</title>
</head>
<body>
  <h1>สวัสดี Git!</h1>
</body>
</html>

เมื่อสร้างและบันทึกไฟล์แล้ว จะมีสัญลักษณ์คล้าย "1" ปรากฏขึ้นบนไอคอน Source Control ของ VSCode ซึ่งเป็นการแจ้งเตือนจาก Git ว่า "มีการเปลี่ยนแปลง 1 รายการ"

เมื่อเปิดแท็บ Source Control จะเห็น index.html แสดงอยู่ในส่วน "Changes"

1. Staging (git add)

เมื่อนำเคอร์เซอร์ไปวางบนไฟล์ที่มีการเปลี่ยนแปลง จะมีไอคอน "+" (Stage Changes) ปรากฏขึ้นมา ให้คลิกที่ไอคอนนั้น การ staging ก็เสร็จสมบูรณ์ ซึ่งเหมือนกับการพิมพ์ git add . ใน terminal

2. Commit (git commit)

เมื่อ staging เสร็จแล้ว ไฟล์จะย้ายไปอยู่ในส่วน "Staged Changes" ต่อไปให้พิมพ์ข้อความที่สื่อให้รู้ว่า "เปลี่ยนแปลงอะไรไป" (เช่น Initial commit, สร้าง index.html) ลงในกล่องข้อความด้านบน

หลังจากพิมพ์ข้อความแล้ว ให้คลิกปุ่ม "Commit" (หรือไอคอนเครื่องหมายถูก) การสร้างจุดเซฟก็เสร็จสมบูรณ์! ซึ่งเหมือนกับการพิมพ์ git commit -m "ข้อความ" ใน terminal

💡 ข้อความ commit คือจดหมายถึงตัวเองในอนาคต!
ตอนนี้อาจจะรู้สึกว่ายุ่งยาก แต่ในอนาคตเมื่อคุณสงสัยว่า "การเปลี่ยนแปลงนี้คืออะไรกันนะ?" ข้อความที่เข้าใจง่ายจะช่วยคุณได้ สร้างนิสัยในการเขียนข้อความที่เฉพาะเจาะจง เช่น "เพิ่มฟังก์ชัน〇〇" "แก้ไขบั๊ก〇〇" กันเถอะครับ

[ขั้นตอนที่ 4] อัปโหลดไปยัง GitHub (git push)

เมื่อการเซฟบนคอมพิวเตอร์ท้องถิ่นเสร็จสิ้นแล้ว ก็ถึงเวลาเก็บไว้ในตู้นิรภัยออนไลน์อย่าง GitHub กันแล้วครับ การกระทำนี้เรียกว่า "การ push"

1. สร้าง repository ว่างบน GitHub

ขั้นแรก ให้สร้าง repository (ที่เก็บ) ใหม่บน เว็บไซต์ GitHub ป้อนชื่อโปรเจกต์ (เช่น my-project) ในช่อง "Repository name" แล้วกดปุ่ม "Create repository" ก็เป็นอันเสร็จสิ้น ในตอนนี้ หากคุณเลือก "Private" (ส่วนตัว) ก็จะมีเพียงคุณเท่านั้นที่สามารถเห็น repository นี้ได้

2. เชื่อมต่อกับ GitHub จาก VSCode แล้ว push

มาถึงจุดไคลแม็กซ์แล้วครับ! เราจะส่งข้อมูลที่เซฟไว้ในเครื่องไปยัง repository ของ GitHub ที่เราเพิ่งสร้างขึ้น

หลังจาก commit แล้ว จะมีปุ่ม "Publish Branch" แสดงขึ้นมาในแท็บ Source Control ให้คลิกที่ปุ่มนั้น

จากนั้นจะมีตัวเลือก "Publish to GitHub" ปรากฏขึ้นมา ให้เลือกตัวเลือกนั้น VSCode จะค้นหา repository ของ GitHub ที่เราสร้างไว้เมื่อสักครู่นี้โดยอัตโนมัติ ให้เลือก repository นั้น... ก็เป็นอันเสร็จสิ้น!

ในครั้งแรก จะมีการขอให้ยืนยันตัวตนด้วยบัญชี GitHub ของคุณ เบราว์เซอร์จะเปิดขึ้นมา และคุณเพียงแค่กดปุ่มอนุญาตก็เป็นอันเรียบร้อย

🚨 นี่คือจุดที่สำคัญที่สุดที่มักจะติดขัด! ข้อผิดพลาดในการยืนยันตัวตน
สมัยก่อนเราสามารถยืนยันตัวตนด้วยรหัสผ่านได้ แต่ปัจจุบันเพื่อความปลอดภัยที่สูงขึ้น การใช้รหัสผ่านพิเศษที่เรียกว่า **PAT (Personal Access Token)** จึงเป็นเรื่องปกติ หากคุณเจอข้อผิดพลาดทำนองว่า "รหัสผ่านไม่ถูกต้อง" นั่นแทบจะเป็นสัญญาณว่าคุณต้องใช้ PAT อย่างแน่นอน

วิธีการสร้าง PAT นั้นมีขั้นตอนค่อนข้างเยอะ การดูเอกสารทางการของ GitHub จึงเป็นวิธีที่แน่นอนที่สุด ลองอ้างอิงจากลิงก์ด้านล่าง สร้าง token ที่มีการอนุญาต repo และ workflow แล้วลองนำ token นั้นไปวางแทนรหัสผ่านดูนะครับ

➡️ การจัดการ Personal Access Token ของคุณ - GitHub Docs

เมื่อยืนยันตัวตนสำเร็จแล้ว VSCode จะจดจำไว้ ทำให้ครั้งต่อไปคุณสามารถ push ได้ด้วยการคลิกเพียงปุ่มเดียว

[ขั้นสูง] ทำงานอย่างปลอดภัยด้วยการสร้าง Branch

เมื่อคุณคุ้นเคยกับ Git แล้ว ลองใช้ "branch" ดูนะครับ branch คือ **"โลกคู่ขนานสำหรับทำงาน"** พูดง่ายๆ ก็คือ

การแก้ไขข้อมูลที่เซฟไว้โดยตรงใน branch หลัก (main branch) นั้นเสี่ยงต่อการเกิดบั๊ก ดังนั้น เวลาที่ต้องการเพิ่มฟีเจอร์ใหม่ๆ หรือลองดีไซน์ใหม่ๆ ควรสร้าง branch ใหม่ขึ้นมาแล้วทำงานในนั้นอย่างเต็มที่ เมื่อทำงานเสร็จและตรวจสอบว่าไม่มีปัญหาแล้ว จึงค่อยรวมการเปลี่ยนแปลงนั้นเข้ากับ branch หลัก ซึ่งเป็นกระบวนการพัฒนาที่ปลอดภัย

ถ้าใช้ VSCode การสร้าง branch ก็ทำได้ง่ายๆ

1. คลิกที่ชื่อ branch ปัจจุบัน (ตอนแรกจะเป็น main) ที่แสดงอยู่บน status bar ด้านล่างซ้าย
2. เลือก "+ Create new branch..." ที่แสดงขึ้นมาด้านบน
3. ป้อนชื่อ branch ใหม่ (เช่น feature/add-new-page) แล้วกด Enter

เพียงเท่านี้คุณก็สลับไปยัง branch ใหม่แล้วครับ ที่เหลือก็แค่แก้ไขไฟล์ → staging → commit → push (publish branch) เหมือนเดิม แค่จำลำดับขั้นตอนนี้ได้ คุณก็เป็นผู้ใช้ Git ที่เก่งกาจแล้ว!

สรุป: Git ไม่น่ากลัว แต่เป็นไทม์แมชชีนที่แข็งแกร่งที่สุด!

เหนื่อยหน่อยนะครับ! ถ้าคุณทำตามขั้นตอนในบทความนี้มาเรื่อยๆ โค้ดบนคอมพิวเตอร์ของคุณก็น่าจะถูกเก็บไว้ในที่ปลอดภัยอย่าง GitHub เรียบร้อยแล้ว

ขั้นตอนที่เราได้แนะนำไปนั้น คือขั้นตอนพื้นฐานและสำคัญที่สุดในการใช้ Git และ GitHub

• git init ในโฟลเดอร์ทำงาน (เริ่มต้น repository)
• แก้ไขไฟล์แล้ว git add (staging)
• แนบข้อความแล้ว git commit (commit)
• git push ไปยัง GitHub (push)

ตอนแรกอาจจะรู้สึกว่ายาก แต่เมื่อใช้ทุกวันก็จะกลายเป็นเรื่องธรรมชาติเหมือนการแปรงฟัน Git คือไทม์แมชชีนที่แข็งแกร่งที่สุดที่จะปกป้องโค้ดของคุณและทำให้คุณสามารถย้อนกลับไปสถานะในอดีตได้ตลอดเวลา แม้จะเจอข้อผิดพลาดก็ไม่ต้องกลัว ลองถาม AI หรือค้นหาด้วยข้อความแสดงข้อผิดพลาด แล้วค่อยๆ ทำความคุ้นเคยกับมันไปนะครับ!