จากเครื่องสู่ GitHub! ขั้นตอนพื้นฐานในการอัปโหลดไฟล์ด้วย git push
ในบทความที่แล้ว คุณได้สร้าง Repository (ที่เก็บข้อมูล) แรกบน GitHub และอัปโหลด (Push) ไฟล์แรกของคุณได้สำเร็จ ขอแสดงความยินดีด้วย!
ในครั้งนี้ เราจะมาเรียนรู้ขั้นตอนต่อไป ซึ่งเป็นขั้นตอนที่ใช้บ่อยที่สุดในการพัฒนาในชีวิตประจำวัน นั่นคือขั้นตอนวิธีการนำการเปลี่ยนแปลงที่คุณทำบน PC ของคุณ (local) เช่น การแก้ไขไฟล์ที่มีอยู่ หรือการเพิ่มไฟล์ใหม่ ไปแสดงผลบน GitHub วงจร "add → commit → push" นี้เป็นพื้นฐานที่สำคัญที่สุดของการพัฒนาโดยใช้ Git มาฝึกฝนให้เชี่ยวชาญกันเถอะ!
เวิร์กโฟลว์พื้นฐานของ Git: มาจำ "3 สถานที่" กันเถอะ
ในการทำความเข้าใจการทำงานของ Git สิ่งแรกที่ควรทราบคือแนวคิดเรื่อง "3 สถานที่" Git จะใช้ที่เก็บข้อมูลชั่วคราวก่อนที่จะบันทึกการเปลี่ยนแปลงของไฟล์ ซึ่งช่วยให้คุณสามารถเลือกได้อย่างยืดหยุ่นว่าจะบันทึกการเปลี่ยนแปลงใดบ้าง
- ไดเรกทอรีที่ทำงาน (Working Directory): คือโฟลเดอร์บน PC ของคุณที่คุณเปิดและแก้ไขไฟล์จริงๆ
- พื้นที่เตรียมการ (Staging Area): เป็นที่สำหรับวางการเปลี่ยนแปลงที่คุณต้องการจะ commit (บันทึก) ชั่วคราว ลองนึกภาพว่าเป็น "รายการการเปลี่ยนแปลงที่จะรวมอยู่ในจุดบันทึกถัดไป"
- ที่เก็บข้อมูลในเครื่อง (Local Repository): เป็นที่สำหรับบันทึกและจัดเก็บการเปลี่ยนแปลงจากพื้นที่เตรียมการเป็นจุดบันทึก (commit) อย่างเป็นทางการ ประวัติทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์ `.git` บน PC ของคุณ
ขั้นตอนพื้นฐานของ Git คือการย้ายไฟล์ไปมาระหว่าง 3 สถานที่นี้
- แก้ไขหรือสร้างไฟล์ในไดเรกทอรีที่ทำงาน
- ใช้คำสั่ง
git addเพื่อย้ายการเปลี่ยนแปลงที่ต้องการ commit ไปยังพื้นที่เตรียมการ - ใช้คำสั่ง
git commitเพื่อบันทึกการเปลี่ยนแปลงในพื้นที่เตรียมการไปยังที่เก็บข้อมูลในเครื่อง - ใช้คำสั่ง
git pushเพื่อส่งบันทึกจากที่เก็บข้อมูลในเครื่องไปยัง GitHub (ที่เก็บข้อมูลบนเซิร์ฟเวอร์)
เอาล่ะ มาลองสัมผัสกับกระบวนการนี้กันจริงๆ เลย!
ปฏิบัติจริง! การเปลี่ยนแปลงและเพิ่มไฟล์เพื่อสะท้อนผลบน GitHub
เราจะทำงานต่อในโฟลเดอร์ `my-first-repo` ที่สร้างขึ้นในบทความที่แล้ว หากคุณยังไม่ได้เปิด ให้ย้ายไปยังโฟลเดอร์นั้นใน Terminal (หรือ Git Bash)
cd my-first-repoขั้นตอนที่ 1: แก้ไขไฟล์ที่มีอยู่และตรวจสอบการเปลี่ยนแปลง (git status)
ก่อนอื่น ให้เปิดไฟล์ `index.html` ที่สร้างไว้คราวก่อนด้วยโปรแกรมแก้ไขที่คุณชื่นชอบ แล้วลองแก้ไขเนื้อหาดู
ตัวอย่าง: เปลี่ยน `Hello, GitHub!` เป็น `Hello, World!` แล้วบันทึก
ตรวจสอบว่า Git รับรู้การเปลี่ยนแปลงของไฟล์หรือไม่ด้วยคำสั่ง `git status` ซึ่งเปรียบเสมือนการถาม Git ว่า "ตอนนี้โปรเจกต์อยู่ในสถานะไหน?"
git statusควรจะมีรายงานว่า `index.html` ถูกแก้ไขแล้ว เช่น `modified: index.html`
ขั้นตอนที่ 2: เพิ่มไฟล์ใหม่
ต่อไป ลองสร้างไฟล์ CSS ใหม่ดู ใช้คำสั่งต่อไปนี้เพื่อสร้างไฟล์ CSS ง่ายๆ
echo "h1 { color: steelblue; }" > style.cssในสถานะนี้ หากรัน `git status` อีกครั้ง จะพบว่า `style.css` แสดงเป็น "Untracked files" (ไฟล์ที่ไม่ถูกติดตาม) ซึ่งหมายความว่า Git ยังไม่รู้จักไฟล์นี้
git statusขั้นตอนที่ 3: เตรียมการเปลี่ยนแปลง (git add)
มาเตรียมทั้ง "ไฟล์ `index.html` ที่แก้ไขแล้ว" และ "ไฟล์ `style.css` ที่สร้างขึ้นใหม่" เพื่อรวมไว้ในจุดบันทึกถัดไปกันเถอะ คำสั่ง `git add` สามารถใช้ได้ทั้งกับไฟล์ที่ถูกแก้ไขและไฟล์ใหม่
โดยทั่วไป เราจะใช้คำสั่งต่อไปนี้เพื่อเตรียมการเปลี่ยนแปลงทั้งหมด (การเพิ่มใหม่และการแก้ไข) ในไดเรกทอรีที่ทำงานในครั้งเดียว
git add .หลังจากนี้ หากคุณรัน `git status` อีกครั้ง จะเห็นว่าการเปลี่ยนแปลงทั้งหมดแสดงเป็นสีเขียวในหัวข้อ "Changes to be committed" (การเปลี่ยนแปลงที่พร้อมจะคอมมิต) ซึ่งหมายความว่าการเตรียมการเสร็จสมบูรณ์แล้ว
ขั้นตอนที่ 4: คอมมิตการเปลี่ยนแปลง (git commit)
บันทึกเนื้อหาที่เตรียมไว้ในพื้นที่เตรียมการเป็นจุดบันทึกหนึ่งในที่เก็บข้อมูลในเครื่อง มาใส่ข้อความที่ชัดเจนเพื่อให้รู้ว่าครั้งนี้เราทำอะไรไป
git commit -m "อัปเดตข้อความใน index.html และเพิ่ม style.css"ขั้นตอนที่ 5: พุชไปยัง GitHub (git push)
สุดท้าย ให้ส่ง (push) คอมมิตใหม่ที่สร้างขึ้นในที่เก็บข้อมูลในเครื่องไปยังที่เก็บข้อมูลบนเซิร์ฟเวอร์ของ GitHub การทำเช่นนี้จะทำให้การเปลี่ยนแปลงของคุณถูกแชร์ให้กับสมาชิกในทีมและเป็นข้อมูลสำรองที่ปลอดภัย
สำหรับการพุชครั้งที่สองเป็นต้นไป ไม่จำเป็นต้องใช้ตัวเลือก `-u` เหมือนครั้งแรก
git push origin mainการยืนยันและข้อควรระวัง
เมื่อการพุชเสร็จสิ้น ลองรีเฟรชหน้า Repository ของคุณบน GitHub ในเบราว์เซอร์ดู คุณจะเห็นว่าไฟล์ `style.css` ถูกเพิ่มเข้ามา และเวลาอัปเดตล่าสุดรวมถึงข้อความคอมมิตของ `index.html` ได้เปลี่ยนไปแล้ว นี่เป็นการยืนยันว่าการเปลี่ยนแปลงของคุณได้ถูกสะท้อนบน GitHub อย่างถูกต้อง
[ภาพ: แสดงไฟล์สองไฟล์บน GitHub และประวัติการคอมมิตที่อัปเดตแล้ว]
- ฝึกใช้ `git status` ให้เป็นนิสัย: ก่อนเริ่มทำงานหรือก่อนคอมมิตและพุช ควรตรวจสอบสถานะปัจจุบันด้วย `git status` เสมอ เพื่อป้องกันการเพิ่มหรือเปลี่ยนแปลงไฟล์โดยไม่ตั้งใจ
- คอมมิตในหน่วยที่มีความหมาย: พยายามรวบรวมการเปลี่ยนแปลงที่เกี่ยวข้องกันไว้ในคอมมิตเดียว เช่น "แก้ไขดีไซน์ส่วนหัว" หรือ "เพิ่มลิงก์ส่วนท้าย" จะทำให้ประวัติสะอาดและง่ายต่อการติดตามการเปลี่ยนแปลงในภายหลัง