วิธีสร้าง Repository แรกบน GitHub! อธิบายละเอียดตั้งแต่การเริ่มต้นจนถึงการ Push

จากบทความที่ผ่านมา เราได้สร้างบัญชี GitHub และติดตั้ง Git เรียบร้อยแล้ว ในที่สุดก็ถึงเวลาที่เราจะเริ่มใช้งาน GitHub อย่างจริงจังกันเสียที ในฐานะขั้นตอนแรก เรามาสร้าง "บ้าน" ที่จะใช้เก็บโค้ดของคุณ หรือที่เรียกว่า Repository กันเถอะ

ในบทความนี้ เราจะอธิบายอย่างละเอียดตั้งแต่แนวคิดพื้นฐานว่า "Repository คืออะไร?" ไปจนถึงขั้นตอนการสร้าง Repository บน GitHub และขั้นตอนทั้งหมดในการอัปโหลด (Push) ไฟล์ที่คุณสร้างขึ้นบนคอมพิวเตอร์ของคุณ (สภาพแวดล้อม локал) ไปยัง GitHub เป็นครั้งแรก พร้อมด้วยคำสั่งต่างๆ ขั้นตอนนี้เป็นขั้นตอนพื้นฐานที่คุณจะต้องทำซ้ำแล้วซ้ำอีกในการพัฒนาในอนาคต ดังนั้นมาฝึกฝนให้เชี่ยวชาญกันที่นี่เลย!

Repository คืออะไร? มันคือ "ภาชนะ" สำหรับโปรเจกต์ของคุณ

Repository หากแปลตรงตัวจะหมายถึง "คลังเก็บ" หรือ "ที่เก็บของ" ในโลกของการเขียนโปรแกรม ให้คิดว่ามันคือ "ภาชนะ" ที่ใช้เก็บไฟล์ทั้งหมดที่เกี่ยวข้องกับโปรเจกต์ของคุณ (เช่น HTML, CSS, JavaScript, รูปภาพ) พร้อมกับประวัติการเปลี่ยนแปลงทั้งหมด (commit log)

Repository แบ่งออกเป็น 2 ประเภทใหญ่ๆ คือ

• Local Repository (คลังเก็บข้อมูลในเครื่อง): เป็น Repository ที่สร้างขึ้นในคอมพิวเตอร์ของคุณ การทำงานส่วนใหญ่จะทำที่นี่
• Remote Repository (คลังเก็บข้อมูลบนเซิร์ฟเวอร์): เป็น Repository ที่สร้างขึ้นบนเซิร์ฟเวอร์อินเทอร์เน็ตเช่น GitHub ซึ่งทำหน้าที่เป็นศูนย์กลางในการแชร์โค้ดกับสมาชิกในทีมและเป็นที่สำรองข้อมูลโค้ดส่วนตัว

ขั้นตอนการพัฒนาพื้นฐานคือการทำงานใน Local Repository, บันทึกงานเมื่อถึงจุดที่เหมาะสม (commit), แล้วอัปโหลด (push) การเปลี่ยนแปลงนั้นไปยัง Remote Repository เป็นวงจรไปเรื่อยๆ

ขั้นตอนการสร้าง Remote Repository บน GitHub

ขั้นแรก เรามาสร้าง Remote Repository บน GitHub เพื่อเป็นที่เก็บโค้ดกันก่อน ขั้นตอนง่ายมากๆ

ขั้นตอนที่ 1: ไปที่หน้าสร้าง Repository ใหม่
หลังจากล็อกอินเข้า GitHub แล้ว ให้คลิกที่ไอคอน "+" ที่มุมบนขวาของหน้าจอ หรือกดปุ่ม "New" ทางด้านซ้ายของแดชบอร์ด

[ภาพ: ปุ่ม "New" บนแดชบอร์ดของ GitHub ถูกเน้น]

ขั้นตอนที่ 2: กรอกข้อมูล Repository
หน้า "Create a new repository" จะปรากฏขึ้น ให้กรอกข้อมูลที่จำเป็น

[ภาพ: ฟอร์ม "Create a new repository" พร้อมคำอธิบายแต่ละช่อง]

