🚀 คู่มือการใช้งาน GitHub

บทที่ 1: รู้จัก GitHub และการเริ่มต้นใช้งาน

📋 เนื้อหาในบทนี้:

🤔 GitHub คืออะไร?

GitHub เป็นแพลตฟอร์มการพัฒนาซอฟต์แวร์แบบ collaborative ที่ใช้ระบบ Git สำหรับการควบคุมเวอร์ชัน (Version Control) ซึ่งช่วยให้นักพัฒนาสามารถ:

🆚 ความแตกต่างระหว่าง Git และ GitHub

Git:

GitHub:

📝 การสมัครสมาชิก GitHub

ขั้นตอนการสมัคร:

  1. เข้าไปที่ https://github.com
  2. คลิก "Sign up" มุมขวาบน
  3. กรอกข้อมูล:
    • Username - ชื่อผู้ใช้ (จะเป็นส่วนหนึ่งของ URL)
    • Email - อีเมลสำหรับการติดต่อ
    • Password - รหัสผ่าน (ควรมีความปลอดภัยสูง)
  4. ยืนยันตัวตนผ่าน puzzle หรือ verification
  5. เลือกแพลน "Free" (เพียงพอสำหรับการเรียนรู้)
  6. ยืนยันอีเมลจาก GitHub
💡 เทิปการเลือก Username:

🎛️ การตั้งค่าโปรไฟล์เบื้องต้น

ขั้นตอนการตั้งค่า:

  1. คลิกที่รูปโปรไฟล์ (มุมขวาบน) → "Settings"
  2. ในส่วน "Public profile":
    • เพิ่ม Name - ชื่อจริงของคุณ
    • เพิ่ม Bio - แนะนำตัวสั้นๆ
    • เพิ่ม Location - ที่อยู่ (ถ้าต้องการ)
    • เพิ่ม Website - เว็บไซต์ส่วนตัว (ถ้ามี)
  3. อัปโหลด รูปโปรไฟล์

📚 Repository คืออะไร?

Repository (หรือเรียกสั้นๆ ว่า "repo") คือ โฟลเดอร์เก็บโปรเจกต์ ที่ประกอบด้วย:

🚀 การสร้าง Repository แรก

วิธีสร้าง Repository:

  1. ในหน้าหลัก GitHub คลิก "New repository" (ปุ่มเขียว) หรือ "+" มุมขวาบน
  2. กรอกข้อมูล Repository:
    Repository name: my-first-repo Description: โปรเจกต์แรกของฉัน ☑️ Public (ทุกคนเห็นได้) ☐ Private (เฉพาะคุณและคนที่ได้รับอนุญาต) ☑️ Add a README file ☑️ Add .gitignore (เลือกตาม programming language) ☑️ Choose a license (แนะนำ MIT License)
  3. คลิก "Create repository"
🎉 ยินดีด้วย! คุณได้สร้าง Repository แรกแล้ว! ตอนนี้คุณจะเห็นหน้า Repository ที่มี:

🖱️ การใช้งานพื้นฐานผ่าน Web Interface

การสร้างไฟล์ใหม่:

  1. คลิก "Add file" → "Create new file"
  2. ตั้งชื่อไฟล์ เช่น hello.txt
  3. เพิ่มเนื้อหาในไฟล์
  4. เลื่อนลงไปด้านล่าง ในส่วน "Commit new file"
  5. เขียน commit message เช่น "เพิ่มไฟล์ hello.txt"
  6. คลิก "Commit new file"

การแก้ไขไฟล์:

  1. คลิกที่ชื่อไฟล์ที่ต้องการแก้ไข
  2. คลิกไอคอน ✏️ (Edit)
  3. แก้ไขเนื้อหาไฟล์
  4. เลื่อนลงไปด้านล่าง เขียน commit message
  5. คลิก "Commit changes"

การอัปโหลดไฟล์:

  1. คลิก "Add file" → "Upload files"
  2. ลากไฟล์มาวาง หรือคลิก "choose your files"
  3. เขียน commit message
  4. คลิก "Commit changes"

📖 README.md คืออะไร?

README.md เป็นไฟล์ที่สำคัญที่สุดในทุก Repository เพราะ:

