How and why I built my website using a Headless CMS.

Quick Summary:

I will show you why I decided to build my website using a headless CMS, how I did it, and how hosting this website is free.

If you’ve seen me knocking about the internet, you’ll know I post most of my content between LinkedIn and Medium.

I prefer to post short-form content on LinkedIn and long-form content on Medium.

It’s a nice balance between the two.

Why did I create this website, then?

I created this website initially as a testing website.

My goal was to roll through each headless CMS combination to test their strengths and weaknesses, so I didn’t have to do that in the future on a client site.

In the end, I decided to keep this website to post content covering Technical SEO.

Plus, I like having control over my own content and platform, it’s better that way.

Why did I use a headless CMS instead of a regular CMS like WordPress?

Headless is the future, and it’s flexible.

If you’re not sure, Contentful wrote an excellent guide explaining what a headless CMS is.

Onto WordPress.

WordPress is a fantastic CMS, it’s simple to use, and it’s great for businesses and marketing agencies to use for their websites.

It’s also a great CMS for non-code developers, marketers and beginner technical SEO’s to learn their trade.

Some of those build their whole career around WordPress without touching another CMS, framework or any code.

Agencies and businesses tend to trade the simplicity of WordPress for the performance hit on the frontend, don’t get me started on page builders.

Personally, having developed and worked on hundreds of WordPress websites, I didn’t even consider building this with WordPress.

You can if you want to use WordPress as part of a headless CMS setup, there are plenty of tutorials online that will help you.

What I wanted to achieve

I wanted to combine a great CMS with a fast, modern frontend with minimal load times that feels fast for users.

My approach was to use a fast framework for the frontend, and I would only use the CMS to generate and publish content.

This way, the CMS would have zero impact on the performance of this website.

Technology used

I tested almost every headless CMS combination listed on the JAMstack website and decided on Ghost CMS and GatsbyJs.

The way it would work is as follows:

• Write content inside Ghost CMS
• Publish the content from Ghost CMS
• Serve the content to Gatsby via API.
• Build the Gatsby frontend ready to deploy

Fact: Developers never pay to host their own website.

How I did it

My development background enabled me to cut a few corners, cut a few costs, and take my website expenses down to zero.

I did this by combining three services.

• Github.
• Heroku.
• Netlify.

The setup works like this:

• I would store the code for GatsbyJs (frontend) on Github.
• I would install my Ghost CMS app on Heroku.
• I would then use Netlify to serve the frontend.

Why did I do it this way?

Github

I’ve been using Github for years, and I can make changes to my Gatsby Frontend locally inside VScode and push them to Github.

Once I pushed the code to Github, I triggered an automatic build and deployed it on Netlify.

When deployed to Netlify, the changes would be live, and you’d see them here on the frontend.

Heroku

Heroku is a great platform I’ve previously used to host a few Ruby on Rails projects.

I installed Ghost CMS to Heroku.

I also combined Cloudinary with my Ghost CMS installation.

Cloudinary is a CDN for serving media files.

All images uploaded through the Ghost CMS get served through the Cloudinary CDN.

Once I had these set up, all I had to do was connect my Ghost CMS to my Gatsby Frontend.

I then created a build hook that automatically rebuilds my Gatsby frontend on Netlify whenever I publish a new post.

It also triggered Netlify to clear my cache, regenerate a new sitemap and submit my latest article to Feedly through built-in RSS.

Netlify

Netlify is where I host my frontend.

There are two ways to update this website.

1. I can make changes locally and deploy them to Github to trigger a rebuild and redeploy.
2. I can publish a new post on my Ghost CMS that pushes to Gatsby and starts a rebuild.

A full build takes on average two minutes to build and deploy with zero downtime.

Performance

Out of the box, the performance was okay, but it needed some work and so I began optimising.

Here are the current lighthouse scores on desktop and mobile at the time of writing:

Desktop

Mobile

GTmetrix

If you’re new to this, these numbers aren’t set in stone, there are several variables involved, if you run a test your results may vary.

Final thoughts

My website is still very much a work in progress, and I will continue optimising it until I feel it’s finished.

Ultimately, I am pleased with my progress so far and feel like I’ve got a great foundation to build on.

There’s a chance in the near future it will look completely different once I start adding other elements.

Once I’m finished with performance, I will move onto other aspects of SEO and you can keep checking back for updates on that.

I moved my website to Medium but I still use this setup for all other websites I build.