Deploy website Astro lên Cloudflare free: làm từng bước

Làm xong website bằng Astro rồi, giờ đưa lên mạng sao? Mình hay xài Cloudflare vì gói free khá rộng với site tĩnh. Bài này đi từng bước, newbie đọc cũng làm được.

Vì sao chọn Cloudflare cho site tĩnh?

Site Astro build ra toàn file tĩnh (HTML, CSS, JS, ảnh). Loại này host free ngon lành. Theo docs Cloudflare (tính tới tháng 10/2026):

Request tới static assets là free và không giới hạn.
Gói Free cho upload tối đa 20.000 file mỗi version của Worker hoặc mỗi site Cloudflare Pages.
Mỗi file tối đa 25 MiB.
Một project Cloudflare Pages gắn được tối đa 100 custom domain ở gói Free.

Blog hay trang giới thiệu của thầy cô thì mấy con số này dư xài luôn. Giới hạn có thể đổi, bạn check lại trang limits trong phần Nguồn nha.

Bước 1: Build site ở máy

Trong thư mục project, chạy:

npm run build

Astro sẽ tạo thư mục dist/. Đây chính là thứ bạn đem deploy. Chạy xong nhớ mở thử bản build bằng npm run preview để check trang có lên đúng không.

Bước 2: Check trước khi đẩy lên

Không có file nào quá 25 MiB. Ảnh hoặc video nặng thì nén lại trước.
Tổng số file trong dist/ còn xa mức 20.000 (blog nhỏ thì gần như không bao giờ chạm tới).
Tiếng Việt hiển thị đúng dấu, link nội bộ không bị 404.

Bước 3: Đưa `dist/` lên Cloudflare

Có hai đường: Cloudflare Pages hoặc Workers static assets. Cả hai đều phục vụ file tĩnh với giới hạn ở trên. Mình không liệt kê từng cú click ở đây vì giao diện dashboard đổi khá thường. Bạn làm theo hướng dẫn trong docs Cloudflare, chỗ nào cần trỏ thư mục output thì điền dist.

Nếu xài Workers static assets, bạn sẽ cần một file cấu hình của Wrangler (tool command line của Cloudflare) để chỉ tới dist/. Phần này bạn đọc đúng docs của Cloudflare, đừng copy config từ bài random trên mạng vì dễ lệch phiên bản.

Bước 4: Gắn domain riêng

Lúc đầu site sẽ có địa chỉ mặc định của Cloudflare. Muốn nhìn chuyên nghiệp hơn thì gắn custom domain. Pages gói Free cho tới 100 domain nên thoải mái. Chọn domain thế nào thì xem bài riêng về domain nha.

Bước 5: Test lại sau khi deploy

Mở site bằng điện thoại thật, không chỉ máy tính.
Thử vài trang con, bấm hết menu.
Reload vài lần xem có bug lạ không.

Lưu ý

Mức 100.000 request mỗi ngày là của Workers Free khi chạy code (function). Còn lấy file tĩnh thì không tính vào đó. Site của bạn có dùng function hay không thì nên xem lại trang giá Workers trước khi yên tâm.

Và đừng bao giờ commit API key hay secret lên repo, kể cả repo private.

Tóm lại

Build bằng npm run build, lấy thư mục dist/ đem lên Cloudflare, check giới hạn 20.000 file và 25 MiB mỗi file, gắn domain, test trên điện thoại. Vậy là xong, free luôn.