• Repository name: ชื่อของ Repository ควรตั้งเป็นภาษาอังกฤษที่สั้นกระชับและสื่อถึงเนื้อหาของโปรเจกต์ (เช่น `my-portfolio-site`)
• Description: คำอธิบายสั้นๆ เกี่ยวกับ Repository (ไม่บังคับ) การเขียนอธิบายไว้จะช่วยให้เข้าใจได้ง่ายขึ้นเมื่อกลับมาดูในภายหลัง
• Public / Private: เลือกระดับการเข้าถึง หากต้องการให้ทุกคนในโลกเห็นได้ ให้เลือก "Public" แต่ถ้าต้องการให้เห็นเฉพาะตัวเองหรือคนที่ได้รับเชิญเท่านั้น ให้เลือก "Private" สำหรับฝึกฝน การเลือก "Private" ก็เป็นทางเลือกที่ดี
• Initialize this repository with:: เลือกไฟล์ที่จะสร้างขึ้นโดยอัตโนมัติเมื่อสร้าง Repository
  • Add a README file: เป็นไฟล์คู่มือของโปรเจกต์ แนะนำอย่างยิ่งให้ติ๊กช่องนี้
  • Add .gitignore: ไฟล์ตั้งค่าเพื่อระบุไฟล์ที่ไม่ต้องการให้ Git จัดการ ตอนนี้ปล่อยเป็น "None" ไปก่อนได้
  • Choose a license: เลือกใบอนุญาตสำหรับซอร์สโค้ด สำหรับการใช้งานส่วนตัว ตอนนี้ยังไม่ต้องตั้งค่าก็ได้

ขั้นตอนที่ 3: สร้าง Repository
เมื่อกรอกข้อมูลครบถ้วนแล้ว ให้คลิกปุ่ม "Create repository" เท่านี้ Remote Repository ใหม่ของคุณบน GitHub ก็ถูกสร้างขึ้นเรียบร้อยแล้ว!

[ภาพ: หน้าหลักของ Repository ที่เพิ่งสร้างเสร็จใหม่ๆ]

เตรียมโปรเจกต์บน PC และเชื่อมต่อกับ GitHub

ต่อไป เราจะมาเตรียมโปรเจกต์บน PC ของคุณ (local) และอัปโหลดไฟล์แรกไปยัง Remote Repository ที่เพิ่งสร้างกัน

ขั้นตอนที่ 1: สร้างโฟลเดอร์โปรเจกต์ในเครื่อง
ก่อนอื่น สร้างโฟลเดอร์สำหรับทำงานในที่ที่คุณต้องการบน PC ของคุณ ในที่นี้เราจะใช้ Terminal (หรือ Git Bash สำหรับ Windows) ในการทำงาน

mkdir my-first-repo

ย้ายเข้าไปในโฟลเดอร์ที่สร้างขึ้น

cd my-first-repo

ขั้นตอนที่ 2: เริ่มต้น Git Repository
เพื่อให้โฟลเดอร์นี้อยู่ภายใต้การจัดการของ Git ให้รันคำสั่งเริ่มต้น ซึ่งจะสร้างโฟลเดอร์ที่ซ่อนอยู่ชื่อว่า `.git` ขึ้นมาภายในโฟลเดอร์นี้

git init

ขั้นตอนที่ 3: สร้างไฟล์ที่จะอัปโหลด
มาสร้างไฟล์ HTML ง่ายๆ เพื่อทดสอบกัน

echo "Hello, GitHub!" > index.html

ขั้นตอนที่ 4: คอมมิตไฟล์ (บันทึก)
บันทึกไฟล์ที่สร้างขึ้นลงใน Git ก่อนอื่น ใช้ `git add` เพื่อเลือกไฟล์ที่จะบันทึก (staging)

git add index.html

จากนั้น ใช้ `git commit` เพื่อสร้างจุดบันทึก

git commit -m "เพิ่มไฟล์ HTML เริ่มต้น"

ขั้นตอนที่ 5: เชื่อมต่อกับ Remote Repository
เชื่อมโยง Local Repository กับ Remote Repository ที่สร้างบน GitHub ไปที่หน้า Repository ของคุณบน GitHub คลิกที่ปุ่ม "Code" แล้วคัดลอก URL ของ SSH

[ภาพ: การคลิกปุ่ม "Code" บน GitHub และคัดลอก URL ของ SSH]

git remote add origin git@github.com:your-username/my-first-repo.git

ขั้นตอนที่ 6: Push (อัปโหลด) ไปยัง GitHub
มาถึงขั้นตอนสุดท้ายแล้ว อัปโหลด commit ที่สร้างในเครื่องไปยัง Remote Repository ซึ่งเรียกว่า "Push"

git push -u origin main

ตรวจสอบ: ดูว่าไฟล์ปรากฏบน GitHub หรือไม่

เมื่อ push เสร็จแล้ว ลองรีเฟรชหน้า Repository ของคุณบน GitHub ในเบราว์เซอร์ดูสิ คุณควรจะเห็นไฟล์ `index.html` ที่เพิ่งสร้างขึ้น! หากคลิกที่ชื่อไฟล์ ก็จะสามารถดูเนื้อหาข้างในได้

[ภาพ: หน้า Repository ของ GitHub ที่มี index.html เพิ่มเข้ามาและแสดงในรายการไฟล์]

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