Connect GitHub Repo to Cloudflare Pages

You have to connect to github before creating the page. You cannot connect on existing page.

Why connect to GitHub?

When using cloudflare pages, you can publish your build manually using the wrangler cli. This works when you rarely update the site. However, if you just want to write stuff, push to github and let it deploy automatically like github pages and netlify, you need to connect to github.

The main annoyance is that you cannot connect to github after creating the page. However, when you run the cli to create the initial code e.g. npm create cloudflare@latest my-next-app -- --framework=next it will create the page automatically. So you have to first create a github repo, and connect to it in the pages dashboard to create the pages, then add the actual code.

Steps

• Create a github repo, just create a empty one on github.com like myapp
• When creating the page repo set --deploy false. For example, run the following in ~/dev

npm create cloudflare@latest myapp -- --framework=next --deploy false

• In ~/dev/myapp run the following to preview the website

npm run dev

• Push to github, the c3 cli already did git commit, the branch is already main so you don't need to rename it using git branch -M main

git remote add origin [email protected]:yourname/myapp.git
git push -u origin main

• Create Application from Workers & Pages sidebar
  • Select Pages tab, default is Workers
  • Connect to Git
  • Select the repo
  • Select the framework you used when creating the app, e.g. next

Then cloudflare will do the first deploy and subsequent deploys when you push to github's main branch.