เมื่อพัฒนาเว็บไซต์เสร็จแล้ว ขั้นตอนสำคัญต่อไปคือการนำเว็บโปรเจกต์ของคุณขึ้นออนไลน์ เพื่อให้คนอื่นสามารถเข้าถึงได้จากทุกที่ทั่วโลก การ Deploy เว็บไซต์มีหลายวิธี หนึ่งในวิธีที่ได้รับความนิยมที่สุดคือการใช้ GitHub Pages และ Vercel ซึ่งทั้งสองบริการรองรับการเปิดให้ใช้งานฟรีและใช้งานง่าย แม้แต่ผู้เริ่มต้นก็สามารถทำตามขั้นตอนได้ไม่ยาก
ทำความรู้จักกับ GitHub Pages และ Vercel
ก่อนจะเริ่มลงมือ มาทำความรู้จักกับ GitHub Pages และ Vercel กันสั้น ๆ:
| บริการ | ข้อดี | เหมาะกับ |
|---|---|---|
| GitHub Pages | ฟรี ใช้งานร่วมกับ GitHub ง่าย เหมาะสำหรับเว็บแบบ static | เว็บพอร์ตโฟลิโอ เว็บแนะนำตัว หรือเอกสาร |
| Vercel | รองรับทั้ง static และ dynamic web, ติดตั้งง่าย, ฟรีในระดับเริ่มต้น | เว็บที่ใช้ React, Next.js หรือฟรอนต์เอนด์สมัยใหม่ |
วิธี Deploy เว็บด้วย GitHub Pages
1. เตรียมไฟล์โปรเจกต์
- สร้างเว็บเป็นแบบ static (HTML/CSS/JS เท่านั้น)
- จัดไฟล์ไว้ในโฟลเดอร์เดียว เช่น
distหรือpublic
2. สร้าง Repository ใน GitHub
- เข้าเว็บไซต์ GitHub
- คลิก “New repository” ตั้งชื่อโปรเจกต์ เช่น
my-website - อัปโหลดไฟล์ทั้งหมดของเว็บเข้าไป
3. เปิดใช้งาน GitHub Pages
- ไปที่หน้า Settings ของ Repository
- เลือกเมนู “Pages” จากแถบด้านซ้าย
- ในหัวข้อ Source เลือกสาขา (Branch) เช่น
mainแล้วเลือกโฟลเดอร์ เช่น/หรือ/docs - คลิก Save
- GitHub จะสร้างลิงก์เว็บไซต์ให้ ใช้งานได้ภายใน 1–2 นาที
ตัวอย่างลิงก์: https://username.github.io/my-website/
วิธี Deploy เว็บด้วย Vercel
1. สร้างบัญชี Vercel และเชื่อมต่อกับ GitHub
- ไปที่ vercel.com แล้วสมัครเข้าใช้งาน
- เลือกเชื่อมต่อกับบัญชี GitHub
2. Push โค้ดเว็บขึ้น GitHub
- ตรวจสอบว่าโค้ดของเว็บอยู่ใน GitHub repository แล้ว
- หากยังไม่มีให้อัปโหลดตามขั้นตอนในหัวข้อก่อนหน้า
3. Deploy ผ่าน Vercel
- ในหน้า Dashboard ของ Vercel คลิก “New Project”
- เลือกรายการ Repository ที่ต้องการนำขึ้น
- Vercel จะตรวจสอบและแนะนำการตั้งค่าอัตโนมัติ
- คลิก “Deploy” และรอเพียงไม่กี่วินาที
- เสร็จแล้วจะได้ลิงก์เว็บไซต์ เช่น
https://my-website.vercel.app
ข้อดีของ Vercel
- รองรับเว็บไซต์ที่ใช้ JavaScript framework อย่าง Next.js, Svelte, หรือ Vue.js
- สามารถตั้งค่า Custom Domain ได้ฟรี
- อัปเดตเว็บไซต์อัตโนมัติเมื่อ push โค้ดใหม่
ควรเลือก GitHub Pages หรือ Vercel ดี?
หากเว็บของคุณเป็นแบบ static ไม่มีการทำงานฝั่งเซิร์ฟเวอร์ GitHub Pages ก็เพียงพอและใช้งานง่าย แต่ถ้าใช้ Next.js, มีการ render แบบ dynamic หรืออยากได้ฟีเจอร์มากขึ้น Vercel คือตัวเลือกที่เหมาะสม
เปรียบเทียบโดยสังเขป
| คุณสมบัติ | GitHub Pages | Vercel |
|---|---|---|
| รองรับ Static Site | ✔️ | ✔️ |
| รองรับ Dynamic Site | ❌ | ✔️ |
| Custom Domain | ✔️ | ✔️ |
| เชื่อมต่อกับ GitHub | ✔️ | ✔️ |
| ใช้งานฟรี | ✔️ | ✔️ (ในระดับพื้นฐาน) |
การ Deploy เว็บโปรเจกต์ไม่ใช่เรื่องยากอีกต่อไป ทั้ง GitHub Pages และ Vercel ต่างก็มีเครื่องมือที่ช่วยให้คุณนำเว็บไซต์ขึ้นสู่โลกออนไลน์ได้สะดวกและรวดเร็ว ลองเลือกวิธีที่เหมาะสมกับประเภทเว็บของคุณ แล้วลงมือทำดูเลยวันนี้ เว็บพอร์ตโฟลิโอหรือโปรเจกต์ที่คุณภาคภูมิใจจะได้เปิดเผยต่อโลกได้อย่างมืออาชีพ
