TinaCloud + Cloudflare Pages

What you need

A GitHub account, a TinaCloud account (https://app.tina.io) and a Cloudflare account. Netlify or Vercel work the same way, with the same build command, output folder and environment variables.

Step 1: Push the code to GitHub

Push the code to a GitHub repo (it can be private). Commit tina/tina-lock.json too.

Step 2: Create a TinaCloud project

Go to https://app.tina.io, create a project, give TinaCloud access to GitHub and pick the repo.

• Site URL(s): http://localhost:4321 and the real domain, the root only (e.g. https://your-domain.com, no path). To edit on the *.pages.dev address as well, add that too.
• Path To Tina (under Advanced Settings): leave empty, since tina/ sits at the repo’s root.

Step 3: Client ID and token

Copy the Client ID from the project’s Overview tab. In the Tokens tab press New Token, pick the content (read-only) type and enter main under Git Branches.

Step 4: Cloudflare Pages

On Cloudflare: Workers & Pages → Create → Pages → Connect to Git, pick the repo, then set:

A site with a form adds PUBLIC_FORM_ENDPOINT (see 3.4 Environment variables).

Step 5: Your domain

Add the domain under the Pages project’s Custom domains.

Step 6: Open the admin

Open https://<your domain>/admin/ and sign in with the TinaCloud account.

Step 7: Invite editors

Invite the people who edit content in the TinaCloud project’s Collaborations tab, as Editor or Admin.

Once it is live

Every time someone presses Lưu (Save) in the admin, TinaCloud commits the change to GitHub, Cloudflare Pages rebuilds, and the site changes a few minutes later.

• If content lives on a branch other than main, set GITHUB_BRANCH too.
• A page created in the admin can be previewed only after that build.
• After a schema change (a new field or section in tina/), run pnpm dev once to update tina/tina-lock.json, and commit it with the code.