Tôi Đã Chuyển Nhà Adtek Labs Blog Lên Cloudflare Như Thế Nào?

1. Mô hình này hoạt động như thế nào?

WordPress thông thường hoạt động theo mô hình động:

Browser → Nginx / Apache → PHP → WordPress → MySQL → HTML trả về cho người dùng

Mỗi request đều có thể phải đi qua PHP và database. Nhưng với một blog thông thường, phần lớn nội dung sau khi đăng gần như không thay đổi.

Vì vậy ta có thể render website trước thành HTML tĩnh. Sau đó Cloudflare Pages chỉ việc phục vụ những file này. Không còn PHP hay MySQL trên website public.

2. Ưu điểm

Điểm mình thích nhất của mô hình này là website public gần như trở thành một website static thuần. Điều đó mang lại một số lợi ích:

• Không cần chạy PHP cho người truy cập.
• Không cần MySQL trên website public.
• Tốc độ phản hồi rất nhanh.
• Nội dung được phân phối qua hệ thống CDN/Edge của Cloudflare.
• Giảm đáng kể bề mặt tấn công WordPress.
• Không phải expose /wp-admin trên website public.
• GitHub lưu toàn bộ source static và lịch sử thay đổi.
• Mỗi lần push lên GitHub, Cloudflare có thể tự deploy lại.
• Chi phí hosting phần public có thể gần như bằng 0 với blog nhỏ.

3. Điểm cần hiểu trước khi làm

Cloudflare Pages không chạy WordPress trực tiếp. Bạn không thể copy wp-admin, wp-content, PHP, MySQL lên Cloudflare Pages rồi mong WordPress chạy.

Cloudflare Pages chỉ phục vụ website đã được build thành static. Vì vậy WordPress trong mô hình này đóng vai trò là:

Nơi quản trị và tạo nội dung.

Còn Cloudflare Pages là:

Website thực tế mà người dùng truy cập.

4. Chuẩn bị WordPress

Website WordPress nên hoàn thiện trước các thành phần như: Theme, Menu, Category, Bài viết, SEO metadata, Sitemap, Hình ảnh, Internal link.

Nếu có nhiều hình ảnh, nên tối ưu ảnh trước khi export để giảm dung lượng website.

5. Cài Simply Static

Trong WordPress, vào Plugins → Add New Plugin, tìm Simply Static, cài đặt và kích hoạt.

Simply Static có nhiệm vụ crawl website WordPress và tạo ra phiên bản HTML tĩnh.

6. Cấu hình URL

Vào Simply Static → General. Tại phần Replacing URLs, nếu website sau cùng chạy trực tiếp trên domain chính, chọn Absolute URLs và nhập domain website. Ví dụ: https://adtek.io.vn

Có thể bật Force URL replacements để Simply Static thay các URL WordPress trong CSS, HTML và JavaScript bằng URL website static.

7. Bật Enhanced Crawl

Trong Simply Static, bật Enable Enhanced Crawl. Mục đích là giúp plugin tìm được đầy đủ hơn: Homepage, Post, Page, Category, Pagination, Sitemap, Theme assets, Plugin assets, Uploads, wp-includes.

8. Export website

Sau khi cấu hình xong, chọn Full Site rồi bấm Push. Simply Static sẽ bắt đầu crawl toàn bộ WordPress.

Sau khi hoàn thành, ta sẽ nhận được một file ZIP. Giải nén ra sẽ thấy cấu trúc tương tự:

adtek.io.vn.bloger/
├── index.html
├── wp-content/
├── wp-includes/
├── category/
├── tag/
├── bai-viet-1/
├── sitemap.xml
├── sitemap_index.xml
└── robots.txt

Quan trọng nhất: index.html phải nằm ở root của source.

9. Kiểm tra source trước khi đưa lên GitHub

Có thể mở source bằng VS Code. Nếu thấy cấu trúc với index.html ở root, wp-content, category, tag... thì website đã sẵn sàng để đưa lên GitHub.

