Skip to main content

Thực hành "Cloudflare Pages" kết nối với "repository private" bên "GitHub"

Nếu ta KHÔNG mua tên miền riêng, Cloudflare Pages sẽ cấp cho ta một subdomain miễn phí dạng:

https://<project-name>.pages.dev

ta đã push mã nguồn dự án Docusaurus lên GitHub Private Repository.

ta đã có tài khoản Cloudflare.

📌 Thực hiện:

Truy cập Cloudflare Pages và đăng nhập.

Nhấn "Create a project".

Chọn "Connect to GitHub" → Ủy quyền Cloudflare truy cập GitHub.

Chọn repository chứa dự án Docusaurus.

Nhấn "Begin setup" để tiếp tục.

🔹 2️⃣ Cấu hình build trên Cloudflare Pages Sau khi kết nối GitHub, Cloudflare sẽ yêu cầu ta cấu hình build:

📌 Cấu hình quan trọng:

Project Name → Tên dự án (tùy chọn, Cloudflare sẽ tự tạo nếu ta không đặt).

Production branch → Chọn nhánh chứa mã nguồn (main hoặc master).

Framework Preset → Chọn Docusaurus.

Build command → Nhập:

npm install && npm run build

Build output directory → Nhập:

build

Sau đó, nhấn "Save and Deploy". 💡 Cloudflare Pages sẽ tự động build và deploy trang web của ta.

🔹 3️⃣ Truy cập trang web đã deploy Sau khi Cloudflare Pages hoàn thành việc build, nó sẽ cung cấp cho ta một link miễn phí theo dạng: 👉

https://<project-name>.pages.dev

📌 Ví dụ: Nếu ta đặt tên dự án là my-docusaurus, ta sẽ truy cập bằng link: 👉 https://my-docusaurus.pages.dev

🔹 Web Docusaurus của ta sẽ hoạt động ngay lập tức!

4️⃣ (Tùy chọn) Cập nhật trang web mỗi khi push code Sau khi hoàn tất setup, Cloudflare Pages sẽ tự động build lại trang web mỗi khi ta push code mới lên GitHub. ta chỉ cần chỉnh sửa dự án, commit, push lên GitHub → Cloudflare sẽ tự động cập nhật trang web.

cần chỉnh sửa lại docusaurus.config.js để phù hợp với Cloudflare Pages.

module.exports = {
  title: 'Tên trang web',
  url: 'https://my-docusaurus.pages.dev', // Cập nhật URL Cloudflare Pages
  baseUrl: '/', // Để '/' nếu deploy ở root
  organizationName: '55tm', // Không cần thiết nếu không dùng GitHub Pages
  projectName: 'my-docusaurus', // Không quan trọng, có thể bỏ
  deploymentBranch: 'main', // Cloudflare lấy code từ nhánh chính (main)
  trailingSlash: false,
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  onBrokenAnchors: 'ignore',
};

Lưu ý:

url: 'https://my-docusaurus.pages.dev' phải đúng với link Cloudflare Pages cấp cho ta.

organizationName và projectName không quan trọng khi dùng Cloudflare Pages.

Không cần thiết phải có deploymentBranch: 'gh-pages', vì Cloudflare deploy từ nhánh main hoặc master.

✅ Sau khi chỉnh sửa xong, ta commit & push lại để cập nhật đúng URL!

Quan trọng:

Nếu thay đổi baseUrl, url, organizationName, projectName thì cần chạy lại npm run build để áp dụng đúng đường dẫn trên Cloudflare.

Không cần khai báo organizationName & deploymentBranch khi dùng Cloudflare Pages, vì nó lấy code trực tiếp từ nhánh chính (main).

5:11:25 AM