Workshop: Hello World Deploy

Project Brief

Hello World Deploy

สร้างหน้าเว็บง่ายๆ แล้ว deploy ขึ้นอินเทอร์เน็ตด้วย Git + GitHub Pages

ติดตั้ง VS Code + extensions ที่จำเป็น
สร้าง project folder ที่มี index.html
เขียน HTML พื้นฐาน (heading + paragraph)
ใช้ Git init, add, commit
Push ขึ้น GitHub repository
Deploy ด้วย GitHub Pages

Deploy to: GitHub Pages

Project Structure

Directoryhello-world/
- index.html หน้าเว็บ Hello World
- .gitignore ไฟล์ที่ไม่ต้อง track

Step-by-Step Instructions

ติดตั้ง VS Code + Extensions

ดาวน์โหลด VS Code จาก code.visualstudio.com แล้วติดตั้ง extensions:
- Prettier — จัดรูปแบบโค้ดอัตโนมัติ
- Live Server — เปิดหน้าเว็บแบบ live reload
- Auto Rename Tag — เปลี่ยนชื่อ tag เปิด/ปิดพร้อมกัน
สร้าง Project Folder

เปิด Terminal ใน VS Code แล้วสร้างโฟลเดอร์:
Terminal window
```
mkdir hello-world
cd hello-world
code .
```

เขียน index.html

สร้างไฟล์ index.html พิมพ์ ! แล้วกด Tab เพื่อสร้าง HTML boilerplate จากนั้นเพิ่มเนื้อหา:

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello World</title>
</head>
<body>
  <h1>สวัสดีชาวโลก!</h1>
  <p>นี่คือเว็บไซต์แรกของฉัน</p>
</body>
</html>

ดูผลลัพธ์ด้วย Live Server

คลิกขวาที่ index.html แล้วเลือก Open with Live Server เพื่อดูผลลัพธ์ทันที

เริ่มใช้ Git

git init
git add .
git commit -m "first commit: add hello world page"

Push ขึ้น GitHub

สร้าง repository ใหม่บน github.com (ชื่อ hello-world, อย่าติ๊ก Add README) แล้ว:
Terminal window
```
git remote add origin https://github.com/YOUR_USERNAME/hello-world.git
git push -u origin main
```
Deploy ด้วย GitHub Pages

ไปที่ Settings > Pages ใน repository เลือก branch main แล้วกด Save รอ 1-2 นาที เว็บจะขึ้นที่ https://YOUR_USERNAME.github.io/hello-world

เมื่อทำเสร็จแล้ว ไปดูเฉลยได้ที่ Solution เพื่อเทียบกับงานของคุณ