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 alreadymain
so you don't need to rename it usinggit 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
- Select
Then cloudflare will do the first deploy and subsequent deploys when you push to github's main branch.