Astro Web with Cloudflare Pages and CI/CD
Lets see how to: Astro Websites Automatic deployment with Cloudflare Pages and CICD, connected with Github Pages
We can upload the manually generated static astro content to Cloudflare Pages via CLI as explained here.
But how about just pushing the changes to a Github Repository and let the CI/CD magic happen?
Let’s do it with the hugo theme gallery ssg as example and following the Cloudflare Devs YT Video
Astro Site to Github Repository
Push your code to a Github Repository.
Setup Cloudflare to with with Github
Go to Cloudflare UI. Worker & Pages -> Overview. Create -> Pages -> Connect Git.
You will Need a Github Account Authentication and provide repo permissions: https://github.com/settings/installations/56072936
For hugo you would need the hugo command to build instead
You might also need to specify the HUGO_VERSION as variable
Setup Cloudflare Workers and Pages
Go to the Cloudflare UI, and…
Detailed Process - Cloudflare and Github 📌
…select the overview, under Workers and Pages.
Create an App and connect to Github:
You will need to authenticate and select which repo/s will Cloudflare be able to access.
It works with public and also private repositories!
The only command needed is hugo, so that the static files are generated to ./public:
It does similarly as the GH Action Workflow to Send HUGO to GH Pages
This is how it will look in Cloudflare UI once setup:
Detailed Process - Adding Cloudflare custom Domain 📌
I chose jalcocertblog as the name of the project.
It will be available under the same name in the Cloudflare CLI wrangler
Lets add a domain we have at Cloudflare:
As Simple as that.
Now whenever I push changes to this repository, they will be available at:
- Github Pages with free domain: https://jalcocert.github.io/JAlcocerT/
- Cloudflare with my own subdomain: https://blog.jalcocertech.xyz/ (also the free one)
You can see what has been going on with your deployments in the Cloudflare UI at: Workers and Pages -> name of your project, for me jalcocertblog.
For Github, you would go to the actions tab of the repo
Cloudflare Pages vs other Free Deployment Methods
Cloudflare wins in:
- The ping time:
ping jalcocert.github.io/JAlcocerT #~30ms
ping jalcocertblog.pages.dev #~10ms
ping jalcocertech.web.app #~30ms- And also the http request:
curl -o /dev/null -s -w "Time: %{time_total}s\n" https://jalcocert.github.io/JAlcocerT #~0.28s
curl -o /dev/null -s -w "Time: %{time_total}s\n" https://jalcocertblog.pages.dev #~0.15s
curl -o /dev/null -s -w "Time: %{time_total}s\n" https://jalcocertech.web.app/ #~0.3s