# ตัวอย่าง README.md พื้นฐาน ## โปรเจกต์นี้คืออะไร? เว็บไซต์แสดงข้อมูลสภาพอากาศ ## วิธีการใช้งาน 1. เปิดไฟล์ index.html 2. ใส่ชื่อเมืองที่ต้องการ 3. กดปุ่มค้นหา ## เทคโนโลยีที่ใช้ - HTML - CSS - JavaScript ## ติดต่อผู้พัฒนา - Email: example@email.com - GitHub: @username

🎯 สิ่งที่คุณได้เรียนรู้ในบทนี้

🏠 บทที่ 1 📖 บทที่ 2: Git Commands พื้นฐาน

⚡ บทที่ 2: Git Commands พื้นฐานและการทำงานกับ Local Repository

📋 เนื้อหาในบทนี้:
  • การติดตั้ง Git บนคอมพิวเตอร์
  • Git Commands ที่จำเป็น
  • การ clone repository จาก GitHub
  • การทำงานกับ branches
  • การ commit และ push changes
  • การแก้ปัญหาเบื้องต้น

💻 การติดตั้ง Git

สำหรับ Windows:

  1. ดาวน์โหลดจาก git-scm.com
  2. รันไฟล์ installer และทำตาม wizard
  3. เลือก "Use Git from the Windows Command Prompt"
  4. เลือก "Checkout Windows-style, commit Unix-style line endings"
  5. คลิก Install และรอจนเสร็จ

สำหรับ macOS:

# ใช้ Homebrew (แนะนำ) brew install git # หรือดาวน์โหลดจาก git-scm.com

สำหรับ Linux (Ubuntu/Debian):

sudo apt update sudo apt install git

ตรวจสอบการติดตั้ง:

git --version # Output: git version 2.x.x

⚙️ การตั้งค่า Git เบื้องต้น

หลังจากติดตั้งแล้ว ต้องตั้งค่าข้อมูลส่วนตัว:

# ตั้งชื่อผู้ใช้ (ใช้ชื่อจริง) git config --global user.name "Your Name" # ตั้งอีเมล (ใช้อีเมลเดียวกับ GitHub) git config --global user.email "your.email@example.com" # ตั้งค่า default editor (ถ้าต้องการ) git config --global core.editor "code --wait" # สำหรับ VS Code # ดูการตั้งค่าทั้งหมด git config --list
⚠️ สำคัญ! อีเมลที่ใช้ต้องตรงกับอีเมลใน GitHub account ไม่เช่นนั้น commits จะไม่แสดงในโปรไฟล์ของคุณ

📥 การ Clone Repository

Clone คือการดาวน์โหลด repository จาก GitHub มายังเครื่องของเรา

ขั้นตอนการ Clone:

  1. ไปที่ repository บน GitHub
  2. คลิกปุ่ม "Code" (สีเขียว)
  3. คัดลอก URL (ในส่วน HTTPS)
  4. เปิด Terminal/Command Prompt
  5. ไปยังโฟลเดอร์ที่ต้องการ:
# เปลี่ยนไดเรกทอรี cd Desktop # Clone repository git clone https://github.com/username/repository-name.git # เข้าไปในโฟลเดอร์โปรเจกต์ cd repository-name # ดูสถานะปัจจุบัน git status

🌿 การทำงานกับ Branches

Branch คืออะไร?

Branch เป็นเหมือน "เส้นทางแยก" ของโค้ด ที่ให้เราสามารถ:

# ดู branches ทั้งหมด git branch # ดู branches ทั้งหมด (รวม remote) git branch -a # สร้าง branch ใหม่ git branch feature-new-button # สลับไป branch อื่น git checkout feature-new-button # สร้างและสลับไปในคำสั่งเดียว git checkout -b feature-contact-form # สลับกลับไป main branch git checkout main # ลบ branch (ต้องไม่อยู่ใน branch นั้น) git branch -d feature-old-feature

💾 การ Commit Changes

Git Workflow พื้นฐาน:

  1. Working Directory - ไฟล์ที่เรากำลังแก้ไข
  2. Staging Area - ไฟล์ที่เตรียมจะ commit
  3. Repository - ไฟล์ที่ commit แล้ว
