I moved my website to CloudFlare Pages, here’s why

a notebook has a series of block with letter on them arranged to spell the word change. the cloudflare logo is overlaid on it.

CloudFlare has deprecated CloudFlare Pages. They are urging people to use Workers instead of Pages for new projects. Workers support the same featureset as Pages, but require more effort to use with static site generators from what I gather. In future, it appears that only Workers will gain new features. Consider this before using CloudFlare Pages. I am still using Pages and haven't encountered a need to migrate yet.

I switched the hosting of my personal website from Netlify to CloudFlare Pages yesterday. I was fairly happy with Netlify, but I was aware that CloudFlare has a more generous free plan and does more on the infrastructure side to make websites faster, greener, and more secure.

Why switch?

I got a reminder to put more serious consideration into switching last month, I saw a big spike in the bandwidth used for my website. On March 19th, the bandwidth was 13.4GB, which was more than the entire previous month! Parking my ego, it’s more likely that it was a bot than some stellar content I published that went viral! So, I thought I’d look at CloudFlare Pages to see if it could move me to higher ground.

A graph of bandwidth usage for robolery.net. The bandwidth usage for Feb was 8.2GB, it was 32.4GB for March.

What initially piqued my interest in CloudFlare Pages was that it offers unlimited bandwidth on its Free Plan. Looking deeper, I found that there are a few advantages of choosing CloudFlare Pages over Netlify.

Advantages of switching to CloudFlares

There are a few advantages of choosing CloudFlare Pages over Netlify:

I had read elsewhere that the DX of ClodudFlare Pages is inferior to Netlify, but that gap has narrowed for deploying static websites, most of the features are on a par:

Downsides of switching to Cloudflare

Unfortunately, not everything is apparent up front. I encountered a few issues:

  1. I found it tricky to set the DNS records up correctly. CloudFlare docs does not make it clear how to set up the www subdomain. Do you use bulk redirects or set up a www subdomain that points to the same codebase? My website was in an inbetween state for a day or so while I figured how to avoid redirects.
  2. Any URLs that end with .html will be automatically redirected to an URL with the file extension stripped off. For example, https://roboleary.net/foo.html will become https://roboleary.net/foo. This was undesirable for me because I had some old blog posts that have canonical URLs that include the HTML file extension, and I want to preserve the URL. There is not a simple way to disable this behaviour. While nothing is broken, the original URLs are still valid and the redirects are through a 308 status code that should preserve SEO, it does slow down the loading of these pages.
  3. There is a file limit of 25MB. This will led to your build failing if any big files make it into your deployment. Not a deal-breaker for me, but I had to filter out some files that were making it onto the server.
  4. CloudFlare’s dashboard has a lot more going on, so it takes time to figure out what is where.

The experience of switching

Initially, I tested out a copy of my website. I was able to link to a Git repo for automatic deployments quickly. It was quite smooth to get something online. The only blocker was that the build failed because it did not like files bigger than 25MB. I was copying some GIMP files of some artwork across to the deployment folder, nothing that I actually displayed on any pages, so I just needed to stop those files from being copied. It was a relatively quick change in eleventy. However, I did struggle to get the www subdomain set up correctly once I switched over the domain authority to CloudFlare. This led to some downtime of my website.

Final thoughts

The nice thing about having a static website is that the switching cost is quite low. I like to favour businesses who have initiatives to reduce their environmental footprint and preserve people’s privacy. CloudFlare looks like they are doing more than some of the competitors on that front. Switching to CloudFlare should give my website a performance bump, do more to preserve the integrity of my website against malicious actors, and give me more headroom for growth. Here’s hoping that will be the case! 🤞

If you hit a 400 or 522 HTTP status code or slower page loads in the last 24 hours, I apologise. It did take me a while to get the DNS stuff setup properly – I will do a quick write-up of that later. Everything should even out when the changes are propagated worldwide. 😅

Thanks for your patience and support! 🫶

Tags