Cài đặt

Hướng dẫn cài đặt từ đầu đến production deploy

Cài đặt

Hướng dẫn đầy đủ từ git clone đến khi https://dung87.io.vn/ chạy trên Cloudflare Pages.

1. Prerequisites

Tool	Version	Cài đặt
Node.js	≥ 20	https://nodejs.org (LTS) hoặc `nvm install 20`
npm	≥ 10	Kèm theo Node
Git	≥ 2.30	https://git-scm.com
GitHub account	—	https://github.com/signup
Cloudflare account	Free tier OK	https://dash.cloudflare.com/sign-up
Domain `dung87.io.vn`	Trỏ về Cloudflare NS	https://dash.cloudflare.com → Add site

2. Quick start (5 phút)

# 1. Clone
git clone git@github.com:vuhuudung/dung87.io.vn.git
cd dung87.io.vn

# 2. Install
npm install

# 3. Dev server
npm run dev
# → http://localhost:4321

# 4. Validate
npm run validate
npm run lint

# 5. Production build
npm run build
npm run preview
# → http://localhost:4322

3. Cấu hình Cloudflare Pages

Bước 1: Verify domain

dig NS dung87.io.vn
# Expect: cortney.ns.cloudflare.com, lynn.ns.cloudflare.com

Bước 2: Tạo Pages project

Cloudflare Dashboard → Workers & Pages → Create application
Tab Pages → Connect to Git
Authorize GitHub → chọn vuhuudung/dung87.io.vn
Project name: dung87-io-vn-hub
Production branch: main
Build settings:
- Build command: npm run build
- Build output directory: dist
- Root directory: (trống)
Environment variables: NODE_VERSION = 20

Bước 3: Add custom domains

Pages project → Custom domains → Set up a custom domain:

Thêm dung87.io.vn (apex)
Thêm www.dung87.io.vn

Cloudflare tự động issue SSL cert (~30-90 giây).

4. GitHub Actions secrets

Vào Settings → Secrets and variables → Actions → New repository secret:

Name	Value	Cách lấy
`CLOUDFLARE_API_TOKEN`	Token có scope `Pages:Edit` + `Account:Read`	https://dash.cloudflare.com/profile/api-tokens
`CLOUDFLARE_ACCOUNT_ID`	Account ID của bạn	URL `?to=/:account/...` trong CF dashboard

5. Verify

# DNS
dig CNAME dung87.io.vn
# Expect: <project>.pages.dev

# HTTPS
curl -sI https://dung87.io.vn/ | head -1
# Expect: HTTP/2 200

Mở https://dung87.io.vn/ — site hiển thị hero + 4 project cards + skill filter.

Troubleshooting nhanh

Vấn đề	Fix
`EACCES` khi `npm install`	Dùng `nvm` hoặc `sudo chown -R $(whoami) ~/.npm`
Port 4321 đã dùng	`npx kill-port 4321` hoặc `taskkill /PID <pid> /F` (Win)
`validate` fail: Invalid slug	Sửa slug match `/^[a-z0-9-]+$/` (lowercase + a-z, 0-9, `-`)
GH Actions: Authentication error	Mint token mới, kiểm tra secret name đúng (case-sensitive)
Site trả HTML cũ	`dig CNAME dung87.io.vn` xem DNS, hard reload browser
Custom domain “pending” forever	Check DNS, đợi 5-10 phút cho cert
`/en/` 308 redirect	Đây là behavior chuẩn của CF Pages, browser tự follow

Chi tiết troubleshooting: xem SETUP.md trên GitHub.

Next steps

Hướng dẫn sử dụng → — common tasks
Thêm subdomain mới → — 10 bước

Quay lại danh sách tài liệu