# 1. ดูสถานะไฟล์ git status # 2. เพิ่มไฟล์เข้า staging area git add filename.txt # เพิ่มไฟล์เดียว git add . # เพิ่มไฟล์ทั้งหมด git add *.html # เพิ่มไฟล์ html ทั้งหมด # 3. ดูว่าเพิ่มอะไรเข้าไปแล้วบ้าง git status # 4. Commit พร้อม message git commit -m "เพิ่มฟีเจอร์ login form" # หรือ add และ commit ในคำสั่งเดียว git commit -am "แก้ไข bug ในหน้า contact"

การเขียน Commit Message ที่ดี:

✅ ตัวอย่างที่ดี:
  • "เพิ่มฟีเจอร์ search bar ในหน้าหลัก"
  • "แก้ไข bug responsive บน mobile"
  • "อัปเดต README พร้อมคำแนะนำใหม่"
  • "ลบโค้ดที่ไม่ใช้แล้วใน utils.js"
❌ ตัวอย่างที่ไม่ดี:
  • "อัปเดต"
  • "แก้ไข"
  • "test"
  • "asdfjkl;"

📤 การ Push ไปยัง GitHub

หลังจาก commit แล้ว เราต้อง push เพื่อส่งการเปลี่ยนแปลงไปยัง GitHub:

# Push ไปยัง GitHub git push origin main # หรือถ้าอยู่ใน branch อื่น git push origin branch-name # สำหรับ push ครั้งแรกใน branch ใหม่ git push -u origin new-branch

📥 การ Pull และ Fetch

# ดาวน์โหลดการเปลี่ยนแปลงจาก GitHub git pull origin main # ตรวจสอบการเปลี่ยนแปลงโดยไม่ merge git fetch origin # ดู commits ใหม่ที่ยังไม่ merge git log HEAD..origin/main --oneline

🔍 Git Commands ที่ใช้บ่อย

# ดูประวัติ commits git log # แสดงรายละเอียดเต็ม git log --oneline # แสดงแบบสั้น git log --graph # แสดงเป็นกราฟ # ดูความแตกต่างของไฟล์ git diff # เปรียบเทียบ working vs staged git diff --staged # เปรียบเทียบ staged vs committed git diff HEAD~1 # เปรียบเทียบกับ commit ก่อนหน้า # ยกเลิกการเปลี่ยนแปลง git checkout -- filename.txt # ยกเลิกการแก้ไขไฟล์ git reset HEAD filename.txt # เอาไฟล์ออกจาก staging git reset --hard HEAD # ยกเลิกทุกอย่าง กลับไปสถานะเดิม # ดูข้อมูล remote repository git remote -v # ดู URL ของ remote git remote show origin # ดูข้อมูลละเอียดของ origin

🚨 การแก้ปัญหาเบื้องต้น

ปัญหา: Push ไม่ได้ (rejected)

# แก้ไขโดย pull ก่อน แล้วค่อย push git pull origin main git push origin main

ปัญหา: แก้ไขผิดไฟล์แล้ว

# ยกเลิกการแก้ไข (ยังไม่ commit) git checkout -- filename.txt # ยกเลิก commit ล่าสุด (แต่เก็บการเปลี่ยนแปลง) git reset --soft HEAD~1 # ยกเลิก commit ล่าสุดและการเปลี่ยนแปลง git reset --hard HEAD~1

ปัญหา: ลืม commit message

# แก้ไข commit message ล่าสุด git commit --amend -m "ข้อความใหม่"

🎯 แบบฝึกหัด: ลองทำเอง!

📝 Challenge 1: การทำงานพื้นฐาน

  1. Clone repository ที่คุณสร้างในบทที่ 1
  2. สร้างไฟล์ style.css เพิ่ม CSS พื้นฐาน
  3. แก้ไขไฟล์ README.md เพิ่มข้อมูล
  4. Add, commit, และ push การเปลี่ยนแปลง
  5. ตรวจสอบผลลัพธ์บน GitHub

🌟 Challenge 2: การทำงานกับ Branch

  1. สร้าง branch ใหม่ชื่อ "add-contact-page"
  2. สร้างไฟล์ contact.html
  3. Commit การเปลี่ยนแปลงใน branch นี้
  4. Push branch ไปยัง GitHub
  5. สลับกลับไป main branch

