Why I host my blog on Cloudflare Pages
My initial goal was to write a post comparing two major hosting offerings for a static tech blog at zero cost. Turns out, there’s an abundance of «Github Pages vs Cloudflare Pages» posts on the web. So the premise shifted to why do I pick Cloudflare Pages.
According to Google Trends graph, Github Pages ranks 77 against 5 points of interest for Cloudflare Pages. Couple of reasons for this are:
- Github Pages as a platform was announced in 2008, Cloudflare was founded in 20091.
- Cloudflare announced general availability for it’s Pages in the middle of April 20212.
- Simplicity — turning a repo into Github Pages takes a couple of clicks.
Yet, in a short period of time, Cloudflare Pages proved to be a highly competitive and solid solution vastly for its integration with other features the company has to offer.
3 to count at least five incidents related to Github Pages in the last year, while Cloudflare Pages4 had three for the same period. Cloudflare offers at least two options to mitigate the possible availability issue. One of which is Always Online which takes snapshots for Wayback Machine. In case segments of Cloudflare responsible for Pages, experience technical issues, Always Online will save the day.
Always Online is available under Configuration section in Caching menu of a site area.
~ ❯❯❯ curl -I https://gdmka.me | grep -i "CF-Cache-Status" % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0 cf-cache-status: DYNAMIC
DYNAMIC cache response does not consider the asset to be eligible for cache5 so the page was requested from the Pages service.
To benefit from caching I added
Cache Level and
Edge Cache TTL settings in Page Rules.
Cache Everything with
* match pattern instructs Cloudflare to cache all the static assets as well as the dynamic parts, so make sure to set Bypass to any pages with forms.
Edge Cache TTL is basically a setting that controls the period of time before edge servers invalidate the cache and request a new copy from the upstream. With this option on, Cloudflare will overwrite all of the headers sent by the upstream.
I set it to a week because it’s a reasonable interval between new blog entries for me. Plus, a new page build triggers cache invalidation avoiding the problem of stale pages getting served. Now, if Pages encounters any availability issues, the blog will be served from the edge cache (assuming it wasn’t invalidated) hence the second mitigation option.
I ran a performance test to check how content delivery got improved and it’s pretty impressive. According to GTMetrix, Full Load Time for a cached page is 341ms compared to 760ms with default cache settings and Time to Interactive of 273ms against 489ms.
6 of redirection messages with a
_redirectsfile inside the project. It’s a simple way not to lose traffic.
URL rewrites, header modification, even HTTP GET query string manipulation is available at the domain menu section. The only downside is you can have only three Page Rules and two Transform Rules for a free tier.
About page with Email Address Obfuscation turned on.
~ ❯❯❯ curl https://gdmka.me/about/ | grep "reach me out at" | fold -w 80 % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 8514 0 8514 0 0 39971 0 --:--:-- --:--:-- --:--:-- 39971 <p>Currently I’m looking for a new challenging job that offers relocation, so don’t hesitate to reach me out at <a href="/cdn-cgi/l/email-protection #6700030a0c060627000a060e0b4904080a"><span class="__cf_email__" data-cfemail="da bdbeb7b1bbbb9abdb7bbb3b6f4b9b5b7">[email protected]</span></a>. Feel free t o message me your comments, ideas about the blog as well.</p>
As you can see, Cloudflare does all the heavy lifting: scans HTML for email addresses and serves sanitized pages to what appears to be bots.
The only caveat is that obfuscation didn’t work with the headless browser. Most likely this is due to good score of request IP address.
~ ❯❯❯ ./Chromium --headless https://gdmka.me/about --dump-dom | grep "reach me out at" | fold -w 80 <p>Currently I’m looking for a new challenging job that offers relocation, so do n’t hesitate to reach me out at <a href="mailto:[email protected]">[email protected] om</a>. Feel free to message me your comments, ideas about the blog as well.</p>
I don’t have any custom content that requires harvesting protection, but if you do — Server-side Excludes is what you need7.
Combined with Brotli compression8, the final asset size was reduced by almost 89% when transferred over the wire.
CF-Polished: origSize=44772 shows the original size of the CSS file in bytes (~ 45KB),
CF-BGI: minify response header indicates that Cloudflare served a minified version and
Content-Encoding: br that Brotli algorithm was applied. The end result is a compressed 5.43KB style.css with just two mouse clicks!
9 that suffer packet loss the most.
I’ve found Bot Fight Mode exceptionally useful for my side projects. It may become useful again once I add a comment system.
And to conclude, the more feature rich the platform is — the better it scales for your future needs. Therefore Workers and Workers KV are good options to hack where static site generator capabilities will be limited.