Adding CMS to this website

One thing I always wanted to do is extend my website with long form posts: either a portfolio piece, or going into details for some of my experiments. I needed a CMS for that.

Even though I had a CMS access in my Framer subscription I wasn't sure if it was for me since it has a quite hefty yearly price tag. I also have my doubts. I know it works and is good for simple CMS-related tasks, but no matter how much I like Framer, I do know it has its challenges, especially when it comes to extending it or having some custom parts. (Which I need some of the time.)

I made my portfolio long-form pieces in Framer without CMS and it was such a hassle, especially for mobile breakpoints. Mind you, Framer has a good system, but I always ended up fighting it and some styles in some of the breakpoints were always looking off. Lots of bespoke fixes. I know it might be on me.

Anyway, when the yearly payment due date was on the horizon 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. Images that scale to various devices, maybe short form videos as requirements. I knew GitHub Pages is a solid contender in that regard, but what do I do with the media content? I didn't want any manual process.

Ghost seemed like a stable option as a CMS, I can host it myself to 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 to access it when I'm editing something or when someone wants to access its API to get the content. This way I don't need to have it online at all times (saving a bit of money on a VPS).

Turns out Ghost even rescales the uploaded high resolution images and serves the appropriate version for devices. The only remaining puzzle piece was how to streamline that and serve it in my own, custom built theme. This is when I discovered Astro which is basically a static site generator.

The workflow is this:

I start the Ghost server, edit my content, add media, hit publish. Then Astro accesses my posts from the Ghost Content API and reformats them the way I want it. It's a bit of custom code (since I need to rewrite the localhost media references), 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 to test it on device, then when I feel good about it, I can generate everything as static files. A simple deploy script then creates a disposable gh-pages branch then pushes that to GitHub. Finally, GitHub Pages serves all of that.

Ghost's content API serves a lot of HTML cruft that needs to be stripped, but hey, it is zero dollares and quite the flexibility.