Astro Web with Cloudflare Pages and CI/CD

Astro Web with Cloudflare Pages and CI/CD

September 24, 2024

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

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:

Cloudflare create an app

You will need to authenticate and select which repo/s will Cloudflare be able to access.

Wordpress Google Page Speed Desktop

It works with public and also private repositories!

Wordpress Google Page Speed Desktop

Wordpress Google Page Speed Desktop

The only command needed is hugo, so that the static files are generated to ./public:

Cloudflare will build HUGO for us

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:

Cloudflare Workers and Pages

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:

Deployed CF Pages

Custom Domain CF Pages

DNS CF Pages

As Simple as that.

ℹ️
Yep, I own the JAlcocerTech domain and we can collaborate

Now whenever I push changes to this repository, they will be available at:

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.

CF Pages deployments

For Github, you would go to the actions tab of the repo

⚠️
Github Pages will allow for 25mb+ individual files, but not Cloudflare.

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