[Wordpress → Astro] Phần 4 - Đưa blog lên Cloudflare Workers (CI/CD)

Sau khi hoàn thành [Phần 3], blog mới dựa trên Astro của mình đã chạy ngon lành trên máy local. Bước tiếp theo là đưa nó lên internet, thay thế cho hệ thống cũ đang chạy WordPress.

Bài viết [Phần 4] này sẽ hướng dẫn cách deploy lên Cloudflare Workers - nền tảng hosting của Cloudflare, hoàn toàn miễn phí cho blog tĩnh.

Tại sao dùng Workers thay vì Pages? Cloudflare đã “về hưu” Cloudflare Pages vào tháng 4/2025 và khuyến khích mọi dự án mới chuyển qua dùng Workers. Tính năng Pages vẫn còn hoạt động nhưng không hỗ trợ các tính năng mới. Cloudflare Workers là nền tảng chính thức cho tương lai.

Có hai cách để deploy lên Cloudflare Workers

Theo hướng dẫn từ Astro, có hai cách để đưa dự án lên Cloudflare Workers:

Cách 1 — Git Integration (Workers Builds): Kết nối repo GitHub với Cloudflare. Mỗi lần git push, Cloudflare sẽ tự động build và deploy.
Cách 2 — Wrangler CLI: Dùng tool wrangler để build và deploy trực tiếp từ terminal, không cần truy cập vào Cloudflare dashboard.

Bài viết hôm nay, mình sẽ hướng dẫn Cách 1 — Sử dụng Git Integration. Cách này đơn giản tiện lợi, không cần phải nhớ việc gõ lệnh để build và deploy. Chỉ cần push commit lên Github, Cloudflare sẽ lo xử lý toàn bộ phần còn lại.

1. Đưa blog lên GitHub

Truy cập vào thư mục của dự án, vào tạo repo mới sử dụng GithubCLI

1
cd ~/blog-bldl
2
git add .
3
git commit -m "Initial Astro blog migration from WordPress"
4

5
# Tạo repo mới trên GitHub và push cùng một lệnh
6
gh repo create YOUR_GITHUB_USERNAME/blog-bldl --public --source=. --remote=origin --push
7

8
# Mở trên browser để xác nhận
9
gh repo view --web

Lệnh gh repo create yêu cầu đã cài GitHub CLI. Nếu chưa có, cài bằng brew install gh (macOS) rồi gh auth login để đăng nhập. Nếu bạn sử dụng Linux, tham khảo hướng dẫn cài đặt Github CLI.

2. Cài đặt Wrangler CLI

Cài đặt Wrangler CLI trong thư mục của dự án

1
npm install wrangler@latest --save-dev

Tạo file wrangler.jsonc với nội dung sau

1
{
2
  "name": "blog-balodeplao",
3
  "compatibility_date": 2026-03-15, // Cập nhật ngày hiện tại
4
  "assets": {
5
    "directory": "./dist",
6
    "not_found_handling": "404-page",
7
  },
8
}

Commit và cập nhật thay đổi lên Github repo đã tạo ở bước 1.

3. Kết nối GitHub với Cloudflare Workers

Truy cập dash.cloudflare.com, bấm vào mục Workers & Pages

Chọn Create application để tạo dự án mới

Chọn tiếp Continue with Github

Đăng nhập vào GitHub, xác thực kết nối và chọn repo đang của dự án. Bấm Next

Giữ nguyên các thông số mặc định, bấm Deploy

Chờ vài phút để Cloudflare xử lý. Sau khi hoàn thành, bạn sẽ thấy hiện ra trang Dashboard như bên dưới. Bấm vào link có dạng project-name.usernamer.worker.dev để xác nhận blog đã chạy ngon lành trên hệ thống CDN của Cloudflare.

4. Kết nối custom domain

Để có thể truy cập vào blog bằng tên miền riêng, chúng ta cần thiết lập custom domain cho dự án vừa tạo.

Truy cập vào phần Setting của dự án trên Cloudflare Workers, phần Domain & Routes, bấm nút Add

Chọn Custom Domain

Nhập vào tên miền cần sử dụng. Tạm thời mình sử dụng tên miền astro.balodeplao.com để thử nghiệm trước. Bấm Add domain để xác nhận.

Nếu tên miền chính đang được quản lý trên Cloudflare DNS, bản ghi mới sẽ được tạo tự động. Chứng chỉ SSL cũng được cấp tự động - không cần phải cấu hình gì thêm.