🎯 สิ่งที่คุณได้เรียนรู้ในบทนี้

  • ✅ ติดตั้งและตั้งค่า Git
  • ✅ Clone repository จาก GitHub
  • ✅ ทำงานกับ branches
  • ✅ Commit และ push การเปลี่ยนแปลง
  • ✅ ใช้ Git commands พื้นฐาน
  • ✅ แก้ปัญหาเบื้องต้น
⬅️ บทที่ 1 📖 บทที่ 2 📖 บทที่ 3: Collaboration & Pull Requests

🤝 บทที่ 3: การทำงานร่วมกันและ Pull Requests

📋 เนื้อหาในบทนี้:
  • การทำงานร่วมกันใน GitHub
  • Fork และ Clone repositories
  • การสร้างและจัดการ Pull Requests
  • Code Review process
  • การจัดการ Issues และ Projects
  • GitHub Flow workflow

🍴 การ Fork Repository

Fork คือการคัดลอก repository ของคนอื่นมาไว้ในบัญชีของเรา เพื่อที่เราจะได้แก้ไขโดยไม่กระทบต้นฉบับ

ขั้นตอนการ Fork:

  1. ไปที่ repository ที่ต้องการ fork
  2. คลิกปุ่ม "Fork" ที่มุมขวาบน
  3. เลือก account ที่จะ fork ไป (ถ้ามีหลาย account)
  4. รอสักครู่ GitHub จะสร้าง copy ใหม่ให้
  5. ตอนนี้คุณจะมี repository ของคุณเองแล้ว!
🔄 Fork vs Clone ต่างกันอย่างไร?
  • Fork: คัดลอก repo ไปยังบัญชี GitHub ของเรา
  • Clone: ดาวน์โหลด repo มาเก็บในเครื่องของเรา
  • ปกติ: Fork ก่อน แล้วค่อย Clone repo ที่ fork มา

🔗 การจัดการ Remote Repositories

เมื่อเรา fork แล้ว เราจะมี remote repositories 2 ตัว:

# ดู remote repositories ปัจจุบัน git remote -v # เพิ่ม upstream (repository ต้นฉบับ) git remote add upstream https://github.com/original-owner/repo-name.git # ตรวจสอบ remote ทั้งหมด git remote -v # origin https://github.com/your-username/repo-name.git (fetch) # origin https://github.com/your-username/repo-name.git (push) # upstream https://github.com/original-owner/repo-name.git (fetch) # upstream https://github.com/original-owner/repo-name.git (push)

การ Sync กับ Upstream:

# ดึงการเปลี่ยนแปลงจาก upstream git fetch upstream # เปลี่ยนไปยัง main branch git checkout main # merge การเปลี่ยนแปลงจาก upstream git merge upstream/main # push การอัปเดตไปยัง fork ของเรา git push origin main

🚀 การสร้าง Pull Request

Pull Request (PR) คือการขอให้เจ้าของ repository ต้นฉบับ "ดึง" การเปลี่ยนแปลงของเรามารวมเข้าไป

ขั้นตอนการสร้าง Pull Request:

  1. สร้าง branch ใหม่:
    git checkout -b feature/add-dark-mode
  2. ทำการแก้ไขโค้ด
  3. Commit การเปลี่ยนแปลง:
    git add . git commit -m "เพิ่มฟีเจอร์ dark mode สำหรับหน้าหลัก"
  4. Push ไปยัง fork:
    git push origin feature/add-dark-mode
  5. สร้าง PR บน GitHub:
    • ไปที่ repository ต้นฉบับ
    • จะเห็นแบนเนอร์ "Compare & pull request"
    • คลิกปุ่มนั้น หรือไปที่แท็บ "Pull requests"

✍️ การเขียน Pull Request ที่ดี

🎯 ส่วนประกอบของ PR ที่ดี:

**Title:** เพิ่มฟีเจอร์ dark mode สำหรับหน้าหลัก **Description:** ## 📝 สิ่งที่เปลี่ยนแปลง - เพิ่ม toggle button สำหรับเปลี่ยน dark/light mode - อัปเดต CSS variables สำหรับสีใหม่ - เพิ่ม localStorage เพื่อจำค่าที่ผู้ใช้เลือก ## 🧪 วิธีการทดสอบ 1. เปิดเว็บไซต์ 2. คลิกปุ่ม dark mode toggle ที่มุมขวาบน 3. refresh หน้า ควรจำค่าเดิมได้ ## 📷 Screenshots (แนบภาพหน้าจอ before/after) ## ✅ Checklist - [x] ทดสอบใน Chrome, Firefox, Safari - [x] ใช้งานได้บน mobile - [x] ไม่มี console errors - [ ] เขียน tests (จะทำในอนาคต)

