Build a website with Gatsby and Strapi - Introduction

May 7th, 2020 - ☕️ 4 min read

Imagine that you want to build a powerful and fast website. A website for your company for example, including a blog. What would you use? Wordpress? Laravel? Drupal?

Well, those are pretty good choices.

If we look at this chart of the most used CMS on the web (according to Wappalyzer), Wordpress is the most used CMS

most used CMS

And if we take a look at the most used web frameworks, we have a lot of things we can play with.

most used Web Framework

But what if we think differently?

I mean, the last time someone has done that, he created an apple that worth 1.3 trillion.

Well, in this tutorial we will learn to think differently.

Another way of managing data

If you take a look at the CMS charts, we see Wordpress and Drupal. And what do they have in common?

They both managing content of a front-end. For now, nothing new they are just random CMS.

The fact is that Wordpress and Drupal both have a Front and a Back-end.

The keywords for our project will be flexibility and power.

Here comes Headless CMS

A headless CMS is a CMS without a presentational layer. This is just a backend.

I will not explain to you in details what are headless CMS because it exists a lot of great article about it. You can check this one if you want.

Headless CMS is perfect for front-end developers because they allow a lot more flexibility in designing the UI.

I am not a front-end developer but when I was building my website I wanted something simple and powerful.

The data we will be building (articles and pages) will be accessible via an API. We will just have to fetch this data using an API query with GraphQL.

Which CMS should we use?

There is a lot of Headless CMS, Netlify, Ghost, Contentful, etc. But the CMS we will be using is called Strapi. Strapi is a new powerful headless CMS build in France.

You can check my article on my discovery of Gatsby and Strapi here

I've chosen Strapi because it is new and very easy to use.

Right, Now we have our headless CMS. But what is a website with just a backend?

We now need a way to build our front-end. And for that, it exists something called static site generator. Did you already hear about them?

Let's take a quick look to wappalyzer charts for most used Static site generator :

most used satin site generator

Take a look at the first result. It is called Gatsby and this is what we will use for this website.

I invite you to check the website of Gatsby to learn about this very powerful tool.

Gatsby is based on Javascript and more specifically it is a Reactjs based framework.

This is perfect for us, Reactjs will allow us to build a powerful web app (PWA → Progressive Web App). React js is also perfect for UX design. Again, I will not write a lot about react and I encouraged you to check other blog posts about react.

React also allows us to implement logic in the same file as the UI.

Now we know that we will use Gatsby and Strapi.

Deployment and production

When we will have build our website we will need to deploy it to be accessible on the web.

To do that, we will see how to deploy our CMS on Heroku and our website on Vercel (Formerly ZEIT) using Now servers.

For this series of tutorials, I will upload at least an article a week. We will see everything we need to get started with a simple website. Along with these articles, I will upload videos as soon as possible to complete it and to have a perfect look on this project.

Tutorials will be available on my website (mainly) and this account.

See you very soon and keep coding!

Thomas