Connect GitHub to Cloudflare Pages

Let’s do this

1. 1
   In your browser

   Open a free Cloudflare account

   Sign in or create an account, then open Workers & Pages. Choose Create application, Pages, then Connect to Git. Dashboard labels can change; follow the linked Pages Git guide. Use this Git-connected route for the course. Direct Upload is a different setup.

   Cloudflare Pages: connect GitHub (opens a new tab)
2. 2
   In Cloudflare and GitHub

   Give access to just this GitHub project

   Choose GitHub, sign in and approve the Cloudflare integration for the selected little-garden repository. Choose “Only select repositories” if offered. Back in Cloudflare, choose that repository. You do not need to make its source public.

3. 3
   In Cloudflare

   Set the build details for this course

   Choose main as the production branch. For the basic React + Vite project, use npm run build and output directory dist. Keep the root at the repository root if package.json is there. Match NODE_VERSION to the supported Node major you used locally. Ask your AI to confirm these settings from your actual files.

   Production branch: main
   Build command: npm run build
   Build output directory: dist
   Root directory: repository root
   NODE_VERSION: match your local supported major version

   Cloudflare Pages: build configuration (opens a new tab)
4. 4
   In Cloudflare

   Publish and read the result

   Select Save and Deploy. Wait for a successful build and open the address Cloudflare provides, ending in pages.dev. This site is public. A failed build has a log; copy the relevant error to the AI, fix locally, commit and push again.

5. 5
   On your phone and browser

   Test outside your Mac

   Open the live URL in a private browser window and on your phone using mobile data. Check links, images, the main action and directly opening an inner page. Close your laptop and confirm the public site still loads. Keep the link for the next lesson.