หน้าหลัก › โมดูล 8: Workshop สร้าง Portfolio Website
บทเรียน 8.3
เอาเว็บขึ้นออนไลน์ ให้คนทั้งโลกเห็น
เว็บที่รันบนเครื่องคุณ พร้อมแชร์แล้ว! เลือกแพลตฟอร์มที่ชอบแล้วทำตามทีละขั้น หรือจะให้ Claude ช่วย deploy ให้ก็ได้ ทุกแพลตฟอร์มในบทนี้มีแพลนฟรี
📦 Deploy คืออะไร?
Deploy (ดีพลอย) คือการ เอาเว็บที่อยู่ในเครื่องเรา ไปวางไว้บนเซิร์ฟเวอร์ออนไลน์ เพื่อให้คนอื่นเปิดดูได้จากที่ไหนก็ได้ในโลก ผ่านลิงก์
เปรียบเหมือน: ทำอาหารเสร็จที่บ้าน (Local) แล้วเอาไปเปิดร้านให้คนมาซื้อ (Deploy) 🍜
ข่าวดี: ทุกแพลตฟอร์มข้างล่างนี้ มีแพลนฟรี และ Claude ทำให้คุณได้ — แค่บอก
| แพลตฟอร์ม | เหมาะกับ | ความง่าย | ฟรี |
|---|---|---|---|
| ☁️ Cloudflare Pages | เว็บทุกแบบ เร็วทั่วโลก | ⭐⭐⭐⭐ | ✅ ใจดีมาก |
| ▲ Vercel แนะนำมือใหม่ | React/Next.js | ⭐⭐⭐⭐⭐ | ✅ ใช่ |
| 🐙 GitHub Pages | เว็บนิ่งๆ ไฟล์ HTML | ⭐⭐⭐ | ✅ ใช่ |
| 🔷 Netlify | ลากวางไฟล์ ง่ายสุด | ⭐⭐⭐⭐⭐ | ✅ ใช่ |
🎯
มือใหม่ไม่รู้จะเลือกอะไร? เริ่มที่ Netlify (ลากวางไฟล์) ง่ายที่สุด หรือ Vercel ถ้าให้ Claude ทำให้ — ทั้งคู่ไม่ต้องตั้งค่าอะไรมาก
บทเรียนที่ 1
☁️ Cloudflare Pages
เร็วที่สุดในโลก ฟรีแบบใจป้ำ เหมาะกับทุกเว็บ
☁️
Cloudflare Pages
เครือข่ายเร็วที่สุด ครอบคลุม 300+ เมืองทั่วโลก
🎯 เหมาะเมื่อ: อยากได้เว็บโหลดเร็วทั่วโลก, มี traffic เยอะ, หรืออยากต่อ domain ฟรี SSL
✨ วิธีง่าย — ให้ Claude ทำให้ (ผ่าน GitHub)
เว็บจะ deploy ใหม่อัตโนมัติทุกครั้งที่แก้โค้ด — บอก Claude แบบนี้:
📋 คัดลอกบอก Claude
ช่วยเอาเว็บนี้ขึ้น GitHub แล้วบอกขั้นตอนต่อ Cloudflare Pages ให้หน่อย:
1. สร้าง git repo และ push ขึ้น GitHub
2. อธิบายวิธีไปเชื่อม repo กับ Cloudflare Pages ทีละขั้น
3. บอกค่า build settings ที่ต้องใส่
🔧 ทำเองทีละขั้น (เชื่อม GitHub → auto deploy)
- 1ให้ Claude push โค้ดขึ้น GitHub ก่อน (ใช้ prompt ด้านบน)
- 2เข้า
dash.cloudflare.com→ เมนู Workers & Pages → Create → แท็บ Pagesสมัครฟรีด้วย email ถ้ายังไม่มีบัญชี - 3กด Connect to Git เลือก repo ของคุณ
- 4ตั้งค่า: เว็บ HTML ธรรมดา → Build command เว้นว่าง, Output =
/· ถ้าเป็น React/Vite → Build =npm run build, Output =distไม่แน่ใจ? ถาม Claude: "เว็บผมต้องตั้ง build settings ยังไงบน Cloudflare" - 5กด Save and Deploy รอสักครู่
🎉
เว็บออนไลน์ที่
ชื่อเว็บ.pages.dev — แก้โค้ดแล้ว push ใหม่ จะ deploy เองอัตโนมัติ
บทเรียนที่ 2
▲ Vercel
ง่ายที่สุดสำหรับมือใหม่ โดยเฉพาะเว็บ React/Next.js
▲
Vercel
deploy ด้วยคำสั่งเดียว เหมาะกับ React, Next.js, Vite
🎯 เหมาะเมื่อ: ทำเว็บด้วย React/Next.js, อยาก deploy เร็วด้วยคำสั่งเดียว, มือใหม่ที่อยากให้ Claude จัดการให้หมด
✨ วิธีง่าย — คำสั่งเดียวจบ
บอก Claude ให้ deploy ให้เลย:
📋 คัดลอกบอก Claude
ช่วย deploy เว็บนี้ขึ้น Vercel ให้หน่อย ติดตั้ง vercel CLI ถ้ายังไม่มี แล้วรันคำสั่ง deploy พร้อมอธิบายแต่ละขั้นเป็นภาษาไทย
🔧 ทำเองทีละขั้น
- 1ติดตั้ง Vercel CLI (ทำครั้งเดียว):
$ npm install -g vercel
- 2เข้าไปในโฟลเดอร์เว็บ แล้วพิมพ์
vercelครั้งแรกจะให้ล็อกอิน (กด Enter ตามค่าเริ่มต้นได้เลย)
$ vercel
# ตอบคำถาม กด Enter ผ่านได้เลย
✓ Production: https://your-app.vercel.app
🎉
เว็บออนไลน์ที่
your-app.vercel.app — อัปเดตด้วยคำสั่ง vercel --prod
บทเรียนที่ 3
🐙 GitHub Pages
ฟรีตลอดกาล เหมาะกับเว็บ HTML นิ่งๆ
🐙
GitHub Pages
โฮสต์เว็บฟรีจาก GitHub repo ของคุณ
🎯 เหมาะเมื่อ: เว็บไฟล์ HTML/CSS/JS ธรรมดา (ไม่มี backend), อยากได้ที่ฟรีถาวร, เก็บโค้ดบน GitHub อยู่แล้ว
✨ วิธีง่าย — ให้ Claude จัดการ
📋 คัดลอกบอก Claude
ช่วยเอาเว็บนี้ขึ้น GitHub Pages ให้หน่อย:
1. สร้าง git repo และ push ขึ้น GitHub
2. ตั้งค่าให้ deploy ด้วย GitHub Pages
3. บอก URL ที่จะเข้าดูเว็บได้ และอธิบายเป็นภาษาไทย
🔧 ทำเองทีละขั้น
- 1ให้ Claude push เว็บขึ้น GitHub repo (ตั้งเป็น public)
- 2เข้าหน้า repo บน GitHub → Settings → Pages (เมนูซ้าย)
- 3ที่ Source เลือก branch
mainโฟลเดอร์/rootแล้วกด Save - 4รอ 1-2 นาที refresh หน้า จะเห็นลิงก์เว็บ
🎉
เว็บออนไลน์ที่
ชื่อคุณ.github.io/ชื่อ-repo⚠️
GitHub Pages รองรับเฉพาะเว็บ static (HTML/CSS/JS) — ถ้าเว็บมี backend หรือ database ให้ใช้ Vercel หรือ Cloudflare แทน
บทเรียนที่ 4
🔷 Netlify
ลากไฟล์มาวาง = ออนไลน์ทันที ไม่ต้องใช้คำสั่ง
🔷
Netlify
deploy ง่ายที่สุด — ลากโฟลเดอร์มาวางบนเว็บ
🎯 เหมาะเมื่อ: มือใหม่สุดๆ ไม่อยากแตะ command line เลย, อยาก deploy ใน 1 นาทีด้วยการลากวาง
✨ วิธีง่ายสุด — ลากวาง (Drag & Drop)
- 1เข้า
app.netlify.com/drop(สมัครฟรีด้วย email หรือ Google) - 2ลากโฟลเดอร์เว็บของคุณ จากเครื่อง มาวางในช่องบนหน้าเว็บ Netlifyไม่รู้ว่าโฟลเดอร์อยู่ไหน? ถาม Claude: "เปิดโฟลเดอร์เว็บให้หน่อย"
- 3รอสักครู่ — เว็บออนไลน์ทันที!
🎉
เว็บออนไลน์ที่
ชื่อสุ่ม.netlify.app (เปลี่ยนชื่อได้ในตั้งค่า)🔧 หรือให้ Claude ทำผ่าน CLI
📋 คัดลอกบอก Claude
ช่วย deploy เว็บนี้ขึ้น Netlify ให้หน่อย ติดตั้ง netlify-cli ถ้ายังไม่มี แล้วรัน deploy พร้อมอธิบายเป็นภาษาไทย
โบนัส
🌍 ใช้โดเมนของตัวเอง
จาก ชื่อ.pages.dev → เป็น www.ชื่อร้านคุณ.com
อยากให้เว็บมีที่อยู่สวยๆ เป็นชื่อร้านหรือชื่อคุณเอง? ทำได้! แค่ซื้อโดเมน (ปีละไม่กี่ร้อยบาท) แล้วเชื่อมกับเว็บ
- 1ซื้อโดเมนจาก Cloudflare, Namecheap, หรือ GoDaddyเช่น mycoffeeshop.com ราคาประมาณ 300-500 บาท/ปี
- 2ในหน้าตั้งค่า deploy (Cloudflare/Vercel/Netlify) หา Custom Domain แล้วใส่โดเมนที่ซื้อ
- 3ทำตามที่ระบบบอก (ตั้งค่า DNS) — หรือถาม Claude ช่วย
📋 ถาม Claude เมื่อสับสน
ผมซื้อโดเมน [ชื่อโดเมน.com] มาแล้ว อยากเชื่อมกับเว็บที่ deploy บน [Cloudflare/Vercel/Netlify] ช่วยอธิบายขั้นตอนตั้งค่า DNS ทีละขั้นเป็นภาษาไทยหน่อย
← ก่อนหน้าPhase 2: Build & Iterateจบคอร์ส 🎉คุณเรียนครบแล้ว!