Deploy nhiều website HTML/JS tĩnh lên Cloudflare Free

0. Kiến trúc cần đạt được

Khi có nhiều website, bạn lặp lại theo mô hình dưới đây:

Cloudflare Account
├── Pages: customer-a   → customer-a.com
├── Pages: customer-b   → customer-b.com
├── Pages: landing-x    → landing-x.vn
└── Pages: portfolio    → myportfolio.com

1. Đăng ký tài khoản Cloudflare

2. Thêm domain vào Cloudflare

Nếu bạn muốn dùng domain gốc như example.com, Cloudflare yêu cầu domain đó được thêm làm zone và nameserver trỏ về Cloudflare.

alice.ns.cloudflare.com
bob.ns.cloudflare.com

3. Chuẩn bị website static

Cloudflare Pages chỉ cần thư mục chứa file đã sẵn sàng để phục vụ.

HTML/JS thuần

site-a/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/

React/Vite đã build

dist/
├── index.html
└── assets/
    ├── index-abc123.js
    └── index-def456.css

4. Deploy website đầu tiên bằng Drag & Drop

Đây là cách dễ nhất khi bạn mới bắt đầu và đã có sẵn HTML/JS build output.

Sau khi thành công, hãy mở:

https://customer-a.pages.dev

5. Gắn domain riêng cho website

6. Deploy website thứ 2, 3, 4...

Lặp lại mỗi website thành một project riêng:

Free plan hiện có giới hạn theo tài liệu Cloudflare như: tối đa 500 builds/tháng, 20.000 files/site, file riêng lẻ tối đa 25 MiB và 100 custom domains/project. Với nhu cầu nhiều site static nhỏ, đây thường là mức khá thoải mái.

7. Khi có nhiều site: chuyển sang Wrangler CLI

Drag & Drop tốt để học. Khi đã có nhiều website, dùng Wrangler giúp deploy nhanh và có thể script hóa.

7.1 Kiểm tra Node.js

node -v
npm -v

Nếu chưa có Node.js, cài bản LTS từ nodejs.org.

7.2 Đăng nhập Cloudflare

npx wrangler login

Trình duyệt sẽ mở để bạn cấp quyền cho Wrangler.

7.3 Deploy một website

npx wrangler pages deploy ./site-a --project-name=site-a

Nếu là React/Vite đã build:

npx wrangler pages deploy ./dist --project-name=customer-a

7.4 Xem các deployment

npx wrangler pages deployment list --project-name=customer-a

8. Tự động deploy nhiều website

Trong gói tải về cùng tài liệu này có sẵn sites.json, deploy-one.sh và deploy-all.sh.

sites.json

[
  {
    "name": "site-a",
    "dir": "./examples/site-a",
    "domain": "site-a.example.com"
  },
  {
    "name": "site-b",
    "dir": "./examples/site-b",
    "domain": "site-b.example.com"
  }
]

Deploy một site

chmod +x deploy-one.sh deploy-all.sh
./deploy-one.sh site-a ./examples/site-a

Deploy tất cả

./deploy-all.sh

Script mẫu dùng npx wrangler pages deploy. Domain chỉ mang tính metadata trong file config; custom domain nên cấu hình một lần trong Dashboard cho mỗi project.

9. Update website sau khi đã deploy

Sau lần deploy đầu tiên, các lần cập nhật sau không cần tạo lại Pages project, DNS hay custom domain. Bạn chỉ sửa source code, build lại nếu cần, rồi deploy version mới vào đúng project cũ.

9.1 Website HTML/JS thuần

Ví dụ cấu trúc:

site-a/
├── index.html
├── css/
│   └── style.css
└── js/
    └── app.js

Sau khi sửa code, chạy lại:

npx wrangler pages deploy ./site-a \
  --project-name=site-a

9.2 React/Vite đã build

Khi source là React/Vite, bạn build lại trước:

npm run build

Sau đó deploy thư mục output:

npx wrangler pages deploy ./dist \
  --project-name=site-a

Domain cũ vẫn giữ nguyên:

site-a.pages.dev
domain-a.com

Bạn không phải cấu hình lại:

DNS
Custom domain
SSL
Nameserver

9.3 Update bằng script có sẵn

Nếu dùng bộ script trong handbook này:

./deploy-one.sh site-a ./examples/site-a

Mỗi lần update chỉ cần chạy lại cùng lệnh.

9.4 Chỉ deploy site đã thay đổi

Nếu bạn có nhiều site:

projects/
├── customer-a/
├── customer-b/
└── customer-c/

Nếu chỉ sửa customer-b, chỉ deploy:

./deploy-one.sh customer-b ./customer-b

10. Thêm tính năng, quản lý version và rollback

Khi website đã chạy ổn định, workflow tốt nhất là xem mỗi lần thêm tính năng như một version mới của cùng Pages project.

10.1 Quy trình thêm tính năng

10.2 Mô hình version

site-a
│
├── Deployment v1
│   └── Homepage ban đầu
│
├── Deployment v2
│   └── Thêm Contact section
│
├── Deployment v3
│   └── Update JavaScript
│
└── Deployment v4
    └── Bản hiện tại

Mỗi lần deploy, Cloudflare tạo một deployment mới thay vì bạn phải ghi đè thủ công lên server.

10.3 Rollback khi version mới lỗi

Trong Dashboard:

Cloudflare Dashboard
→ Workers & Pages
→ Chọn project
→ Deployments
→ Chọn deployment ổn định trước đó
→ Rollback / Promote

10.4 Nên dùng Git khi bắt đầu update thường xuyên

Khi website chỉ upload một lần, Drag & Drop là đủ. Nhưng nếu bạn sửa site thường xuyên, nên quản lý source bằng Git.

git add .
git commit -m "Add contact section"
git push

Workflow phát triển sẽ rõ ràng hơn:

10.5 Workflow mình khuyên dùng

10.6 Ví dụ thực tế: thêm tính năng cho customer-b

Giả sử bạn sửa website:

projects/customer-b/
├── index.html
├── css/
│   └── style.css
└── js/
    └── app.js

Sau khi sửa xong:

./deploy-one.sh customer-b ./projects/customer-b

Luồng thực tế:

customer-b.com
      │
      ├── Version cũ
      │
      └── Deploy version mới
              ↓
       customer-b.com
       tự dùng bản mới

11. Các lỗi thường gặp

Checklist triển khai một website mới

Tài liệu Cloudflare chính thức

• Direct Upload
• Custom domains
• Pages limits
• Direct Upload + CI / Wrangler
• Static HTML on Pages
• Serving Pages / routing / 404