After working on the miss’s DFW real estate site, I was inspired by its modern and efficient architecture. The project’s lean approach, which minimized overhead by carefully selecting fonts and optimizing images, resulted in impressively fast client-side response times. This experience highlighted the limitations of my current blog setup and it was really showing its age.
With her site, after I got everything how we liked it, I pulled out all the extra fluff by creating custom client side assets. The theme came bundled with font awesome and woff libraries. I ripped out what wasn’t actually needed and it really improved that response rate. I did some SEO work, created some AMP go templates, although for our use case, AMP really served no benefit as the styling and scripting was already minimal.
The “Why”: Breaking Up with the Monolith#
Ghost is a fantastic platform with a vibrant community, but its monolithic architecture felt increasingly cumbersome. The traditional stack, while powerful, comes with a lot of overhead that I simply don’t need. My goal is to move to a more streamlined, flexible, and performant solution. Something that I can get more involved with from frontend to server side. Database not needed, but can be easily integrated if the need arises. Something clean to start building everything out, but not so blank that I’m working from the ground up. The Jamstack philosophy—JavaScript, APIs, and Markup—perfectly aligns with this vision.
The “How”: A Modern, Decoupled Approach#
To achieve a truly decoupled and efficient system, I’ve chosen a combination of modern tools:
- Hugo: A blazingly fast static site generator. It will be the core of my new blog, responsible for building the frontend. I have found it to be incredibly versatile. The templating engine written in Go means it churns out static web assets fast.
- Sveltia CMS: A lightweight, Git-based headless CMS. It will provide a clean and simple interface for writing and managing my content, without the bloat of a traditional CMS. At the time of writing this, it’s still in pre-release and despite being solo managed, is quickly overtaking Decap CMS implementation which I had been considering. I had tinkered with integrating Decap with external oauth services and it was a huge headache. Even after writing some middleware it just still wasn’t reliable and started to feel like it may be in a death spiral. Sveltia is incredibly well written and has been getting near daily “pre-release” cuts. Go check out his work on Github.
- AWS: Amazon Web Services will handle the backend heavy lifting. I plan to use services like Amazon S3 for a lower cost hosting solution, and other services for features like email subscriptions, ensuring scalability and reliability. It’s just a blog. The API Gateway and lambda functions provide a world of opportunity. It’s just a blog.
The “What”: The Migration Plan#
This will document the entire migration process, from exporting my content from Ghost to deploying the new Hugo site.
- Exporting Content from Ghost: The first step is to get all my posts, pages, and images out of Ghost in a usable format. Ghost has a built in export. You can use the cli tool or the web gui. You end up with an archive of all your content which can be used directly in Hugo’s content files, or converted to proper markdown.
- Setting up Hugo: Mostly at this point, it’s a few tweaks of the configuration and picking a theme to get up an running with.
- Content Transformation: I’ll be keeping most of the content even though there’s not much worth keeping. Just as simple as tearing out the actual content strings from the html and converting any of the html elements to a matching markdown conversion.
- Deploying to AWS: Deploying is a breeze by setting up a CI/CD pipeline with GitHub Actions to automatically build and deploy the site to Amazon S3. Set up a branch for the Github action to monitor and any change to that branch kicks off the build for the low low cost of free.
- Tear it all down: After the Github action was tested and AWS Cloudfront was set up for DNS resolution, a quick test with a clean browser and everything was looking the way it had been locally. Rather satisfying to finally delete the old Digital Ocean droplet and my Cloudflare zone.
I’m excited to embark on this journey and share my experiences with you. Let’s get tinkering.