# คู่มือการ Deploy เว็บไปยัง GitHub Pages

## สารบัญ

- [ส่วนที่ 1: เตรียมความพร้อม](#ส่วนที่-1-เตรียมความพร้อม)
- [ส่วนที่ 2: การติดตั้งโปรเจกต์ Vite](#ส่วนที่-2-การติดตั้งโปรเจกต์-vite)
  - [2.1 Vite + Vanilla JS](#21-vite--vanilla-js)
  - [2.2 Vite + React](#22-vite--react)
  - [2.3 เปรียบเทียบโครงสร้างไฟล์](#23-เปรียบเทียบโครงสร้างไฟล์)
- [ส่วนที่ 3: สร้าง Repository บน GitHub](#ส่วนที่-3-สร้าง-repository-บน-github)
- [ส่วนที่ 4: เชื่อมโปรเจกต์ในเครื่องกับ GitHub](#ส่วนที่-4-เชื่อมโปรเจกต์ในเครื่องกับ-github)
- [ส่วนที่ 5: Deploy — Vite + Vanilla JS](#ส่วนที่-5-deploy--vite--vanilla-js)
  - [5.1 ตั้งค่า vite.config.js](#51-ตั้งค่า-viteconfigjs)
  - [5.2 Build โปรเจกต์](#52-build-โปรเจกต์)
  - [5.3 วิธีที่ 1 — Deploy ด้วย gh-pages](#53-วิธีที่-1--deploy-ด้วย-gh-pages)
  - [5.4 วิธีที่ 2 — Deploy ด้วย GitHub Actions](#54-วิธีที่-2--deploy-ด้วย-github-actions)
- [ส่วนที่ 6: Deploy — Vite + React](#ส่วนที่-6-deploy--vite--react)
  - [6.1 ตั้งค่า vite.config.js](#61-ตั้งค่า-viteconfigjs)
  - [6.2 กรณีใช้ React Router](#62-กรณีใช้-react-router-browserrouter)
  - [6.3 Build และ Deploy](#63-build-และ-deploy)
- [ส่วนที่ 7: Workflow การอัปเดตโปรเจกต์](#ส่วนที่-7-workflow-การอัปเดตโปรเจกต์)
- [ส่วนที่ 8: การตรวจสอบและ Debug](#ส่วนที่-8-การตรวจสอบและ-debug)
- [ส่วนที่ 9: โครงสร้างไฟล์สรุป](#ส่วนที่-9-โครงสร้างไฟล์สรุป)
- [สรุปขั้นตอนแบบย่อ](#สรุปขั้นตอนแบบย่อ)

---

## ภาพรวม

คู่มือนี้ครอบคลุมการ Deploy โปรเจกต์ 2 รูปแบบ:

- **Vite + Vanilla JS**
- **Vite + React**

ไปยัง **GitHub Pages** โดยใช้ทั้งวิธี Manual และ GitHub Actions (CI/CD อัตโนมัติ)

---

## ส่วนที่ 1: เตรียมความพร้อม

### 1.1 สิ่งที่ต้องมีก่อนเริ่ม

- Git ติดตั้งในเครื่อง → ตรวจสอบด้วย `git --version`
- Node.js และ npm → ตรวจสอบด้วย `node -v` และ `npm -v`
- บัญชี GitHub → [https://github.com](https://github.com)
- โปรเจกต์ Vite ที่พัฒนาเสร็จแล้ว

### 1.2 ตั้งค่า Git ครั้งแรก (ถ้ายังไม่เคยทำ)

```bash
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
```

---

## ส่วนที่ 2: การติดตั้งโปรเจกต์ Vite

### 2.1 Vite + Vanilla JS

**วิธีที่ 1 — ใช้ npm create (แนะนำ):**

```bash
npm create vite@latest my-vanilla-app
```

ระบบจะถามให้เลือก:

```
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript
```

**วิธีที่ 2 — ระบุ template ตรง ๆ ไม่ต้องตอบคำถาม:**

```bash
npm create vite@latest my-vanilla-app -- --template vanilla
```

**ติดตั้ง dependencies และเริ่มใช้งาน:**

```bash
cd my-vanilla-app
npm install
npm run dev
```

เปิดเบราว์เซอร์ที่ `http://localhost:5173` จะเห็นหน้าเว็บ Vite เริ่มต้น

**โครงสร้างไฟล์ที่ได้:**

```
my-vanilla-app/
├── public/
│   └── vite.svg
├── src/
│   ├── counter.js
│   ├── main.js
│   └── style.css
├── index.html
├── package.json
└── vite.config.js   ← อาจไม่มี ต้องสร้างเอง
```

> **หมายเหตุ:** template vanilla อาจไม่มีไฟล์ `vite.config.js` ให้สร้างขึ้นมาเองเมื่อต้องการตั้งค่า base path (ดูส่วนที่ 5)

---

### 2.2 Vite + React

**ก่อนใช้งานต้องมี Node.js เวอร์ชัน 18 ขึ้นไป** ตรวจสอบด้วย `node -v`

**วิธีที่ 1 — ใช้ npm create (แนะนำ):**

```bash
npm create vite@latest my-react-app
```

ระบบจะถามให้เลือก:

```
✔ Select a framework: › React
✔ Select a variant: › JavaScript
```

> เลือก **JavaScript** สำหรับโปรเจกต์ทั่วไป หรือ **TypeScript** ถ้าต้องการใช้ TypeScript

**วิธีที่ 2 — ระบุ template ตรง ๆ:**

```bash
# JavaScript
npm create vite@latest my-react-app -- --template react

# TypeScript
npm create vite@latest my-react-app -- --template react-ts
```

**ติดตั้ง dependencies และเริ่มใช้งาน:**

```bash
cd my-react-app
npm install
npm run dev
```

เปิดเบราว์เซอร์ที่ `http://localhost:5173` จะเห็นหน้าเว็บ React + Vite เริ่มต้น

**โครงสร้างไฟล์ที่ได้:**

```
my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js   ← มีมาให้แล้ว
└── .eslintrc.cjs
```

---

### 2.3 เปรียบเทียบโครงสร้างไฟล์

| ไฟล์/Folder | Vanilla JS | React |
|---|---|---|
| `src/main.js` / `src/main.jsx` | ✅ | ✅ |
| `src/App.jsx` | ❌ | ✅ |
| `vite.config.js` | ต้องสร้างเอง | มีให้แล้ว |
| `package.json` | ✅ | ✅ |
| `.eslintrc.cjs` | ❌ | ✅ |

**Scripts ที่ใช้บ่อยใน `package.json`:**

```json
{
  "scripts": {
    "dev": "vite",            // รัน dev server ที่ localhost:5173
    "build": "vite build",    // build สำหรับ production → folder dist/
    "preview": "vite preview" // preview ผลลัพธ์จาก build
  }
}
```

---

## ส่วนที่ 3: สร้าง Repository บน GitHub


**ขั้นตอน:**

1. เข้าไปที่ [https://github.com/new](https://github.com/new)
2. กรอก **Repository name** เช่น `my-vite-app`
3. เลือก **Public** (GitHub Pages ฟรีใช้ได้กับ Public repo)
4. **ไม่ต้อง** เลือก Initialize this repository
5. กด **Create repository**

---

## ส่วนที่ 4: เชื่อมโปรเจกต์ในเครื่องกับ GitHub

เปิด Terminal ใน folder โปรเจกต์ แล้วรันคำสั่งตามลำดับ:

```bash
# เริ่มต้น git repository (ถ้ายังไม่มี)
git init

# เพิ่มไฟล์ทั้งหมด
git add .

# Commit ครั้งแรก
git commit -m "first commit"

# เปลี่ยน branch เป็น main
git branch -M main

# เชื่อมกับ GitHub (แทนที่ YOUR_USERNAME และ YOUR_REPO)
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git

# Push ขึ้น GitHub
git push -u origin main
```

> **หมายเหตุ:** ถ้ามี `.gitignore` แล้วให้ตรวจสอบว่ามี `node_modules/` และ `dist/` อยู่ในนั้น

---

## ส่วนที่ 5: Deploy — Vite + Vanilla JS

### 5.1 ตั้งค่า `vite.config.js`

เพิ่มหรือแก้ไขไฟล์ `vite.config.js` ที่ root ของโปรเจกต์:

```javascript
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // เปลี่ยน 'YOUR_REPO' เป็นชื่อ repository ของคุณ
  base: '/YOUR_REPO/',
})
```

> **ตัวอย่าง:** ถ้า repo ชื่อ `portfolio` ให้ใส่ `base: '/portfolio/'`

> **ข้อยกเว้น:** ถ้าใช้ Custom Domain หรือ deploy ที่ root ให้ใส่ `base: '/'`

### 5.2 Build โปรเจกต์

```bash
npm run build
```

จะได้ folder `dist/` ที่มีไฟล์ที่พร้อม deploy

### 5.3 วิธีที่ 1 — Deploy ด้วย `gh-pages` (แนะนำสำหรับผู้เริ่มต้น)

**ติดตั้ง package:**

```bash
npm install --save-dev gh-pages
```

**เพิ่ม script ใน `package.json`:**

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  }
}
```

**Deploy:**

```bash
npm run build
npm run deploy
```

`gh-pages` จะสร้าง branch `gh-pages` และ push folder `dist/` ขึ้น GitHub โดยอัตโนมัติ

**ตั้งค่า GitHub Pages:**

1. ไปที่ GitHub repository → **Settings** → **Pages**
2. ตรง **Source** เลือก **Deploy from a branch**
3. เลือก branch **`gh-pages`** และ folder **`/ (root)`**
4. กด **Save**
5. รอประมาณ 1–2 นาที แล้วเว็บจะออนไลน์ที่ `https://YOUR_USERNAME.github.io/YOUR_REPO/`

---

### 5.4 วิธีที่ 2 — Deploy ด้วย GitHub Actions (CI/CD อัตโนมัติ)

วิธีนี้จะ build และ deploy อัตโนมัติทุกครั้งที่ push code

**สร้างไฟล์ `.github/workflows/deploy.yml`:**

```yaml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
```

**ตั้งค่า GitHub Pages ให้ใช้ GitHub Actions:**

1. ไปที่ **Settings** → **Pages**
2. ตรง **Source** เลือก **GitHub Actions**
3. Push code ขึ้น branch `main` แล้วระบบจะ deploy อัตโนมัติ

---

## ส่วนที่ 6: Deploy — Vite + React

ขั้นตอนคล้ายกับ Vanilla JS แต่มีรายละเอียดเพิ่มเติมสำหรับ React Router

### 6.1 ตั้งค่า `vite.config.js`

```javascript
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // เปลี่ยน 'YOUR_REPO' เป็นชื่อ repository ของคุณ
  base: '/YOUR_REPO/',
})
```

### 6.2 กรณีใช้ React Router (BrowserRouter)

GitHub Pages ไม่รองรับ client-side routing โดยตรง ต้องแก้ไขดังนี้:

**วิธีที่ 1 — เปลี่ยนมาใช้ `HashRouter`** (ง่ายที่สุด)

```javascript
// main.jsx หรือ App.jsx
import { HashRouter } from 'react-router-dom'

// เปลี่ยนจาก BrowserRouter เป็น HashRouter
<HashRouter>
  <App />
</HashRouter>
```

URL จะกลายเป็น `https://username.github.io/repo/#/about` แทน `/about`

**วิธีที่ 2 — ใช้ `404.html` redirect trick** (ยังใช้ BrowserRouter ได้)

สร้างไฟล์ `public/404.html`:

```html
<!DOCTYPE html>
<html>
<head>
  <script>
    // Single Page App redirect trick for GitHub Pages
    var segmentCount = 1; // เท่ากับ depth ของ base path
    var l = window.location;
    l.replace(
      l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
      l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?/' +
      l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
      (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
      l.hash
    );
  </script>
</head>
<body></body>
</html>
```

เพิ่ม script ใน `index.html` (ก่อน `</head>`):

```html
<script>
  (function(l) {
    if (l.search[1] === '/' ) {
      var decoded = l.search.slice(1).split('&').map(function(s) {
        return s.replace(/~and~/g, '&')
      }).join('?');
      window.history.replaceState(null, null,
        l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  }(window.location))
</script>
```

### 6.3 Build และ Deploy (เหมือนกับ Vanilla JS)

**ด้วย gh-pages:**

```bash
npm install --save-dev gh-pages
```

`package.json`:

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  }
}
```

```bash
npm run build
npm run deploy
```

**ด้วย GitHub Actions** — ใช้ไฟล์ `deploy.yml` เดียวกันกับ Vanilla JS ด้านบนได้เลย (ระบบจะรัน `npm run build` ซึ่ง Vite จะรู้จัก React plugin อยู่แล้ว)

---

## ส่วนที่ 7: Workflow การอัปเดตโปรเจกต์

หลังจาก deploy ครั้งแรกแล้ว เวลาแก้โค้ดและต้องการอัปเดตเว็บ:

### ใช้ gh-pages:

```bash
# 1. แก้โค้ด
# 2. Push code ปกติ
git add .
git commit -m "update: แก้ไข..."
git push

# 3. Deploy ใหม่
npm run build
npm run deploy
```

### ใช้ GitHub Actions:

```bash
# แก้โค้ด แล้ว push เท่านั้น — ระบบ deploy ให้อัตโนมัติ
git add .
git commit -m "update: แก้ไข..."
git push
```

---

## ส่วนที่ 8: การตรวจสอบและ Debug

### ตรวจสอบสถานะ Deployment

ไปที่ GitHub repository → แท็บ **Actions** เพื่อดู log การ build/deploy

### ปัญหาที่พบบ่อยและวิธีแก้

**ปัญหา: หน้าเว็บขึ้น 404**

สาเหตุ: ตั้งค่า `base` ใน `vite.config.js` ไม่ถูกต้อง

แก้ไข: ตรวจสอบว่า `base: '/ชื่อ-repo-ของคุณ/'` ตรงกับชื่อ repository บน GitHub

**ปัญหา: CSS หรือ JS ไม่โหลด**

สาเหตุ: path ของ assets ไม่ถูกต้อง

แก้ไข: ตรวจสอบ `base` อีกครั้ง และ build ใหม่

**ปัญหา: React Router กด link แล้วได้ 404**

แก้ไข: เปลี่ยนมาใช้ `HashRouter` หรือเพิ่ม `404.html` ตามที่อธิบายในส่วนที่ 5.2

**ปัญหา: `npm run deploy` แล้วขึ้น permission error**

แก้ไข:
```bash
# ลอง clear cache ของ gh-pages
npx gh-pages-clean
npm run deploy
```

**ปัญหา: การ deploy ช้าหรือไม่อัปเดต**

- GitHub Pages อาจใช้เวลา 1–5 นาทีในการ propagate
- ลอง hard refresh ด้วย `Ctrl + Shift + R` (Windows/Linux) หรือ `Cmd + Shift + R` (Mac)

---

## ส่วนที่ 9: โครงสร้างไฟล์สรุป

```
your-project/
├── .github/
│   └── workflows/
│       └── deploy.yml          ← GitHub Actions (ถ้าใช้)
├── public/
│   └── 404.html                ← สำหรับ React Router (ถ้าใช้)
├── src/
│   └── ...
├── index.html
├── package.json
├── vite.config.js              ← ต้องตั้งค่า base
└── .gitignore                  ← ต้องมี node_modules/ และ dist/
```

---

## สรุปขั้นตอนแบบย่อ

| ขั้นตอน | คำสั่ง |
|---------|--------|
| สร้าง repo | ทำบน GitHub.com |
| เชื่อม git | `git remote add origin ...` |
| ตั้งค่า base | แก้ `vite.config.js` |
| ติดตั้ง gh-pages | `npm install --save-dev gh-pages` |
| Build | `npm run build` |
| Deploy | `npm run deploy` |
| อัปเดตครั้งถัดไป | `npm run build && npm run deploy` |

URL ของเว็บที่ deploy แล้ว: `https://YOUR_USERNAME.github.io/YOUR_REPO/`