🏷️ การใช้ Labels และ Assignees:

👀 Code Review Process

Code Review คือการตรวจสอบโค้ดก่อนที่จะ merge เพื่อให้มั่นใจในคุณภาพ

สำหรับ Reviewer:

  1. คลิกเข้าไปที่ PR
  2. ไปที่แท็บ "Files changed"
  3. ดูโค้ดทีละบรรทัด อ่านความเปลี่ยนแปลง
  4. คลิกที่บรรทัดที่ต้องการ comment
  5. เขียน feedback แล้วคลิก "Start a review"
  6. เมื่อดูครบแล้วให้ "Submit review" พร้อมเลือก:
    • Approve: โค้ดดี พร้อม merge
    • Request changes: ต้องแก้ไขก่อน
    • Comment: แค่แสดงความเห็น

การให้ Feedback ที่สร้างสรรค์:

✅ ตัวอย่างที่ดี:
  • "ฟังก์ชันนี้ดูดี แต่อาจจะเพิ่ม error handling จะดีมากครับ"
  • "CSS นี้ใช้ได้ดี แต่ลอง extract เป็น variable จะ reusable มากกว่านะ"
  • "ตรงนี้อาจจะใช้ map() แทน forEach() จะ functional กว่า"
❌ หลีกเลี่ยง:
  • "โค้ดแย่"
  • "ผิดหมด"
  • "ไม่เข้าใจว่าคิดอะไร"

🐛 การจัดการ Issues

Issues เป็นระบบติดตามปัญหา ข้อเสนอแนะ และงานที่ต้องทำ

วิธีสร้าง Issue:

  1. ไปที่แท็บ "Issues"
  2. คลิก "New issue"
  3. เลือก template (ถ้ามี) หรือใช้ blank
  4. เขียนหัวข้อและรายละเอียด
  5. เพิ่ม labels และ assign คน
  6. คลิก "Submit new issue"

ประเภทของ Issues:

**Bug Report Template:** ## 🐛 อธิบายปัญหา อธิบายปัญหาที่เจอแบบชัดเจน ## 🔄 ขั้นตอนการทำซ้ำ 1. ไปที่ '...' 2. คลิกที่ '....' 3. scroll ลงไปที่ '....' 4. เกิด error ## 🎯 ผลลัพธ์ที่คาดหวัง อธิบายว่าคาดหวังให้เกิดอะไร ## 📱 สภาพแวดล้อม - OS: Windows 10 - Browser: Chrome 96 - Version: 2.1.0

📋 GitHub Projects

Projects เป็นเครื่องมือจัดการงานแบบ Kanban board

การสร้าง Project:

  1. ไปที่แท็บ "Projects"
  2. คลิก "New project"
  3. เลือก template หรือ "Start from scratch"
  4. ตั้งชื่อโปรเจกต์
  5. เพิ่ม columns เช่น:
    • 📋 To Do: งานที่รอทำ
    • 🔄 In Progress: งานที่กำลังทำ
    • 👀 Review: รอการตรวจสอบ
    • ✅ Done: งานที่เสร็จแล้ว

🔄 GitHub Flow Workflow

GitHub Flow เป็น workflow ที่เรียบง่ายและได้รับการยอมรับอย่างแพร่หลาย

ขั้นตอน GitHub Flow:

  1. 🌿 Create a branch จาก main
    git checkout -b feature/new-header
  2. ✏️ Add commits ทำการเปลี่ยนแปลงและ commit
  3. 🚀 Open a Pull Request เพื่อขอ review
  4. 💬 Discuss and review พูดคุยและปรับปรุงโค้ด
  5. ✅ Merge เมื่อทุกคนเห็นชอบ
  6. 🗑️ Delete branch ลบ branch ที่ merge แล้ว