10. Tạo GitHub repository

Trên GitHub tạo repository mới. Repository có thể để Private — không nhất thiết phải public. Khi tạo repo, nếu đang có source local rồi thì có thể để repo trống, không cần tạo README.

11. Push source lên GitHub

Mở terminal tại thư mục chứa index.html. Chạy:

git init
git add .
git commit -m "Initial static WordPress export"
git branch -M main
git remote add origin https://github.com/USERNAME/adtek-io-vn-bloger.git
git push -u origin main

Khi hoàn thành, GitHub sẽ chứa toàn bộ phiên bản static của website.

12. Kết nối GitHub với Cloudflare Pages

Vào Cloudflare Dashboard: Workers & Pages → Create → Pages → Connect to Git. Chọn GitHub, cấp quyền Cloudflare truy cập repository cần deploy, sau đó chọn repository.

13. Cấu hình Cloudflare Pages

Vì source Simply Static đã là website hoàn chỉnh nên không cần framework và không cần build. Cấu hình như sau:

Project name: adtek-io-vn-bloger
Production branch: main
Framework preset: None
Build command: exit 0
Build output directory: .
Root directory: để trống

exit 0 nghĩa là không có gì cần build, báo cho Cloudflare rằng bước build đã hoàn tất thành công. Còn . ở Build output directory nghĩa là website nằm ngay tại root repository.

14. Deploy

Bấm Save and Deploy. Cloudflare sẽ clone repository từ GitHub và publish website. Sau khi hoàn thành sẽ có một domain https://adtek-io-vn-bloger.pages.dev. Đây là môi trường rất tiện để kiểm tra website trước khi chuyển domain chính.

15. Kiểm tra website

Trước khi đổi domain, nên kiểm tra kỹ: trang chủ, bài viết, category, tag, menu, ảnh, CSS, JavaScript, mobile, mục lục, internal link, 404, robots.txt, sitemap.xml.

Đặc biệt nên mở Developer Tools của trình duyệt và kiểm tra xem có request nào trả về 404, 403, 500 hay không.

16. Gắn domain thật

Sau khi website .pages.dev hoạt động ổn định, vào Cloudflare Pages → Project → Custom domains → Set up a custom domain. Nhập adtek.io.vn. Nếu DNS của domain đã được quản lý trên Cloudflare thì việc cấu hình khá đơn giản.

17. Sau này đăng bài như thế nào?

Bạn không đăng bài trực tiếp trên Cloudflare Pages. Quy trình vẫn là:

WordPress Admin → Viết bài → Publish → Simply Static export → GitHub → Cloudflare Pages

Ví dụ sau khi đăng thêm bài mới, chạy lại Simply Static, giải nén source mới và ghi đè vào thư mục Git local. Sau đó:

git add .
git commit -m "Add new article"
git push

Ngay sau khi push, Cloudflare Pages sẽ tự động detect commit và deploy lại website. Không cần upload thủ công vào Cloudflare nữa.

Kết luận

Thay vì WordPress + PHP + MySQL phục vụ trực tiếp người dùng, ta có thể chuyển thành mô hình WordPress → Simply Static → GitHub → Cloudflare Pages.

WordPress vẫn giữ được trải nghiệm quản lý nội dung quen thuộc, GitHub giữ source và lịch sử phiên bản, còn Cloudflare chịu trách nhiệm phục vụ website public.

Đối với blog, portfolio và website nội dung, đây là một mô hình khá đáng thử vì vừa đơn giản, tốc độ tốt, giảm phụ thuộc vào server và giảm đáng kể bề mặt tấn công của WordPress.

Điểm bất tiện lớn nhất ở phiên bản miễn phí là bước export Simply Static → cập nhật GitHub vẫn phải thực hiện thủ công. Nhưng sau khi source đã lên GitHub thì phần GitHub → Cloudflare Pages hoàn toàn tự động.