Lately I was often asked about what is the best way to create a modern website today. The answer is manyfold and maybe there is not one correct answer. As a computer scientist I also tend to answer (like most scientists do): “it depends”. But I observe a trend with contemporary websites: they combine a headless CMS with static site generation. This gives you the ease of use and dynamics of a CMS but at the performance of static sites.

Static site generation is a very “old” way of developing web-pages, but in the old days (and today) a performance king. I remember back in the days, to generate my website using XML files (or later content coming from an XML database) as source for generating plain HMTL using an XSLT processor. Later (around year 2000) XHTML was introduced, which unfortunately was not widely accepted by most webdesigners and so HTML5 emerged giving you more flexibility and supporting – also due to better client side performance – easier dynamic DOM manipulation on the client side paving the way for single-page web-design massively using JavaScript and CSS. With all their pros and cons (this would require another book to explain in detail, so I will not try here) – but one con being perfomance issues in the mobile context under certain conditions.

Thus static site generation is still a valid solution to performance issues and used in the right way, definitely something one should take a look at – maybe this is something I will use in the future aswell for this blog.

I have spoken to Henrik Wirth – co-founder of the NeverNull startup and Gatsby enthusiast. Here is what he recommends (see the links below). But first some background for everyone who is interested in more details:

What is a headles CMS?

A headless CMS is a back-end only content management system (CMS). Its purpose is to serve content and make it accessible via an API (e.g. REST or GraphQL). Actually most “normal” CMS can also be used headles (e.g. WordPress) but there are also specialized CMS (e.g. Directus) that work “headless-only”.

What is a Static Site Generator?

A Static Site Generator (SSG) is a framework or setup, that helps you to generate static websites (HTML/CSS/JS). The source of your data can be anything from local files (e.g. text files or markdown) to APIs (e.g. REST, GraphQL). There are many static site generators written in all major languages out there (e.g. Nanoc, Hugo, Gatsby) supporting many different input sources such as markdown, xml or – as in this case – input via an API.

Why Gatsby and WordPress?

WordPress is one of the most often used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but also has the downside of having to make requests to the server and rendering depending on the response. This adds time to load. Gatsby instead, pre-renders the whole site at compile time and therefore the user gets a fully prepared static site on their first request, making it one of the best approaches for performance. Another huge benefit is security, as your WordPress instance can be anywhere, even locally and you don’t need to expose any of it to the user. The static Gatsby site therefore, is not hackable.

Henrik Wirth collected some information on pros and cons and also created a nice tutorial that explains how to get started with Gatsby and WordPress as CMS for your next cool website project. Check out the collected infos here.

Here you can find the tutorial: “Guide to Gatsby WordPress Starter Advanced with Previews, i18n and more by Henrik Wirth.”