20: Git & Deployment

ถึงเวลาเอาผลงานหน้าเว็บขึ้นไปโชว์บนโลกอินเทอร์เน็ตของจริง

1. แนะนำ Version Control (Git)

Version Control คือ "ระบบบันทึกประวัติการเปลี่ยนแปลงของไฟล์" ลองนึกภาพเวลาทำงานกลุ่ม แล้วต้องเซฟไฟล์ชื่อ งาน_final.docx, งาน_final_แก้แล้ว.docx, งาน_final_ส่งจริง_สุดๆ.docx เต็มเครื่องไปหมด

Git จะมาช่วยแก้ปัญหานี้ โดยทำหน้าที่เหมือน "ไทม์แมชชีน (Time Machine)" หรือ "จุดเซฟเกม" ที่คอยจำว่าไฟล์นี้ถูกแก้โค้ดอะไรไปบ้าง เมื่อไหร่ และถ้าพัง ก็สามารถกดย้อนเวลากลับไปจุดที่ใช้งานได้ทันที

อย่าสับสน
  • Git: คือโปรแกรมที่อยู่ใน "เครื่องคอมพิวเตอร์ของที่กำลังใช้งาน" (Local) ทำหน้าที่จัดการประวัติไฟล์
  • GitHub: คือ "เว็บไซต์บนอินเทอร์เน็ต" (Cloud) ที่ให้บริการฝากไฟล์ที่ถูกจัดการด้วย Git เพื่อให้คนอื่นเข้ามาดู หรือทำงานร่วมกันได้

2. การใช้งาน Git ขั้นพื้นฐาน

เพื่อให้เห็นภาพ ให้เปรียบเทียบการทำงานของ Git เหมือน "การจัดคนถ่ายรูปหมู่"

1. git init

"ตั้งกล้องถ่ายรูป"

บอกโปรแกรม Git ให้เริ่มจับตาดูโฟลเดอร์งานนี้ (ทำแค่ครั้งแรกครั้งเดียวของโปรเจกต์)

git init
2. git add .

"เรียกคนเข้าฉาก"

เลือกไฟล์ที่แก้ไขเสร็จแล้ว เตรียมตัวจะบันทึกประวัติ (จุด . หมายถึงเอาทุกไฟล์ในโฟลเดอร์นี้เข้าฉาก)

git add .
3. git commit

"กดชัตเตอร์ถ่ายรูป!"

บันทึกประวัติ ณ เวลานั้น พร้อมเขียนข้อความแปะไว้หลังรูปว่าแก้ไขอะไรไปบ้าง

git commit -m "เสร็จหน้าแรก"
4. git push

"อัปโหลดรูปลงโซเชียล"

ส่งไฟล์และประวัติการแก้ไขทั้งหมดจากเครื่องที่ใช้งาน ขึ้นไปเก็บบนเว็บ GitHub (Cloud)

git push origin main

3. นำเว็บขึ้นออนไลน์ด้วย GitHub Pages

GitHub Pages คือบริการฟรีของ GitHub ที่อนุญาตให้นำไฟล์โค้ด HTML, CSS, JS ที่ฝากไว้บนเว็บ แปลงร่างเป็นเว็บไซต์จริง ๆ ที่มี URL ให้คนอื่นกดเข้ามาดูได้

กฎเหล็กที่ห้ามพลาด

ไฟล์หน้าแรกของเว็บไซต์ ต้องตั้งชื่อว่า index.html เท่านั้น (ตัวพิมพ์เล็กทั้งหมด)
ถ้าตั้งชื่ออื่น เช่น home.html หรือ Main.html GitHub จะหาหน้าแรกไม่เจอและแสดงผลเป็นหน้า Error 404

ขั้นตอนการนำเว็บขึ้นออนไลน์ (Step-by-Step)

1
สร้างกล่องเก็บของ (Repository) บน GitHub
  1. สมัครสมาชิกและ Login เข้าเว็บ github.com
  2. กดปุ่ม New (สีเขียว) ด้านซ้ายบนเพื่อสร้าง Repository ใหม่
  3. ช่อง Repository name: ให้ตั้งชื่อโปรเจกต์ (เช่น my-first-website)
  4. เลือกเป็น Public สำคัญมาก ถ้าเป็น Private จะใช้ GitHub Pages ฟรีไม่ได้
  5. เลื่อนลงมาล่างสุด กดปุ่ม Create repository สีเขียว
