Adding a CMS to This Website

One thing I’ve always wanted to do is add long-form posts to my website: portfolio pieces, or deeper write-ups about some of my experiments. I needed a CMS for that.

Even though my Framer subscription included CMS access, I wasn’t sure it made sense for me, especially with the quite hefty yearly price tag. I know Framer works well for simple CMS tasks, and I still like it a lot. But I’ve also run into its limits, especially when I want to extend things or build something more custom.

I made my portfolio long-form pieces in Framer without a CMS, and it was such a hassle, especially around mobile breakpoints. Framer has a good system, but I always ended up fighting it, and something would always look slightly off at one breakpoint or another. Lots of bespoke fixes. I know it might be on me.

Anyway, when the annual renewal was coming up, I decided it was time for me to move on. But where to?

I wanted to spend little (or no) money on it, and I knew I had to serve media content in some way. I needed images that scaled properly across devices, and maybe short-form video too. I knew GitHub Pages was a solid contender in that regard, but what would I do with the media content? I didn’t want a manual process.

Ghost seemed like a stable option as a CMS. I could host it myself and edit my content for free, but then what? After some research and tips I ended up doing the following:

Ghost only runs locally on my machine. I only need it when I’m editing, or when I need to pull content from its API. This way I don’t need to have it online at all times, which saves a bit of money on a VPS.

Turns out Ghost even rescales uploaded high-resolution images and serves the appropriate version for each device. The only remaining puzzle piece was how to streamline that and serve it in my own custom-built theme. That’s when I found Astro, a static site generator.

The workflow is this:

I start the Ghost server, edit my content, add media, and hit publish. Then Astro pulls the posts from the Ghost Content API and renders them the way I want. This approach is a little fiddly, but it also comes with a lot of flexibility.

Astro lets me run a local dev server to test my content. I can even connect to it with my phone and test it on device. When I feel good about it, I can generate everything as static files. A simple deploy script creates a disposable gh-pages branch, then pushes that to GitHub. Finally, GitHub Pages serves all of it.

I even connected the home machine running Ghost to Tailscale, so the Ghost admin and API are available to me from virtually anywhere. That means I can keep working on this website wherever I am, whether I’m editing content or changing the design — for free, and with as much freedom as I want.