TinaCloud + Cloudflare Pages

Cần chuẩn bị

Một tài khoản GitHub, một tài khoản TinaCloud (https://app.tina.io) và một tài khoản Cloudflare. Netlify hay Vercel làm tương tự với cùng lệnh build, thư mục kết quả và biến môi trường.

Bước 1: Đẩy code lên GitHub

Đẩy code lên một repo GitHub (để private được). Nhớ commit cả tina/tina-lock.json.

Bước 2: Tạo project TinaCloud

Vào https://app.tina.io, tạo project, cho phép TinaCloud truy cập GitHub rồi chọn repo.

• Site URL(s): http://localhost:4321 và tên miền thật, chỉ phần gốc (ví dụ https://ten-mien.vn, không có đường dẫn). Muốn sửa cả trên địa chỉ *.pages.dev thì thêm cả địa chỉ đó.
• Path To Tina (trong Advanced Settings): để trống, vì thư mục tina/ nằm ở gốc repo.

Bước 3: Client ID và token

Lấy Client ID ở tab Overview của project. Vào tab Tokens, bấm New Token, chọn loại content (chỉ đọc), ô Git Branches điền main.

Bước 4: Cloudflare Pages

Trên Cloudflare: Workers & Pages → Create → Pages → Connect to Git, chọn repo, rồi đặt:

Site có form thì thêm PUBLIC_FORM_ENDPOINT (xem 3.4 Biến môi trường).

Bước 5: Tên miền

Gắn tên miền ở Custom domains của project Pages.

Bước 6: Mở admin

Mở https://<tên miền>/admin/ và đăng nhập bằng tài khoản TinaCloud.

Bước 7: Mời người sửa nội dung

Mời người sửa nội dung ở tab Collaborations của project TinaCloud, với vai trò Editor hoặc Admin.

Sau khi lên mạng

Mỗi lần bấm Lưu trong admin: TinaCloud commit thay đổi vào GitHub, Cloudflare Pages build lại, vài phút sau site đổi.

• Nội dung nằm ở nhánh khác main thì đặt thêm biến GITHUB_BRANCH.
• Trang mới tạo trong admin chỉ xem trước được sau lần build đó.
• Đổi schema (thêm ô, thêm section trong tina/) thì chạy pnpm dev một lần để cập nhật tina/tina-lock.json, rồi commit file này cùng code.