เว็บไซต์ Portfolio ส่วนตัวแนว Professional Engineering & AI Systems
- สิ่งที่ต้องติดตั้งก่อนเริ่ม
- วิธีติดตั้งโปรเจกต์
- วิธีรันโปรเจกต์
- โครงสร้างไฟล์
- วิธีแก้ไขข้อมูลใน data.json
- วิธีเพิ่ม/ลดโครงการ
- วิธีใส่รูปภาพ
- วิธีแก้ไขข้อความหน้าเว็บ
- วิธี Build / Export
- วิธี Deploy ขึ้น GitHub Pages
- วิธี Deploy ขึ้น Vercel
- แก้ปัญหาที่พบบ่อย
Node.js คือโปรแกรมที่ใช้รัน JavaScript บนเครื่องของเรา
- ไปที่ https://nodejs.org
- ดาวน์โหลดเวอร์ชัน LTS (แนะนำ)
- เปิดไฟล์ที่ดาวน์โหลดมา แล้วกด Next > Next > Install จนเสร็จ
- ตรวจสอบว่าติดตั้งสำเร็จ โดยเปิด Command Prompt หรือ PowerShell แล้วพิมพ์:
node --versionถ้าแสดงตัวเลข เช่น v20.x.x แปลว่าติดตั้งสำเร็จ
- ไปที่ https://git-scm.com
- ดาวน์โหลดแล้วติดตั้ง (กด Next จนเสร็จ)
- ตรวจสอบ:
git --version- แตกไฟล์ ZIP ออกมา
- เปิด Terminal หรือ PowerShell แล้วเข้าไปในโฟลเดอร์โปรเจกต์:
cd "C:\path\to\โปรเจกต์"- ติดตั้ง dependencies (ไฟล์ที่โปรเจกต์ต้องใช้):
npm installรอจนเสร็จ (อาจใช้เวลา 1-3 นาที)
git clone https://github.com/titiwatpure/theone.github.io.git
cd theone.github.io
npm installnpm run devแล้วเปิดเบราว์เซอร์ไปที่: http://localhost:3000
ทุกครั้งที่แก้ไขไฟล์ เว็บจะรีเฟรชอัตโนมัติ
กด Ctrl + C ใน Terminal
โปรเจกต์/
├── data.json ← ข้อมูลทั้งหมดของเว็บ (แก้ที่นี่)
├── public/
│ └── images/ ← ใส่รูปภาพทั้งหมดที่นี่
│ ├── avatar.jpg ← รูปโปรไฟล์
│ ├── project-1.jpg ← รูปโครงการ 1
│ └── ...
├── src/
│ ├── app/
│ │ ├── page.tsx ← หน้า Home
│ │ ├── about/page.tsx ← หน้า About
│ │ ├── skills/page.tsx
│ │ ├── projects/page.tsx
│ │ ├── tools/page.tsx
│ │ ├── articles/page.tsx
│ │ └── contact/page.tsx
│ └── components/ ← ส่วนประกอบ UI
└── package.json
สิ่งที่ต้องแก้หลักๆ มี 2 อย่าง:
data.json— ข้อมูลข้อความทั้งหมดpublic/images/— รูปภาพทั้งหมด
เปิดไฟล์ data.json ด้วยโปรแกรมแก้ไขรหัส (เช่น VS Code, Notepad++)
{
"personal": {
"name": "ชื่อภาษาไทย",
"nameEn": "Name English",
"title": "ตำแหน่งหรือคำโปรย",
"role": "บทบาท",
"bio": "คำอธิบายตัวเองสั้นๆ",
"avatar": "/images/avatar.jpg",
"stats": {
"years": "5+",
"projects": 24,
"clients": 12
}
}
}วิธีแก้:
- เปลี่ยน
"name"เป็นชื่อของคุณ - เปลี่ยน
"title"เป็นคำโปรยที่ต้องการ - เปลี่ยน
"bio"เป็นคำอธิบายตัวเอง - เปลี่ยนตัวเลขใน
"stats"เป็นของจริง
{
"contact": {
"email": "your@email.com",
"line": "@yourline",
"facebook": "https://facebook.com/yourprofile",
"phone": "0xx-xxx-xxxx",
"github": "https://github.com/username",
"linkedin": "https://linkedin.com/in/username"
}
}วิธีแก้: เปลี่ยนข้อมูลในเครื่องหมาย " " ให้เป็นของจริง
{
"skills": {
"electrical": {
"title": "Electrical Engineering",
"icon": "zap",
"items": [
"ทักษะ 1",
"ทักษะ 2",
"ทักษะ 3"
]
}
}
}วิธีเพิ่มทักษะ: เพิ่มข้อความใหม่ใน items array
"items": [
"ทักษะเดิม 1",
"ทักษะเดิม 2",
"ทักษะใหม่ที่ต้องการเพิ่ม"
]วิธีลบทักษะ: ลบบรรทัดที่ไม่ต้องการออก (อย่าลืมลบ , ให้ถูก)
เปิด data.json หาส่วน "projects" แล้วเพิ่มโครงการต่อท้าย:
{
"projects": [
{
"name": "โครงการเดิม 1",
"desc": "...",
...
},
{
"name": "โครงการเดิม 2",
"desc": "...",
...
},
{
"name": "โครงการใหม่ของคุณ",
"desc": "คำอธิบายโครงการ",
"problem": "ปัญหาที่พบ",
"solution": "วิธีแก้ปัญหา",
"tools": ["Python", "React", "PostgreSQL"],
"tags": ["AI", "Dashboard"],
"image": "/images/project-new.jpg",
"year": "2024"
}
]
}แต่ละฟิลด์หมายถึง:
| ฟิลด์ | คำอธิบาย | ตัวอย่าง |
|---|---|---|
name |
ชื่อโครงการ | "Document Audit AI" |
desc |
คำอธิบายสั้นๆ | "ระบบตรวจสอบเอกสารด้วย AI" |
problem |
ปัญหาที่พบ | "การตรวจสอบเอกสารใช้เวลานาน" |
solution |
วิธีแก้ | "พัฒนาระบบ AI ตรวจสอบอัตโนมัติ" |
tools |
เครื่องมือที่ใช้ | ["Python", "FastAPI"] |
tags |
หมวดหมู่ | ["AI", "Automation"] |
image |
รูปภาพ | "/images/project-1.jpg" |
year |
ปีที่ทำ | "2024" |
สำคัญ: ทุกโครงการต้องมี
,คั่นระหว่างกัน ยกเว้นโครงการสุดท้ายไม่ต้องมี
ลบบล็อก { ... } ของโครงการที่ไม่ต้องการออก
ตัวอย่าง:
// ก่อนลบ (มี 3 โครงการ)
"projects": [
{ "name": "A", ... },
{ "name": "B", ... }, ← ต้องการลบ
{ "name": "C", ... }
]
// หลังลบ (เหลือ 2 โครงการ)
"projects": [
{ "name": "A", ... },
{ "name": "C", ... }
]ระวัง: ตรวจสอบว่ามี
,ถูกต้อง ไม่งั้นเว็บจะพัง
- เตรียมรูปภาพ (แนะนำ: JPG, PNG, WebP)
- ตั้งชื่อไฟล์ เป็นภาษาอังกฤษ ห้ามมีช่องว่าง เช่น:
avatar.jpg✅project-audit.jpg✅รูป โครงการ 1.jpg❌ (ห้ามมีช่องว่างและภาษาไทย)
- วางไฟล์ ในโฟลเดอร์
public/images/ - อ้างอิง ใน
data.jsonโดยใช้ path เริ่มจาก/images/
public/images/avatar.jpg → ใน data.json เขียน "/images/avatar.jpg"
public/images/project-1.jpg → ใน data.json เขียน "/images/project-1.jpg"
public/images/project-qa.jpg → ใน data.json เขียน "/images/project-qa.jpg"
วางไฟล์ avatar.jpg ใน public/images/ แล้วใน data.json:
{
"personal": {
"avatar": "/images/avatar.jpg"
}
}วางไฟล์รูปโครงการใน public/images/ แล้วใน data.json:
{
"projects": [
{
"name": "Project Name",
"image": "/images/project-1.jpg"
}
]
}| ประเภท | ขนาด (pixels) | รูปแบบ |
|---|---|---|
| รูปโปรไฟล์ | 400 x 400 | JPG, PNG |
| รูปโครงการ | 800 x 600 | JPG, WebP |
เคล็ดลับ: บีบอัดรูปก่อนใช้ ที่ https://tinypng.com เพื่อให้เว็บโหลดเร็ว
ไม่ต้องแก้โค้ด! แค่แก้ข้อความใน data.json แล้วเว็บจะอัปเดตอัตโนมัติ
| หน้าเว็บ | ข้อมูลใน data.json |
|---|---|
| หน้า Home | personal.name, personal.title, personal.bio |
| หน้า About | about.philosophy, about.highlights, about.experience |
| หน้า Skills | skills (แต่ละหมวด) |
| หน้า Projects | projects (แต่ละโครงการ) |
| หน้า AI Tools | aiTools (แต่ละเครื่องมือ) |
| หน้า Articles | articles (แต่ละบทความ) |
| หน้า Contact | contact (ข้อมูลติดต่อ) |
เปิด data.json แล้วแก้:
{
"personal": {
"title": "คำโปรยใหม่ของคุณ"
}
}{
"about": {
"philosophy": "ปรัชญาใหม่ของคุณ"
}
}npm run buildจะสร้างโฟลเดอร์ out/ ที่มีไฟล์ HTML, CSS, JS พร้อม upload
npx serve outแล้วเปิด http://localhost:3000 เพื่อดูเวอร์ชัน build
- ไปที่ https://github.com/new
- ตั้งชื่อ repo:
theone.github.io(ต้องตรงกับชื่อ GitHub username + .github.io) - เลือก Public
- กด Create repository
เปิด Terminal ในโฟลเดอร์โปรเจกต์:
git init
git add .
git commit -m "First commit"
git branch -M main
git remote add origin https://github.com/your-username/theone.github.io.git
git push -u origin main- ไปที่ repo บน GitHub
- กด Settings > Pages
- ที่ Source เลือก Deploy from a branch
- เลือก branch
mainและ folder/ (root) - กด Save
สร้างไฟล์ .github/workflows/deploy.yml:
name: Deploy to GitHub Pages
on:
push:
branches: [main]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run build
- uses: actions/upload-pages-artifact@v3
with:
path: out
deploy:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/deploy-pages@v4- กลับไป Settings > Pages
- เปลี่ยน Source เป็น GitHub Actions
- Push โค้ดขึ้น GitHub อีกครั้ง:
git add .
git commit -m "Add deploy workflow"
git push- ไปที่ tab Actions เพื่อดูสถานะ build
- เมื่อเสร็จ เว็บจะอยู่ที่
https://your-username.github.io
Vercel เป็นวิธีที่ง่ายที่สุด ฟรี และเหมาะกับ Next.js
- ไปที่ https://vercel.com
- กด Sign Up แล้วเลือก Continue with GitHub
- กด Add New > Project
- เลือก repo
theone.github.io - กด Deploy
Vercel จะ build และ deploy ให้อัตโนมัติ ทุกครั้งที่ push โค้ด Vercel จะ build ใหม่ให้เอง
เว็บจะอยู่ที่: https://theone.vercel.app (หรือชื่อที่ตั้งเอง)
# ลบ node_modules แล้วติดตั้งใหม่
rm -rf node_modules
npm install- ตรวจสอบว่า JSON ถูกต้อง (ไม่มี comma เกิน/ขาด)
- หยุด dev server (Ctrl+C) แล้วรันใหม่:
npm run dev- ตรวจสอบว่าไฟล์อยู่ใน
public/images/ - ตรวจสอบว่าชื่อไฟล์ถูกต้อง (ตรงกับใน data.json)
- ตรวจสอบว่าไม่มีช่องว่างในชื่อไฟล์
# ดู error message
npm run build
# ถ้าเป็น error เกี่ยวกับ TypeScript
# ตรวจสอบว่า data.json มี structure ถูกต้องถ้าไม่แน่ใจว่า JSON ถูกต้อง ให้:
- คัดลอกเนื้อหา data.json ไปที่ https://jsonlint.com
- กด Validate JSON
- แก้ไขตามที่แจ้ง
1. แก้ data.json → เปลี่ยนข้อความ/ข้อมูล
2. ใส่รูปใน public/images/ → เพิ่มรูปภาพ
3. npm run dev → ดูตัวอย่าง
4. npm run build → Build สำหรับ deploy
5. git push → อัปขึ้น GitHub/Vercel
- Next.js 16 — React Framework
- Tailwind CSS 4 — CSS Framework
- Framer Motion — Animation
- TypeScript — Type-safe JavaScript
- Sarabun + Space Mono — Fonts