How I made this

Posted on Apr 1, 2026

It feels like a cop-out when you don’t want to actually publish any of the things you have in Drafts, and you’d be right. So here it is, the obligatory how I built my website post.

Frankly there isn’t much to tell, I spent the first ten years of my IT career playing around with WordPress, Joomla, Drupal, and the others and the last CMS I truly deployed was Ghost which is the most impressive of all of them in my opinion.

But as time has gone on and I’ve learned new things in IT, simplicity is the best and nothing beats a simple text file. As long as the text file is Markdown.

So, armed with this knowledge I needed a way to take my thousands (or tens, for the ones I’ll actually publish) of text files from my Joplin journal and turn them in to HTML for a web server.

Enter: Hugo. Its a static site generator that’ll do just that, and it’ll even do it automatically if you’re comfortable using GitHub Actions.

Tech Stack

Like it said, it is simple: HTML5, CSS3, VanillaJS, GitHub Actions, and WebDAV.

Wait, WebDAV? Yes, remember that open standard that has been around since the 90s for managing file syncing that we all forgot about and let Microsoft eat everything? Well its still here and it works fine.

The Matrix Rain Effect

The background animation is a classic “digital rain” effect, similar to what you’d see in The Matrix. I implemented it using HTML5 Canvas and JavaScript:

  • Random glyphs from a Japanese character set
  • Falling columns at varying speeds
  • Fades out old characters for that trailing effect
  • Respects user preferences for reduced motion

The canvas is positioned as a fixed background layer, so it doesn’t interfere with the content scrolling.

This is my first website in a very long time so I wanted to have fun with it, but eventually I’ll take it down and my website will become a dull corporate-looking monstrosity because that is what is considered professional these days.

Everything must look the same if you have a LinkedIn account.

Automated Deployment

I set up a GitHub Actions workflow that deploys on every push to main:

  1. Checks out the code
  2. Prepares a dist/ directory with static files
  3. Adds cache-busting hashes to CSS URLs
  4. Inserts deployment timestamps to force content updates
  5. Syncs to Fastmail using rclone over WebDAV

This means I can update the site just by pushing to GitHub and all of the uploading to my webserver is handled with Actions, API keys and all that stuff is in Secrets.

How I got the blog feed to work

My blog (the thing you are reading) is actually handled in a different repo, but my actual one-site site puls in this content using JavaScript that I slapped together using a bonesaw and pure luck (and GitHub Copilot, don’t judge me, you all do the same).

So there, thats it. Text files, a single GitHub actions flow, and everything else in Secrets.

It is all hosted on Fastmail so if you want to take a look at that then make sure you clicky here so I get some monies for referring you. Kthxbai.