Setup

Full installation guide from scratch to production deploy

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

Cloudflare Dashboard → Workers & Pages → Create application
Tab Pages → Connect to Git
Authorize GitHub → pick 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: (empty)
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

Back to docs index