cri.dev
about posts rss

Switching to CloudFlare Pages, from AWS S3 + CloudFlare DNS

Published on
Tagged with cloudflare6 github16 hosting1

Read more about my experience switching the static hosting for this very site.

Namely from a combination of AWS S3 + CloudFlare, to only CloudFlare Pages.

Will get into hiccups, overall experience and ease of use.

First of all: WHY?

S3 was getting expensive (5-7$ / month). That’s it.

I could’ve hosted this site on a VPS I currently run for other services.

But I thought: I am already using CloudFlare’s DNS, so why not go all-in?

Additionally, get all the performance goodies, fast CDN + DNS and security.

Deploy a repo from your Github account

Sign up to CloudFlare Pages from your dashboard.

You’ll be asked to connect your GitHub account.

I selected only the repository for this site, without full account access.

You’ll be asked if you want to use suggested settings for popular SSGs (Jekyll, Eleventy, Zola I think too).

Behind the scenes your repo will be downloaded, install the deps and build the site.

After a successful build, you need to choose a custom domain.

CloudFlare was “smart” enough to change my CNAME from my S3 bucket to my repo’s *.pages.dev domain.

Wait for DNS propagation and your site is live on your custom domain.

Initial problems

My first build failed.

I was using Optional Chaining in my .eleventy.js.

Surely in the docs the supported Node.js version is mentioned.

Nevertheless I didn’t expect that.

After “fixing” the issue in the problematic file, build remained in the “Waiting” state for a while, never emptying the queue.

So I recreated the project and then the first build was successful.

Pros & Cons

Pros

  • no need for a GitHub Actions pipeline to upload build files
  • serving assets from a fast and reliable service provider
  • built-in analytics (for what’s worth)

Cons

  • max 500 builds a month (most likely way more than you’ll ever use)
  • “early adopter” risk (it just became generally available today I think?)
    • there will surely be issues in the future
  • running tests is a bit weird (coming from GitHub actions, you only get a “build command”)
    • simply run your tests with && during the build

Rarely Asked questions

Why not use GitHub Pages?

I dislike GitHub Pages caching policies.

Additionally I wanted to try out CloudFlare Pages.

Also, I have much more granular control over the cache and my assets are cached on CloudFlare CDN.

Why not self-host your blog?

Good question. I would not have any issue with self-hosting this blog on a VPS behind nginx.

Although I feel more “safe” from a performance point of view hosting the site on CloudFlare Pages or S3.

This can impact SEO and generally how your site is perceived by the user.

Here, have a slice of pizza 🍕