Setup

Complete guide from git clone to https://dung87.io.vn/ running on Cloudflare Pages.

1. Prerequisites

Tool	Version	Install
Node.js	≥ 20	https://nodejs.org (LTS) or nvm install 20
npm	≥ 10	Bundled with 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	Pointed to Cloudflare NS	https://dash.cloudflare.com → Add site

2. Quick start (5 min)

# 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. Cloudflare Pages setup

Step 1: Verify domain

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

Step 2: Create Pages project

1. Cloudflare Dashboard → Workers & Pages → Create application
2. Tab Pages → Connect to Git
3. Authorize GitHub → pick vuhuudung/dung87.io.vn
4. Project name: dung87-io-vn-hub
5. Production branch: main
6. Build settings:
   • Build command: npm run build
   • Build output directory: dist
   • Root directory: (empty)
7. Environment variables: NODE_VERSION = 20

Step 3: Add custom domains

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

• Add dung87.io.vn (apex)
• Add www.dung87.io.vn

Cloudflare auto-issues SSL cert (~30-90 seconds).

4. GitHub Actions secrets

Go to Settings → Secrets and variables → Actions → New repository secret:

Name	Value	Where to get
CLOUDFLARE_API_TOKEN	Token with Pages:Edit + Account:Read scope	https://dash.cloudflare.com/profile/api-tokens
CLOUDFLARE_ACCOUNT_ID	Your account ID	URL ?to=/:account/... in 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

Open https://dung87.io.vn/ — site displays hero + 4 project cards + skill filter.

Quick troubleshooting

Issue	Fix
EACCES on npm install	Use nvm or sudo chown -R $(whoami) ~/.npm
Port 4321 in use	npx kill-port 4321 or taskkill /PID <pid> /F (Win)
validate fails: Invalid slug	Fix slug to match /^[a-z0-9-]+$/ (lowercase + a-z, 0-9, -)
GH Actions: Auth error	Mint new token, check secret name is correct (case-sensitive)
Site returns old HTML	dig CNAME dung87.io.vn to check DNS, hard reload browser
Custom domain “pending” forever	Check DNS, wait 5-10 min for cert
/en/ 308 redirect	Standard CF Pages behavior, browser auto-follows

Detailed troubleshooting: see SETUP.md on GitHub.

Next steps

• Usage guide → — common tasks
• Add new subdomain → — 10 steps