I moved my website to CloudFlare Pages, here’s why
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.

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:
- Unlimited bandwidth in its Free Plan.
- Greener policy: Cloudflare is committed to using 100% renewable energy sources, and removing all greenhouse gases emitted as a result of powering their network since 2010. They provide a Carbon Impact Report on carbon savings from using Cloudflare services versus Internet averages for your usage volume.
- Better protection from attacks: CloudFlare has a reverse proxy in place, a web site never needs to reveal the IP address of their origin servers. This makes it much harder for attackers. Instead the attackers will only be able to target the reverse proxy, such as Cloudflare’s CDN, which will have tighter security and more resources to fend off a cyber attack.
- Free Bot protection: There is a one button solution to block malicious bots outright. The Free Plan offers a smaller set of rules than paid plans, but every bit counts. Updating your
robots.txtwill only get you so far. - Faster DNS performance: Cloudflare claims that CNAME flattening helps DNS queries resolve up to 30% faster.
- Faster page loads: CloudFlare’s reverse proxy can cache more content closer to the client to improve performance. For example, if a user in Paris visits a reverse-proxied website with web servers in Los Angeles, the user might actually connect to a local reverse proxy server in Paris, which will then have to communicate with an origin server in L.A. The proxy server can then cache the response data. Subsequent Parisian users who browse the site will then get the locally cached version from the Parisian reverse proxy server, resulting in much faster performance. Also, Cloudflare has a feature called Early Hints that automatically caches any
preloadandpreconnecttype link headers to send to the browser before the full response is prepared. - Free Real-time User Monitoring (RUM): It provides a privacy-preserving view into the performance of web pages as experienced by your visitors in its Free Plan. It does not collect your visitor’s personal data.
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:
- CloudFlare Pages offers Git integrations for GitHub and GitLab that will automatically deploy your website every time you push a change to a branch.
- Domain management is quite similar. You can use a custom domain without too much fuss (you just need to know what to enter). CloudFlare makes it a little easier by using CNAME flattening, so you don’t need to bother with A records.
- CloudFlare Pages and Netlify allow customisation of HTTP headers in a
_headersfile. - CloudFlare Pages and Netlify allow customisation of redirects through a
_redirectsfile. The syntax looks very close. - There is build caching for a decent selection of frameworks. Eleventy is in there on CloudFlare Pages, so I was happy. The feature is in beta though.
Downsides of switching to Cloudflare
Unfortunately, not everything is apparent up front. I encountered a few issues:
- 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.
- 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.htmlwill becomehttps://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. - 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.
- 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! 🫶