💡 Best Practices:
  • Branch names: ใช้ prefix เช่น feature/, bugfix/, hotfix/
  • Small PRs: แบ่งการเปลี่ยนแปลงเป็นชิ้นเล็กๆ
  • Clear descriptions: อธิบายว่าทำอะไรและทำไม
  • Test before merge: ทดสอบให้แน่ใจก่อน
  • Review thoroughly: review โค้ดอย่างละเอียด

🛠️ GitHub Desktop (ตัวเลือก)

สำหรับคนที่ไม่ถนัด command line สามารถใช้ GitHub Desktop ได้

ฟีเจอร์ของ GitHub Desktop:

  • 🖱️ GUI Interface: ไม่ต้องใช้ command line
  • 👀 Visual diff: เห็นการเปลี่ยนแปลงแบบภาพ
  • 🌿 Branch management: สร้างและสลับ branch ง่าย
  • 📝 Commit history: ดูประวัติแบบกราฟิก
  • 🔄 Sync with GitHub: push/pull อัตโนมัติ

🎯 แบบฝึกหัด: Collaborative Project

📝 Challenge 3: การทำงานร่วมกัน

  1. หา repository open source ง่ายๆ หรือสร้างขึ้นมาเอง
  2. Fork repository นั้น
  3. Clone มายังเครื่องของคุณ
  4. สร้าง branch ใหม่สำหรับฟีเจอร์
  5. ทำการแก้ไข (เช่น แก้ typo ใน README)
  6. สร้าง Pull Request พร้อม description ที่ดี
  7. รอ feedback และปรับปรุงตาม comment

🌟 Challenge 4: Project Management

  1. สร้าง GitHub Project ใน repository
  2. สร้าง Issues สำหรับงานต่างๆ
  3. เพิ่ม Issues เข้าไปใน Project board
  4. ปรับสถานะ Issues ตามความคืบหน้า
  5. Link Issues กับ Pull Requests

🎯 สิ่งที่คุณได้เรียนรู้ในบทนี้

  • ✅ Fork และจัดการ remote repositories
  • ✅ สร้างและจัดการ Pull Requests
  • ✅ ทำ Code Review อย่างมีประสิทธิภาพ
  • ✅ จัดการ Issues และ Projects
  • ✅ เข้าใจ GitHub Flow workflow
  • ✅ รู้จัก GitHub Desktop
⬅️ บทที่ 2 📖 บทที่ 3 📖 บทที่ 4: Advanced Features & CI/CD

🚀 บทที่ 4: Advanced Features และ CI/CD

📋 เนื้อหาในบทนี้:
  • GitHub Actions และ CI/CD Pipeline
  • GitHub Pages สำหรับ hosting เว็บไซต์
  • GitHub Secrets และ Environment Variables
  • การใช้งาน GitHub API
  • GitHub Packages และ Container Registry
  • Security Features และ Best Practices

⚙️ GitHub Actions คืออะไร?

GitHub Actions เป็นระบบ CI/CD (Continuous Integration/Continuous Deployment) ที่ช่วยให้เราสามารถ:

📁 การสร้าง Workflow แรก

Workflow ถูกเก็บในโฟลเดอร์ .github/workflows/ เป็นไฟล์ YAML

ขั้นตอนการสร้าง:

  1. สร้างโฟลเดอร์ .github/workflows/ ใน repository
  2. สร้างไฟล์ ci.yml
  3. เพิ่มเนื้อหา workflow
name: CI Pipeline # เมื่อไหร่ที่จะรัน workflow นี้ on: push: branches: [ main, develop ] pull_request: branches: [ main ] jobs: test: runs-on: ubuntu-latest steps: # Checkout source code - uses: actions/checkout@v4 # Setup Node.js - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' cache: 'npm' # Install dependencies - name: Install dependencies run: npm ci # Run tests - name: Run tests run: npm test # Run linting - name: Run ESLint run: npm run lint

🌐 GitHub Pages

GitHub Pages ให้เราสามารถ host เว็บไซต์ static ได้ฟรี!

การเปิดใช้ GitHub Pages:

  1. ไปที่ Settings ใน repository
  2. เลื่อนลงไปหา "Pages"
  3. เลือก source:
    • Deploy from a branch: เลือก main หรือ gh-pages
    • GitHub Actions: ใช้ workflow custom
  4. คลิก "Save"
  5. เว็บไซต์จะใช้ได้ที่: https://username.github.io/repository-name

