เวิร์กช็อป›สร้างแอป & โค้ด
6 · สร้างแอป & โค้ด
deploy เว็บขึ้นออนไลน์
นำเว็บขึ้นออนไลน์ฟรี
ความคืบหน้าเวิร์กช็อป
รู้ใน 30 วิ
เว็บที่รันในเครื่องแล้ว เอาขึ้นออนไลน์ฟรีได้ใน 5 นาที บอก claude ว่าจะ deploy มันจะ ตั้ง git, push ขึ้น GitHub และต่อกับ Netlify/Vercel ให้
ฟรี ทั้ง 3 เจ้าgit push แล้วเว็บอัปเองClaude Code ตั้งค่าให้หมด
ดู Claude Code เอาเว็บขึ้นออนไลน์
จากโฟลเดอร์ในเครื่อง สู่ลิงก์ที่แชร์ได้
ดู Claude Code ทำงาน
คุณเอาเว็บนี้ขึ้น GitHub Pages ให้หน่อย ตอนนี้ยังไม่ได้ตั้ง git เลย
- ›รัน
git initและสร้าง .gitignore ให้เหมาะกับโปรเจกต์ - ›commit ไฟล์ทั้งหมด แล้วสร้าง repo บน GitHub ผ่าน
gh repo create - ›push โค้ดขึ้น แล้วเปิด GitHub Pages ให้ชี้มาที่ branch หลัก
- ›ตรวจ build ว่าผ่าน แล้วดึงลิงก์เว็บที่เผยแพร่มาให้
- ✓เสร็จ ได้ลิงก์
https://username.github.io/repoแชร์ได้เลย
เลือกที่ฝากเว็บ
ฟรีทั้งหมด เลือกตามงานได้เลย Claude Code ตั้งให้ได้ทุกเจ้า
📄
GitHub Pages
เว็บ static ล้วน (HTML/CSS/JS) ตั้งง่ายสุด เหมาะกับงานแรก
static
🌐
Netlify
ลากโฟลเดอร์วางก็ขึ้น มี form และ redirect ในตัว
ครบเครื่อง
▲
Vercel
เด่นเรื่องเว็บที่มี framework เช่น Next.js deploy ไวมาก
framework
ทุกเจ้าทำงานบนหลักเดียวกัน คือ git push แล้วเว็บอัปเดตเอง ขอแค่ตั้งครั้งแรกให้ถูก หลังจากนั้นแค่ commit ก็พอ
ลองเลยจับมือทำ
- ในโฟลเดอร์เว็บที่รันได้แล้ว เปิด
claudeขึ้นมา - เลือกที่ฝากเว็บแล้ววาง Prompt นี้ Claude Code จะถามขอสิทธิ์รันคำสั่ง git ให้กด Yesพิมพ์ Prompt นี้
ช่วย deploy เว็บนี้ขึ้น [GitHub Pages / Netlify / Vercel] ให้หน่อย ตอนนี้ยัง [ยังไม่ได้ / ได้แล้ว] ตั้ง git ในโฟลเดอร์นี้ ช่วยตั้ง git, push ขึ้น GitHub, ต่อกับบริการ และส่งลิงก์เว็บที่เผยแพร่มาให้ด้วย - ถ้ายังไม่ได้ล็อกอิน GitHub ใน CLI ให้รัน
gh auth loginตามที่มันบอก - รอ build เสร็จ แล้วเปิดลิงก์ที่ได้ในเบราว์เซอร์เพื่อเช็คว่าเว็บขึ้นจริง
- ครั้งต่อไปแค่พิมพ์
commit แล้ว push ของล่าสุดขึ้นไปเว็บก็อัปเดตเอง
ลองใช้ Prompt นี้
ผมแก้เว็บเพิ่มแล้ว ช่วย commit งานล่าสุดพร้อมข้อความสรุปสั้น ๆ แล้ว push ขึ้น [GitHub] ให้หน่อย
หลัง push เสร็จ ช่วยเช็คว่า deploy บน [Netlify/Vercel/GitHub Pages] สำเร็จไหม แล้วบอกลิงก์ล่าสุด
สรุปเวิร์กช็อป
- เว็บ static เอาขึ้นฟรีได้หลายเจ้า GitHub Pages ง่ายสุด Netlify ครบเครื่อง Vercel เด่นเรื่อง framework
- ให้ Claude Code ตั้ง git, push และต่อกับบริการให้ครบในรอบเดียว
- หลังตั้งครั้งแรกแล้ว แค่ commit และ push เว็บก็อัปเดตออนไลน์เองอัตโนมัติ
แบบทดสอบท้ายเวิร์กช็อป
ลองตอบดู แล้วระบบจะเฉลยให้ทันที
ข้อ 1.หลังตั้งค่า deploy ครั้งแรกเสร็จ ต้องทำอะไรเว็บถึงจะอัปเดต?
เฉลย: บริการ deploy เหล่านี้ผูกกับ git แค่ push ของใหม่ขึ้นไป เว็บก็ build และอัปเดตเอง
ข้อ 2.เว็บ static (HTML/CSS/JS ล้วน) งานแรก ๆ ตั้งง่ายที่สุดที่ไหน?
เฉลย: GitHub Pages โฮสต์เว็บ static ได้ฟรีและตั้งค่าง่ายที่สุดสำหรับงานแรก