Skip to main content

Flux

I've never liked stock themes, and I wanted my Ghost site to be my own.

Shipped
  • Publishing
  • AI integration
  • Web

Problem

I’ve never been a fan of stock themes, for anything. When I set up doncoleman.ca on Ghost, I wanted the site to be my own.

The name Drift and Convergence came from my initials, and from my appreciation for complexity, systems leadership and how problems evolve as we navigate them. I made dozens of changes to the design as I built it. The idea of treating them as two separate streams of thought came about naturally along the way.

A split screen showing the Flux Ghost theme in dark mode on one side and light mode on the other

Options

I never seriously considered living with a stock theme. The real question was how much of the theme to build myself.

  • My own design: The site had to look like mine, not like a template.
  • Easy to change: I made dozens of design changes as I built it, so the theme couldn’t fight me.
  • Works on hosted Ghost: The site runs on Magic Pages, so everything had to live in the theme.
  • Room for AI features: The theme had to leave space for the reading aids I wanted to add.
How the options compare for Flux
OptionMy own designEasy to changeWorks on hosted GhostRoom for AI features
Ghost's stock Casper themeNoNoYesNo
A marketplace theme, customisedPartlyPartlyYesPartly
A theme built from scratchChosenYesYesYesYes

Why a theme built from scratch won: it was the only way to make the site my own.

Build

I wrote a lot of Flux by hand and used AI to help me develop the components. Most of the AI functionality I wrote with Claude Code, in small incremental chunks.

The hardest part was Handlebars. Its conditional logic isn’t very pliable, so I brought in custom JavaScript early to get what I needed. Underneath, Flux is Handlebars and Tailwind v4. Drift is lavender and Convergence is sage, and each has its own archive, timeline and subscribe button. A Node.js build minifies the scripts and stamps them with integrity hashes. AI-generated text passes through DOMPurify before it reaches the page.

The reading aids came from my MBA. The program, and especially our change management course, really reinforced critical thinking. As I built the site and thought about the people who might read what I write, I wanted a unique way to encourage critical engagement. Each post can show critical questions and related topics generated by a model. Logged-in members default to a higher-tier model, but they aren’t forced to use it.

The AI service started as an Express gateway on Fly.io. As I added features, I realized that building and running my own containers would be overcomplicated. Supabase let me put most of the features into one service and piggyback on Ghost’s authentication more easily.

I developed Flux in a GitHub Codespace, so I didn’t have to install Ghost on my computer and maintain a local installation over time. A Codespace let me work on it without burdening my own machine. More on that in the post on self-contained development for Ghost themes.

Three boxes joined by arrows, from Ghost to the Flux theme to an optional AI analysis service on Supabase
Ghost renders the Flux theme. When AI analysis is switched on, the theme calls Supabase Edge Functions that ask a model for critical questions and related topics about the post.

Lessons

Flux did exactly what I needed it to do, and I learned a lot about what I really need out of a personal website. The next iteration will be even better, even as I move away from Ghost, which I really enjoyed working with. That next iteration is the site you’re reading.

If you’re adding AI features, really think about what your users need to get some unique benefit from them. Everyone’s used to seeing chatbots and summaries, but I’m not convinced they’re useful most of the time.