Workflow สำหรับ deploy ไปยัง GitHub Pages:

name: Deploy to GitHub Pages on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' - name: Install and Build run: | npm ci npm run build - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist

🔐 GitHub Secrets

Secrets เป็นที่เก็บข้อมูลลับ เช่น API keys, passwords อย่างปลอดภัย

การเพิ่ม Secret:

  1. ไปที่ Settings → Secrets and variables → Actions
  2. คลิก "New repository secret"
  3. ตั้งชื่อ เช่น API_KEY
  4. ใส่ค่า secret
  5. คลิก "Add secret"
name: Deploy with Secrets on: push: branches: [ main ] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Deploy to server env: API_KEY: ${{ secrets.API_KEY }} DATABASE_URL: ${{ secrets.DATABASE_URL }} run: | echo "Deploying with API key: ${API_KEY:0:4}****" # deployment script here

🧪 ตัวอย่าง Workflows ต่างๆ

🐍 Python Project:

name: Python CI on: [push, pull_request] jobs: test: runs-on: ubuntu-latest strategy: matrix: python-version: [3.8, 3.9, 3.10] steps: - uses: actions/checkout@v4 - name: Set up Python ${{ matrix.python-version }} uses: actions/setup-python@v4 with: python-version: ${{ matrix.python-version }} - name: Install dependencies run: | python -m pip install --upgrade pip pip install flake8 pytest pip install -r requirements.txt - name: Lint with flake8 run: flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics - name: Test with pytest run: pytest

🚀 Docker Build และ Push:

name: Docker Build on: push: branches: [ main ] tags: [ 'v*' ] jobs: docker: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2 - name: Login to Docker Hub uses: docker/login-action@v2 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} - name: Build and push uses: docker/build-push-action@v4 with: context: . push: true tags: | myapp:latest myapp:${{ github.sha }}

📦 GitHub Packages

GitHub Packages เป็น package registry ที่รองรับ npm, Docker, Maven, NuGet

# การ publish npm package name: Publish Package on: release: types: [created] jobs: publish: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: '18' registry-url: 'https://npm.pkg.github.com' - run: npm ci - run: npm publish env: NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

🔒 Security Features

🕵️ Dependabot:

ตรวจสอบและอัปเดต dependencies อัตโนมัติ

# .github/dependabot.yml version: 2 updates: - package-ecosystem: "npm" directory: "/" schedule: interval: "weekly" open-pull-requests-limit: 10 - package-ecosystem: "docker" directory: "/" schedule: interval: "monthly"

🛡️ Code Scanning:

name: CodeQL on: push: branches: [ main ] pull_request: branches: [ main ] jobs: analyze: runs-on: ubuntu-latest strategy: matrix: language: [ 'javascript', 'python' ] steps: - uses: actions/checkout@v4 - name: Initialize CodeQL uses: github/codeql-action/init@v2 with: languages: ${{ matrix.language }} - name: Perform CodeQL Analysis uses: github/codeql-action/analyze@v2

🔄 Advanced Git Techniques

🏷️ Git Tags สำหรับ Versioning:

# สร้าง tag git tag v1.0.0 git tag -a v1.0.0 -m "Release version 1.0.0" # Push tags git push origin v1.0.0 git push origin --tags # List tags git tag -l # Delete tag git tag -d v1.0.0 git push origin --delete v1.0.0

🔄 Git Hooks:

# .git/hooks/pre-commit #!/bin/sh echo "Running pre-commit hook..." # Run linting npm run lint if [ $? -ne 0 ]; then echo "Linting failed. Commit aborted." exit 1 fi # Run tests npm test if [ $? -ne 0 ]; then echo "Tests failed. Commit aborted." exit 1 fi echo "All checks passed. Proceeding with commit."

📊 GitHub API

ใช้ GitHub API เพื่อสร้างเครื่องมือหรือแอปพลิเคชันที่ทำงานกับ GitHub

# ตัวอย่าง: ดึงข้อมูล repository curl -H "Authorization: token YOUR_TOKEN" \ https://api.github.com/repos/owner/repo # ตัวอย่าง: สร้าง issue curl -X POST \ -H "Authorization: token YOUR_TOKEN" \ -H "Accept: application/vnd.github.v3+json" \ https://api.github.com/repos/owner/repo/issues \ -d '{ "title": "Found a bug", "body": "Something is not working", "labels": ["bug"] }'

