Cấp độ: intermediate30 phútminMiễn phíFreeProduct DeveloperProduct Developer

Deploy lên Cloudflare PagesDeploy to Cloudflare Pages

Website đã live trên Cloudflare PagesA website live on Cloudflare Pages

Bạn sẽ học gìWhat you will learn

  • ✓Cấu hình wrangler.tomlConfigure wrangler.toml
  • ✓Deploy với wrangler pages deployDeploy with wrangler pages deploy
  • ✓Gắn custom domainAttach custom domain

Bạn sẽ tạo gìWhat you will build

Website đã live trên Cloudflare PagesA website live on Cloudflare Pages

Nội dung bài họcLesson content

Cloudflare Pages là gì?What is Cloudflare Pages?

Cloudflare Pages là dịch vụ hosting website tĩnh miễn phí, nhanh, có CDN toàn cầu. Tự động build từ Git repo hoặc deploy thủ công bằng wrangler. Hỗ trợ custom domain, HTTPS miễn phí. Lý tưởng cho Astro, Next.js static, Hugo, v.v.Cloudflare Pages is a free, fast static website hosting service with a global CDN. It auto-builds from a Git repo or deploys manually with wrangler. Supports custom domains and free HTTPS. Ideal for Astro, Next.js static, Hugo, etc.

Cấu hình wrangler.tomlConfigure wrangler.toml

wrangler.toml là file cấu hình cho Cloudflare. Các trường quan trọng: name (tên project), compatibility_date (ngày tương thích), pages_build_output_dir (thư mục build output, thường là "dist"). Đặt wrangler.toml ở root project.wrangler.toml is the configuration file for Cloudflare. Important fields: name (project name), compatibility_date (compatibility date), pages_build_output_dir (build output directory, usually "dist"). Place wrangler.toml at the project root.

bash
                      
                        # wrangler.toml
name = "my-project"
compatibility_date = "2026-06-23"
pages_build_output_dir = "dist"

# Optional: biến môi trường
[vars]
API_URL = "https://api.example.com"

Build và deployBuild and deploy

Bước 1: npm run build — build project ra thư mục dist. Bước 2: npx wrangler pages deploy dist --project-name my-project — upload lên Cloudflare. Lần đầu sẽ hỏi tạo project mới. Sau đó mỗi lần deploy chỉ cần 2 lệnh.Step 1: npm run build — build the project to the dist directory. Step 2: npx wrangler pages deploy dist --project-name my-project — upload to Cloudflare. First time will ask to create a new project. After that, each deploy is just 2 commands.

bash
                      
                        # Build project
npm run build

# Deploy lên Cloudflare Pages
npx wrangler pages deploy dist --project-name my-project

# Output:
# ✨ Deployment complete! Take a peek over at https://abc123.my-project.pages.dev
# ⛅️ Published project my-project on https://my-project.pages.dev

Gắn custom domainAttach a custom domain

Vào Cloudflare Dashboard → Pages → project → Custom domains → Add. Nhập domain (vd: example.com). Cloudflare tự cấu hình DNS nếu domain đã trên Cloudflare. HTTPS tự động kích hoạt. Domain sẽ trỏ đến website trong vài phút.Go to Cloudflare Dashboard → Pages → project → Custom domains → Add. Enter domain (e.g., example.com). Cloudflare auto-configures DNS if the domain is already on Cloudflare. HTTPS is auto-enabled. The domain will point to the website within minutes.

Bài tập thực hànhHands-on exercises

1Tạo file wrangler.toml cho project tên "hamicode-app" với output dir "dist".Create wrangler.toml for project "hamicode-app" with output dir "dist".

Gợi ýHint

name, compatibility_date, pages_build_output_dir.name, compatibility_date, pages_build_output_dir.

Lời giảiSolution
bash
                      
                        # wrangler.toml
name = "hamicode-app"
compatibility_date = "2026-07-02"
pages_build_output_dir = "dist"

2Build và deploy project lên Cloudflare Pages với project name "hamicode-app".Build and deploy the project to Cloudflare Pages with project name "hamicode-app".

Gợi ýHint

npm run build → npx wrangler pages deploy dist --project-name hamicode-appnpm run build → npx wrangler pages deploy dist --project-name hamicode-app

Lời giảiSolution
bash
                      
                        npm run build
npx wrangler pages deploy dist --project-name hamicode-app

Kiểm traQuiz

Chọn đáp án đúng cho mỗi câu. Nhấn để xem giải thích.Choose the correct answer for each question. Click to see explanation.

Câu 1: Cloudflare Pages là dịch vụ gì?Q1: What is Cloudflare Pages?

Câu 2: pages_build_output_dir trong wrangler.toml chỉ gì?Q2: What does pages_build_output_dir in wrangler.toml specify?

Câu 3: Lệnh nào deploy lên Cloudflare Pages?Q3: Which command deploys to Cloudflare Pages?

Code mẫuSample code

bash
                # wrangler.toml
name = "my-project"
compatibility_date = "2026-06-23"
pages_build_output_dir = "dist"

# Build & Deploy
npm run build
npx wrangler pages deploy dist --project-name my-project
Trước: Bài 22Previous: Lesson 22Tiếp: Bài 24Next: Lesson 24
Xem thêm bài họcView more lessonsĐăng ký học đầy đủSign up for full access