Website Update 2022

Jul 11, 2022 4 min read

Did I really need to change my website’s tech stack? Not really but I did it anyway.


Changes

Domain moved to Cloudflare

I moved my domains from Namecheap to Cloudflare.
Cloudflare is cheaper and I didn’t need any of Namecheap’s extra features.
It was easier than I expected, I didn’t need to contact support or anything, just follow the instructions and click some buttons in Namecheap’s dashboard.
Though Cloudflare doesn’t recognise the auth code for one of my domains as valid. Might be because it’s on a .games domain instead of a .com one but Cloudflare should theoretically support those?

Web Hosting moved to Cloudflare Pages

This website is no longer being served by Github Pages and is now served by Cloudflare Pages.
I needed a full https stack for my image hosting move to Backblaze B2 and it seemed easier to achieve this by letting Cloudflare act as both the host and the CDN.
I was already using Cloudflare as a CDN anyway and I figure this would make the hosting more efficient if it all came from one place.
Cloudflare still pulls the latest files from the original Github page so my production workflow stayed the same.

A tip:
In the Cloudflare Pages dashboard make sure to add both "your-website.com" and "www.your-website.com" to the Custom Domains tab.
In your Cloudflare website DNS records, add a CNAME entry for your Cloudflare Page url (it looks like your-CF-Pages-Name.pages.dev) with the name your-website.com. Duplicate this record and change the name to www.

Image Hosting moved to Backblaze B2

Amazon S3’s free trial was over and was now costing me a whopping 50 cents a year.
Backblaze’s B2 has both an unlimited free trial (for now) for small users (my photos are only 500MB so far). Plus they even have a partnership with Cloudflare for free downloads.

The Backblaze Cloudflare partnership is pretty interesting, turns out their servers are in the same building so they literally patched a cable across to each other’s rooms, bypassing any ISP bandwidth charges between them entirely.
The devs talk about it in this Reddit thread: How long will Cloudflare peering stay for?

One minor annoyance with Backblaze is that each email is region specific. I needed to make a new account to host my B2 bucket in Europe.

I used the service Flexify.IO for a free automatic transfer from S3 to B2: Quickstart Guide for Flexify.IO to Transfer Data from Amazon S3 to B2
I followed this tutorial for setting things up: Free Image Hosting With Cloudflare Transform Rules and Backblaze B2

I questioned whether the transform rule for redirecting the urls to my custom domain was required, with S3 I only need a DNS record. In-fact, B2 even offers a S3-like url for my images, but the same DNS record re-direct trick doesn’t work for some reason. I read a post from a dev a year ago that they’d look into it but it doesn’t seem like it’s coming anytime soon.

One problem I encountered with the tutorial is that the URL re-direct transform rule was re-directing ALL my urls, not just the images. I needed a second expression to make it work so the final result looks like:
(not starts_with(http.request.uri.path, "/file/img-tehlemon-com") and http.request.full_uri contains "https://i.tehlemon.com")

The website-based UI is somewhat clunky. It logs me out a lot and I need to manually navigate all the way back every time and it’s not bookmark-able.
I’m using the Windows desktop app, Cyberduck, instead for managing my files.

Updating the website theme

Merged in the latest updates to the parent theme, Mediumish.
Github couldn’t do this automatically but Visual Studio Code could.
Nothing really changed, a couple bugs got fixed, some libraries updated and support for some features I had already added myself (e.g. allowing your own css tweaks).

There was one problem that didn’t show up until I pushed the changes to production.
The theme creator added support for a security feature that checks the integrity of the site’s files which only allows the browser to load the files if they haven’t been changed. I couldn’t get this compatible with Cloudflare which processes and optimizes the files before serving them so I disabled the intregity checks by ctrl+f’ing integrity=" and replacing them with integrity="".