JavaScript Example:

// ใช้ Octokit.js import { Octokit } from "@octokit/rest"; const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN }); // ดึง issues const { data: issues } = await octokit.rest.issues.listForRepo({ owner: 'owner', repo: 'repo', state: 'open' }); console.log(`Found ${issues.length} open issues`); // สร้าง PR await octokit.rest.pulls.create({ owner: 'owner', repo: 'repo', title: 'Amazing new feature', head: 'feature-branch', base: 'main', body: 'This PR adds amazing new features' });

📈 Performance และ Monitoring

📊 Repository Insights:

⚡ Performance Tips:

🚀 เพิ่มประสิทธิภาพ GitHub:
  • .gitignore: อย่าเก็บไฟล์ที่ไม่จำเป็น
  • LFS: ใช้ Git LFS สำหรับไฟล์ใหญ่
  • Small commits: แบ่ง commit เป็นชิ้นเล็ก
  • Branch cleanup: ลบ branch ที่ไม่ใช้แล้ว
  • Actions optimization: ใช้ cache ใน workflows

🎯 Best Practices สำหรับ Production

🏢 Enterprise-level Practices:

  1. Branch Protection Rules:
    • Require PR reviews
    • Dismiss stale reviews
    • Require status checks
    • Restrict who can push
  2. Security:
    • Use Secrets สำหรับข้อมูลลับ
    • Enable 2FA
    • Regular security scans
    • Limit repository access
  3. Documentation:
    • README ที่ครบถ้วน
    • CONTRIBUTING guidelines
    • Code of Conduct
    • License information

🎯 แบบฝึกหัดสุดท้าย: Complete CI/CD Project

📝 Final Challenge: สร้าง Full-Stack Project

  1. สร้าง repository ใหม่สำหรับ web application
  2. ตั้งค่า GitHub Actions สำหรับ:
    • Automated testing
    • Code linting และ formatting
    • Security scanning
    • Build และ deploy ไปยัง GitHub Pages
  3. เพิ่ม Dependabot สำหรับการอัปเดต dependencies
  4. สร้าง PR template และ Issue templates
  5. ตั้งค่า branch protection rules
  6. สร้าง release พร้อม changelog
  7. เพิ่ม monitoring และ performance tracking

🏆 ยินดีด้วย! คุณได้เรียนรู้ GitHub แบบสมบูรณ์แล้ว!

ตอนนี้คุณสามารถ:

  • ✅ ใช้ GitHub สำหรับ personal projects
  • ✅ ทำงานร่วมกันในทีมได้อย่างมืออาชีพ
  • ✅ ตั้งค่า CI/CD pipeline
  • ✅ Deploy applications automatically
  • ✅ จัดการ project แบบ enterprise
  • ✅ ใช้ advanced features ต่างๆ

📚 แหล่งข้อมูลเพิ่มเติม

🔗 ลิงก์ที่เป็นประโยชน์:

📖 หนังสือแนะนำ:

  • "Pro Git" by Scott Chacon (ฟรีออนไลน์)
  • "GitHub Essentials" by Achilleas Pipinellis
  • "Git Pocket Guide" by Richard Silverman

🎓 บทสรุปทั้ง 4 บท

📖 บทที่ 1: พื้นฐาน

  • รู้จัก GitHub
  • สมัครสมาชิก
  • สร้าง Repository
  • Web Interface

⚡ บทที่ 2: Git Commands

  • ติดตั้ง Git
  • Clone และ Branch
  • Commit และ Push
  • การแก้ปัญหา

🤝 บทที่ 3: Collaboration

  • Fork และ Pull Request
  • Code Review
  • Issues และ Projects
  • GitHub Flow

🚀 บทที่ 4: Advanced

  • GitHub Actions
  • CI/CD Pipeline
  • Security Features
  • Best Practices
📖 บทที่ 1 ⚡ บทที่ 2 🤝 บทที่ 3 🚀 บทที่ 4

🎉 ขอบคุณที่เรียนรู้ GitHub กับเรา!

หวังว่าคู่มือนี้จะช่วยให้คุณเป็น GitHub Expert 🌟

Happy Coding! 👨‍💻👩‍💻