Static sites are fast. But for the longest time, static websites were thought to be inferior to full blown content management systems (CMS) like Wordpress or Drupal. While static website are fast, they are not known to be easily updated.
That was before static site generators meet the headless CMS.
I've previously been running my previous blog on Next.js. As a static website generator, I was very happy with its performance. However, having been a user of Wordpress I wonder if I can make the process of updating the blog less painful but yet keeping the blog blazing fast.
With Next.js, the process of adding a single blog post looks like this:
That is a lot of things to do before even writing the sentence!
Thinking about my idea blog, I've narrowed down the the few criterion:
Looking around for solutions that will allow me to build my ideal blog from, I stumbled upon the Gatsby + Netlify CMS Starter. The template is one of many Jamstack templates hosted on netlify to showcase the possibilities of Jamstack.
With the one-click deploy feature, I was able to test drive the stack in a few minutes!
I love how the blog generates blog pages from the markdown files and how the other parts of the website falls into place.
Out of the box, Gatsby give you everything from create-react-app, server-side rendering and smart image loading.
What really set Gatsby apart from other static site generators like Next.js is the graphql server. You can programatically generate content from different data sources, which could come from your markdown files as well. This means that I will not only be able to create individual standalone blog posts, but also automatically generate a page for each blog post tags linking to other post with same tags. You can also generate a section after each blog post to show "similar articles" using the query server.
What was really cool was that the deployed blog was using Netlify CMS to manage it's content. While it is certainly not a full featured platform like Wordpress, I can create and edit blog posts without writing a single line of code!
Netlify injects the CMS at the /admin
path once you've setup the site to use Netlify CMS from the configuration file defined in /static/admin/config.yml
.
Upon submitting a new blog post or changes to existing posts, the CMS will use the github gateway to commit the change and automatically build and deploy the new version of the blog with your changes.
With the starter site as a guide, I began customizing the blog to my liking. Some of the things I've done:
The result was a cleanly designed blog with a layout similar to medium so that reader can focus on the content without distractions.
On top of the beautiful design the site was acing Google Lighthouse site audit!
If you like to run a copy of the blog, you may simply click on the link below to automatically deploy my stack with your Netlify account:
Sign up for my personal newsletter to be updated on latest posts, tools & webinars.