In terms of blogging I tend to live in a bit of double world. For work, we publish a lot of our content on Medium, and that covers a lot of the blog posts that I write.
I also have this personal blog, which contains all sort of stuff from days gone by. It also contains lot of cross-posts (copies) from my articles on Medium too. It was implemented using Jekyll, stored in a private GitHub repo, and then built and served using Netlify.
Its been at the back of my mind for a while that this situation isn’t great, and has a few problems:
- Some of the blog posts are duplicated, leading to multiple sources of truth. As its easier to quickly edit something on Medium, frequently my personal blog ended up getting out of date.
- As much as I like the technicality of using a static site generator and storing everything in git, its not exactly conducive to writing.
A Ghost enters the room 👻#
So I started looking for an alternative, and had my eyes on using Ghost. If you’ve never heard of it before, Ghost is an open-source blogging platform which is written in node.js. It’s not a static site generator, and has a nice and fairly simple CMS available to edit your site in real-time.
Sounds perfect, but the wrinkle in using Ghost? The basic package is $29 per month, which feels expensive to me personally.
As Ghost is an open-source blogging system, I instead looked at options of hosting it myself. Initially I looked at hosting it on DigitalOcean, using it’s 1-Click installer which worked fine in testing. But the question of where (physically) should I host the site came up: Do I host it close to myself in the UK? Do I try to guess where is closest to my readership is and host it there? 🤯
Static site generators don’t have this problem as all of the files are… static. They can be hosted on CDNs and replicated across the world. It’s at this point where I stumbled across something call ‘ Jamstack’.
Stack the Jams 🥞#
I’m not a web developer so I’ll leave the explaination of exactly what Jamstack is those who know much more than me: https://jamstack.org/what-is-jamstack/
In summary, it takes the best of both worlds from static site generators, and being able to use a headless CMS to write content (headless == not using it serve the actual site). Your static HTML site is generated from the CMS of your choosing (using its API), and then deployed to CDNs across the world.
The CMS is only for you (+ other writers), and your static site generator; no one else uses it. This means that you can host the CMS locally (mine is now hosted on a Raspberry Pi at home).
This sounded interesting to me for a few reasons:
- It was a new technology to explore and play with.
- It actually fixed some problems I was having.
Who knew side projects could be useful!
Gatsby + Ghost#
It’s at this point that I stumbled on this in the Ghost docs:
It turns out that Ghost have published an open source starter project which uses Gatsby as the static front-end, connecting to Ghost’s API for the backend. The starter project has been designed to mimic Ghost’s default theme ( Casper) so that we don’t lose any UI functionality.
And that us pretty much what the site you’re looking at is: a forked version of the Ghost Gatsby starter project, deployed using Netlify and connected to a Ghost instance running on my Raspberry Pi.
For those of you who don’t know what Gatsby is: it’s a static site generator which is uses React. React has been especially interesting to play with over the past few weeks since it’s felt like déjà vu after working on Jetpack Compose for the past year or so.
Out of sync#
The de-coupled nature of this setup does mean that your CMS and site can become out of sync. If you update your site’s content using the CMS, you need to re-generate your static site. Luckily we can automate this, by using something like Netlify’s Build Hooks. Whenever your site changes, our Ghost instance can ping the build hook URL, which then triggers Netlify to re-build the site.
The official Ghost & Netlify docs go through this here: https://ghost.org/integrations/netlify/
More resources#
Hopefully you found this blog post useful. It wasn’t meant to teach you how to achieve this step-by-step, but just to outline the reasoning and benefits for the setup.
Here’s some more resources which I found useful: https://www.conordewey.com/blog/building-my-blog-with-gatsby-and-ghost/