Truy cập vào tên miền https://astro.balodeplao.com để xác nhận blog đã hoạt động ngon lành.

5. So sánh nhanh Astro và WordPress

Mình sử dụng pagespeed.web.dev để kiểm tra thử hiệu năng của Astro so với WordPress và kết quả đúng như mong đợi.

Trang bài viết lần được 100 điểm cho Mobile và 99 điểm cho Desktop, trong khi mình chưa cần phải tối ưu gì thêm.

Theo báo cáo từ Pagespeed, mình có thể tối ưu thêm hiệu năng bằng cách thiết lập cache cho hình ảnh, và chuyển đổi jpg/png qua webp. Nhiều khả năng sẽ được điểm tuyệt đối 100 (Mobile) và 100 (Desktop) sau khi làm xong.

Còn dưới đây là điểm đánh giá của trang blog hiện tại đang dùng WordPress: 52 (Mobile) và 72 (Desktop), đã được tối ưu với Cache Enabler.

6. Các bước tiếp theo

Trước khi chính thức chuyển đổi tên miền của dự án từ astro.balodeplao.com qua balodeplao.com để chính thức thay thế WordPress bằng Astro, mình cần phải kiểm tra lại các bước sau, nhằm bảo đảm cấu trúc chính của blog được giữ nguyên:

Bài viết load đúng nội dung → OK
Cấu trúc URL của bài viết khớp WordPress cũ → OK
Tất cả hình ảnh được tải từ image.balodeplao.com (R2 bucket) → OK
Tags và categories hoạt động tốt → Chưa OK (xem giải thích ở dưới)
Trang 404 hiển thị đúng khi vào URL không tồn tại → Cần phải chỉnh thành tiếng Việt
Tiếng Việt hiển thị đúng, không bị lỗi encoding → OK

Hiện tại vẫn còn một số vấn đề mình cần phải khắc phục trên Astro trước khi chính thức cho nó thay thế WordPress:

Chưa hỗ trợ custom taxonomy: hiện tại chỉ mới có trang hiển thị danh mục (category) và từ khóa (tag). Còn thông tin địa điểm (destination), ví dụ https://balodeplao.com/destination/nhat-ban/ chưa thiết lập trên Astro
Trang hiển thị category / tags đang dùng slug làm tiêu đề, ví dụ gia-dinh, du-lịch,… Và còn thiếu thông tin chú thích (description) cho category / tags. Cần phải bổ sung tính năng này cho Astro.
Chưa có tính năng phân cấp cho taxonomy như bên WordPress. ví dụ category Du Lịch sẽ gồm nhiều mục nhỏ: Dã Ngoại / Cắm Trại / Đi Phượt. Các trang category phụ này sẽ có đường dẫn /category/du-lich/da-ngoai hoặc /category/du-lich/cam-trai.
Tối ưu phần hiển thị hình ảnh cho blog: thiết lập cache header, chuyển đổi thành webp

Ngoài ra, mình cũng cần sao lưu trang WordPress hiện tại qua tên miền legacy.baldeplao.com để có thể tham khảo lại khi cần.

Sau hoàn thành tất cả các bước này, mình sẽ cập nhật lại custom domain thành tên miền chính, và sau đó có thể dọn dẹp server đang dùng cho blog WordPress cũ.

Với việc sử dụng Astro + Github + Cloudflare Worker, mình không còn cần đến server, không phải lo xử lý database bị sập nữa. Tất cả đều miễn phí trong khi hiệu năng hoàn toàn vượt trội. Quá sướng!

7. Cách viết bài mới

Từ giờ, mỗi khi cần viết bài mới cho blog, mình sẽ mở VS Code, tạo file markdown mới trong thư mục src/content/blog và viết bài bằng Markdown. Khi muốn publish bài mới hoặc cập nhật nội dung, chỉ cần commit và push lên Github.

1
git add .
2
git commit -m "Thêm bài viết mới"
3
git push

Cloudflare Workers sẽ tự động phát hiện có commit mới trên Github, build lại phiên bản mới và deploy trong vài phút.

Loạt bài viết hướng dẫn chuyển blog từ WordPress qua Astro đến đây là hết.

Trong các bài viết kế tiếp, mình sẽ chia sẻ thêm nhiều thông tin về cách sử dụng và tối ưu Astro. Hẹn một ngày không xa mình cũng sẽ chuyển đổi blog Thuanbui.me này qua Astro.

Welcome to Astro!