คุณกำลังมองหาวิธีสร้างเว็บไซต์แบบง่ายๆ โดยไม่ต้องติดตั้งโปรแกรมลงเครื่องคอมพิวเตอร์อยู่ใช่ไหม? ในยุคปัจจุบัน การพัฒนาเว็บกลายเป็นเรื่องที่เข้าถึงได้ง่ายขึ้นมาก ด้วยเครื่องมืออย่าง GitHub Codespaces และ Vercel คุณสามารถเขียนโค้ดและนำเว็บไซต์ขึ้นออนไลน์ได้ฟรีภายในไม่กี่นาที
บทความนี้จะพาคุณไปทำความเข้าใจขั้นตอนการสร้างเว็บไซต์ HTML ตั้งแต่เริ่มต้นจนถึงการ Deploy ให้ใช้งานได้จริงบนอินเทอร์เน็ต โดยไม่ต้องเสียค่าใช้จ่ายและไม่ต้องตั้งค่า Server ให้ยุ่งยาก เหมาะสำหรับมือใหม่ที่ต้องการฝึกเขียนเว็บหรือสร้างโปรเจกต์ส่วนตัว
สารบัญ
- GitHub Codespaces และ Vercel คืออะไร?
- ขั้นตอนที่ 1: สร้าง Repository บน GitHub
- ขั้นตอนที่ 2: เปิดใช้งาน Codespaces เพื่อเขียนโค้ด
- ขั้นตอนที่ 3: สร้างและวางโค้ด HTML
- ขั้นตอนที่ 4: เชื่อมต่อและ Deploy บน Vercel
- ตารางเปรียบเทียบเครื่องมือ
- คำถามที่พบบ่อย (FAQ)
GitHub Codespaces และ Vercel คืออะไร?
ก่อนจะเริ่มลงมือทำ เรามาทำความรู้จักกับเครื่องมือทั้งสองตัวนี้กันก่อนครับ เพื่อให้เห็นภาพรวมว่าทำไมมันถึงเป็นคู่หูที่สมบูรณ์แบบสำหรับการทำเว็บ
GitHub Codespaces คือสภาพแวดล้อมการพัฒนา (Development Environment) บนระบบ Cloud คุณสามารถเปิดใช้งาน VS Code ได้โดยตรงผ่าน Browser ทำให้คุณเขียนโค้ดได้จากทุกที่ ไม่ว่าจะเป็นคอมพิวเตอร์เครื่องไหนก็ตาม โดยไม่ต้องติดตั้งโปรแกรมลงเครื่องให้หนักพื้นที่
Vercel คือแพลตฟอร์มสำหรับ Hosting เว็บไซต์ที่รองรับการ Deploy อัตโนมัติ เพียงแค่คุณเชื่อมต่อ GitHub Repository ของคุณเข้ากับ Vercel ทุกครั้งที่มีการอัปเดตโค้ด ระบบจะทำการ Deploy เว็บไซต์ให้ใหม่ทันทีอย่างรวดเร็วและแม่นยำ
ขั้นตอนที่ 1: สร้าง Repository บน GitHub
สิ่งแรกที่ต้องทำคือการสร้างพื้นที่เก็บไฟล์โปรเจกต์ของคุณบน GitHub
- เข้าสู่ระบบ GitHub ของคุณ
- กดปุ่ม New repository
- ตั้งชื่อโปรเจกต์ของคุณ เช่น
my-html-site - เลือกสถานะเป็น Public หรือ Private ตามความต้องการ
- กดปุ่ม Create repository เพื่อเริ่มต้น
ขั้นตอนที่ 2: เปิดใช้งาน Codespaces เพื่อเขียนโค้ด
เมื่อได้ Repository แล้ว เราจะมาเริ่มเขียนโค้ดกันโดยไม่ต้องลงโปรแกรม
- ในหน้า Repository ของคุณ ให้กดปุ่ม Code
- เลือกแท็บ Codespaces
- กดปุ่ม Create codespace on main
- ระบบจะทำการเปิดหน้า VS Code เวอร์ชั่นออนไลน์ขึ้นมาใน Browser ให้คุณโดยอัตโนมัติ
ขั้นตอนที่ 3: สร้างและวางโค้ด HTML
เมื่ออยู่ในหน้า Codespaces แล้ว ให้ทำตามขั้นตอนดังนี้:
- สร้างไฟล์ใหม่โดยกดไอคอน New File แล้วตั้งชื่อว่า
index.html(ชื่อนี้สำคัญมาก เพราะเป็นไฟล์เริ่มต้นที่ Browser จะอ่าน) - คัดลอกโค้ด HTML พื้นฐานด้านล่างนี้ไปวางในไฟล์:
<!doctype html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<title>My HTML Site</title>
</head>
<body>
<h1>Hello Vercel</h1>
<p>เว็บนี้สร้างจาก GitHub Codespaces</p>
</body>
</html>หลังจากวางโค้ดแล้ว อย่าลืมบันทึกไฟล์ (Ctrl+S หรือ Cmd+S) และทำการ Commit/Push ขึ้น GitHub โดยใช้ Terminal หรือเมนู Source Control ด้านซ้ายมือ ด้วยคำสั่ง git add ., git commit -m "add index html" และ git push
ขั้นตอนที่ 4: เชื่อมต่อและ Deploy บน Vercel
ขั้นตอนนี้คือการทำให้เว็บไซต์ของคุณออนไลน์ให้คนอื่นเข้าชมได้
- ไปที่ Vercel และ Login ด้วยบัญชี GitHub
- กดปุ่ม Add New Project
- เลือก Import Git Repository ที่คุณเพิ่งสร้างไว้
- ในส่วนการตั้งค่า ให้เลือก Framework เป็น Other และปล่อยค่า Build Command/Output Directory ไว้เป็นค่าเริ่มต้น
- กด Deploy ระบบจะใช้เวลาเพียงครู่เดียวในการสร้าง URL เว็บไซต์ให้คุณ
ตารางเปรียบเทียบเครื่องมือ
| เครื่องมือ | หน้าที่หลัก | ข้อดี |
|---|---|---|
| GitHub Codespaces | เขียนโค้ดออนไลน์ | ไม่ต้องลงโปรแกรม, ใช้งานได้ทุกที่ |
| Vercel | Hosting เว็บไซต์ | Deploy อัตโนมัติ, รวดเร็ว, ฟรี |
| GitHub | เก็บไฟล์โค้ด | เป็นมาตรฐานสากล, เชื่อมต่อง่าย |
ข้อแนะนำเพิ่มเติม: หากคุณต้องการแก้ไขเว็บไซต์ในอนาคต เพียงแค่กลับไปแก้ไขไฟล์ใน Codespaces หรือ GitHub แล้วทำการ Push โค้ดใหม่ Vercel จะทำการอัปเดตเว็บไซต์ให้คุณโดยอัตโนมัติ (Auto-deploy) ทำให้กระบวนการทำงานของคุณลื่นไหลและประหยัดเวลาอย่างมาก
FAQ
คำถาม: ต้องเสียค่าใช้จ่ายหรือไม่?
คำตอบ: ไม่เสียค่าใช้จ่ายสำหรับโปรเจกต์ขนาดเล็กหรือการใช้งานส่วนตัว ทั้ง GitHub Codespaces และ Vercel มีแพ็กเกจ Free Tier ที่เพียงพอสำหรับการใช้งานทั่วไปครับ
คำถาม: ถ้าอยากใช้ชื่อโดเมนตัวเองทำได้ไหม?
คำตอบ: ได้แน่นอนครับ Vercel รองรับการเชื่อมต่อ Custom Domain ในการตั้งค่าโปรเจกต์ของคุณ
คำถาม: ต้องมีความรู้เรื่อง Git มากแค่ไหน?
คำตอบ: สำหรับการใช้งานเบื้องต้น คุณเพียงแค่ต้องรู้วิธี Add, Commit และ Push โค้ด ซึ่งสามารถทำผ่านปุ่มกดใน VS Code ได้เลยโดยไม่ต้องพิมพ์คำสั่งเองครับ
การเริ่มต้นทำเว็บไซต์ด้วยวิธีนี้ไม่เพียงแต่ช่วยให้คุณได้ผลลัพธ์ที่รวดเร็ว แต่ยังเป็นการฝึกฝนทักษะการใช้เครื่องมือมาตรฐานที่นักพัฒนาทั่วโลกใช้กันจริง หากคุณสนใจศึกษาเพิ่มเติมเกี่ยวกับการพัฒนาเว็บ หรือต้องการเปรียบเทียบ Hosting อื่นๆ สามารถติดตามบทความถัดไปของเราได้ที่หน้าหลัก หรือลองนำวิธีนี้ไปปรับใช้กับโปรเจกต์ของคุณดูครับ ข้อมูลอ้างอิงและขั้นตอนการใช้งานอ้างอิงจาก GitHub Docs และ Vercel Documentation