2
ส่งโค้ดจากเครื่องที่ใช้งาน ขึ้นไปบน GitHub

เปิดโปรแกรม Terminal (Mac) หรือ Git Bash (Windows) ในโฟลเดอร์งานที่ต้องการนำไปอัพโหลดเป็นเว็บไซต์ แล้วพิมพ์คำสั่งเหล่านี้ทีละบรรทัด

Terminal / Git Bash 
git init
git add .
git commit -m "First upload"
git branch -M main

# เปลี่ยน URL ด้านล่าง เป็น URL ของ Repository ตัวเอง (ดูได้จากหน้าเว็บ GitHub)
git remote add origin https://github.com/ชื่อผู้ใช้ของคุณ/ชื่อโปรเจกต์ของคุณ.git

git push -u origin main

หากเด้งหน้าต่างให้ Login GitHub ให้ใส่ Username และ Password เพื่อยืนยันตัวตน

3
เปิดระบบ GitHub Pages ทำโค้ดให้เป็นเว็บ
  1. กลับไปที่หน้าเว็บโปรเจกต์ของเราบน GitHub สังเกตว่าจะมีไฟล์โค้ดของเราโผล่ขึ้นมาแล้ว!
  2. กดที่แท็บ ⚙️ Settings (แถบเมนูด้านบนขวา)
  3. มองเมนูด้านซ้ายมือ เลื่อนลงมาหาหัวข้อที่ชื่อว่า Pages แล้วคลิก
  4. ตรงหัวข้อ Build and deployment -> Source ให้เลือก Deploy from a branch
  5. ตรงหัวข้อ Branch ให้เปลี่ยนคำว่า None เป็นคำว่า main (หรือ master) แล้วกดปุ่ม Save

4. สำเร็จ! ได้ URL เว็บไซต์ของตัวเองแล้ว

รอให้เซิร์ฟเวอร์ทำงานประมาณ 1-2 นาที จากนั้นรีเฟรชหน้าเว็บ จะพบกับข้อความและลิ้งก์ URL ประจำเว็บไซต์ของคุณ

https://[ชื่อผู้ใช้].github.io/[ชื่อโปรเจกต์]/
สิ่งที่ต้องทำก่อนลุกออกจากห้องแลป

เพื่อป้องกันไม่ให้บุคคลอื่นเข้าถึงโปรเจกต์ หรือ GitHub ของเรา ให้ทำ 2 ขั้นตอนนี้ทุกครั้งหลังเรียนเสร็จ:

1. Log out ออกจากเบราว์เซอร์
  • ไปที่หน้าเว็บ github.com
  • คลิกที่รูปโปรไฟล์มุมขวาบน
  • เลือก Sign out ด้านล่างสุด
2. ลบรหัสผ่านออกจากเครื่องคอมพิวเตอร์

เลือกลบวิธีใดวิธีหนึ่งด้านล่างนี้:

1. กดปุ่ม Start (โลโก้ Windows) พิมพ์ค้นหา Credential Manager
2. คลิกแถบ Windows Credentials
3. เลื่อนลงมาหาชื่อที่เขียนว่า git:https://github.com
4. กดลูกศรชี้ลง แล้วเลือกคำว่า Remove (เอาออก) 

git config --global --unset credential.helper

🎓 จบหลักสูตร Frontend Web Development อย่างเป็นทางการ 🎓

เริ่มจากการเขียน HTML, การตกแต่งหน้าเว็บด้วย CSS/Bootstrap,
การสั่งงานเว็บด้วย JavaScript จนมาถึงวันนี้ที่นำผลงานขึ้นสู่โลกอินเทอร์เน็ตได้สำเร็จด้วยตัวเอง

เตรียมนำความรู้เหล่านี้ไปต่อยอดสร้างสรรค์ผลงานต่อในหัวข้อ Back-end Web Development ได้เลย

บทก่อนหน้า