Introduction

In How My Hugo Project is Organized I said I wouldn’t touch the Clean White theme itself and would do everything with overrides in the site project. I also said that if that ever got too unwieldy, I would spin it out into a fork or a new theme of its own.

Well, that day came. If you’ve been here before you’ve probably noticed the site looks a lot different. This post walks through what changed, in broad strokes. I’m leaving the earlier posts in this series as they were written, since they describe how things were at the time.

[Guy: a sentence or two on what tipped you over - the overrides piling up, wanting dark mode, the photo wall, etc.]

A Theme of My Own

The new theme is called The Blues. It started life as a copy of Clean White by Huabing Zhao, so credit where credit is due, but by now the layout, markup, and styles have all been rewritten. About the only things left from Clean White are the names of a few settings, which I kept so my site configuration didn’t have to change, and a couple of ideas like the big photo behind each page’s title.

What it does now that the old setup didn’t:

• A photo wall. The home page is a masonry wall that mixes photos from my gallery posts with article cards, with controls to filter by type, sort, and group photos by gallery.
• A lightbox. Clicking a photo in a gallery post opens it full size, with keyboard and swipe navigation.
• Light and dark mode. It follows your system setting by default, and the switch in the nav lets you pick one or the other.
• Accessibility. The target is WCAG 2.1 AA: keyboard navigation, visible focus, contrast checked in both color modes, and text that reflows on a narrow phone.

The theme is its own Git repo, still pulled into the site project as a submodule, so the overall layout from the last post holds. The submodule just points somewhere else now:

The overrides that used to live in the site project’s layouts/ directory are gone; the theme handles all of it. [Guy: there is also now a fourth repo that wraps the whole thing and holds the AWS scripts and notes - mention it or leave it out?]

Privacy

I took the opportunity to rethink what the site loads from other people:

• Comments from Disqus only load when you click to show them.
• YouTube videos load from YouTube’s privacy-enhanced domain, which sets no cookies until you play a video.
• Google Analytics isn’t loaded at all if your browser sends Do Not Track or Global Privacy Control.

All of that is spelled out in the new privacy section on the About page.

Behind the Scenes

Most of the work you can’t see:

• Hosting. The site is still static HTML in an S3 bucket, but the bucket is now private and only CloudFront can read from it, instead of being open to the world.
• Security headers. The site now sends a Content Security Policy that tells browsers exactly which outside scripts and services the pages are allowed to use, and the few scripts loaded from a CDN are checked against a hash before they run.
• Caching. Stylesheets and scripts get a fingerprint in their file names, so browsers can keep them for a year, while pages are checked for a new version on every visit.
• Smaller images. The home page’s header photo is 72% smaller and the 404 page’s is 84% smaller, without looking any different.
• Deploys. Publishing is a single script that refuses to run unless everything is committed and matches what’s on GitHub. It uploads the new files first and only deletes old ones after CloudFront has dropped its cached copies, so nobody gets a page pointing at a stylesheet that no longer exists.

Apps

There’s also a new Apps section for small tools that will mostly just run in your browser. The first one is SnugCut.

SnugCut helps you waste less material when cutting shapes on a laser cutter, vinyl cutter (like a Cricut or Silhouette), CNC router or plasma cutter. You give it your designs, say what size sheet you’re cutting from, and it fits the pieces together as tightly as it can, like a puzzle. It shows how many sheets you’ll need and how much of each one you’re using. Then it saves the arranged layout as a file you open in your cutter’s own software.

Everything happens in your web browser. Nothing is uploaded or stored anywhere.

What’s Next

Currently working on rolling out a self contained search functionality for this site (which may already be released by the time you read this) along with some more mini-apps that mostly solve everyday problems for me but hopefully some of you find useful.