Why do we love using Gatsby and Strapi for building websites?

Static site generators (SSG) and headless content management systems (CMS) have been blowing up lately. They allow creating fast, performant and easy-to-manage websites. Moreover, the final product makes it extremely easy to edit its content, so it's a great choice for blogs or landing pages, where it's crucial to be able to edit content whenever we want. That's why we wanted to try out Gatsby and Strapi together.

What are static site generators and headless CMSs?

So what exactly is a static site? It's a few HTML files with fixed content, which are the same for every user. We don't need a database and we don't need any available backend. We also don't need to render the website using JavaScript each time someone is connecting to our server, so it's a quick and sufficient solution.

Unfortunately, our page will have fixed content, so there is no easy way to change a given part of the website. If that is the case, we have to delegate that task to developers, so each time we want to change something, we lose a little bit of time.

How does the Content Management System (CMS) work?

We can fix that issue using a Content Management System (CMS). It gives us the ability to take any part of an HTML website and "connect” it to an admin dashboard provided by the CMS. Then, we can change that part of the website by using a built-in rich text editor or upload a photo, like on any social media. Quick and convenient! 

A huge disadvantage of classic CMSs is that besides a dashboard to manage content, they also give us a front-end solution, so we can't be as flexible as we want. If we want to have full control over technologies in our project, we should take a look at a headless CMS. It's different from a standard CMS because, in the headless version, we only get an admin dashboard, so that we can choose any front-end we would like, to which we provide data via REST or GraphQL API.

Now it's time to connect both things, which we can achieve by using a static site generator. It takes an HTML template and data from the CMS and merges them, creating static HTML files. We get profits from a static site, as well as a CMS: our websites are quick, and we can manage the content on them. We have to remember that after each change in the CMS, we have to create static files all over again. But of course, there are a lot of tools that can help us with that.

Gatsby and Strapi CMS for building blazing fast websites

Now that we know what headless CMSs and static site generators are, it's time to discuss why we at Startup Development House have chosen Gatsby and Strapi over any other solution.

Why Gatsby?

Gatsby is based on React, so it was an obvious choice for us, as we use React daily. Gatsby is advertised as "Fast in every way that matters", and we wanted to check if that is the case. In theory, it should be because Gatsby comes in a package with many great solutions. It has built-in lazy loading and can display images matching our current screen so that we won't download huge images for the mobile viewport. It also works with any CMS we would choose.

Why Strapi?

Strapi is built using Node.js, so we stay in the Javascript ecosystem. It comes with a great-looking, modern and easy-to-use UI, you can host it basically anywhere, and you can use any database you want. There are many content types, so we can create a website, in which every part will be editable directly from the CMS.

Both technologies are open-sourced and extremely popular in developer communities (over 21k Github stars for Strapi and twice as much for Gatsby).

Given that we wanted a solution that will be swift, for both development and usage, will be flexible and customizable, actively maintained and supported and will be easy for our clients to use, we’ve decided to choose Gatsby and Strapi.

Our Gatsby and Strapi challenge

Lately, we have been working on one of our internal projects, and we wanted to build a landing page for it. We decided that it was a great chance to try out Gatsby and Strapi. Both of these technologies met our criteria because we wanted something that will be swift for both the product development and production and all of the content can be editable by non-developers.

An example of a Gatsby and Strapi use

After we’ve discussed what stack to use, we could take on that challenge.

First, we started with creating a basic Gatsby project. Thanks to its vast community, there are a lot of starter kits already prepared, so we could choose one that is most suitable for this particular project. When we were done with the setup, we could move on to coding.

Coding with Gatsby

Most of the time, coding in Gatsby is very similar to React. It also helps that all React packages are available for Gatsby. At our company, we really like Styled Components, so we’ve decided to use them as well. Thanks to its component-based approach, we could create manageable styles for the whole app.

Managing content with Strapi

After coding the front-end, we moved on to Strapi. Strapi provides CLI tools to generate basic projects quickly, so the setup was painless and took a short time. After that, we defined all fields we would like to be editable from the dashboard in the admin panel — hero claim, images, descriptions, links for buttons, etc. and then we filled it in with content.

With all that in place, it was time to connect the static front-end with the content from CMS. Both Strapi and Gatsby use GraphQL, so we can fetch only the data we actually need, so it helps a bit with performance.

Checking the integration

There is only one last thing to do before we can successfully deploy our app. We have to make sure that after each change in the CMS, the Gatsby front will be generated again, based on new content from Strapi. To do that, we can use any continuous integration tool. In this project, we’ve used CircleCI, and the whole flow works as follows:

Someone makes change in Strapi,

Strapi sends information about that to CircleCI: "Hey, there were some changes in content, have a look at that!"

CircleCI takes that information and runs a build command to fetch new data and insert it in Gatsby templates,

After the build is successful, CircleCI deploys a new version of the app.

And that's it! Thanks to all of these great tools, we can prepare a landing page or blog, which will be fast, responsive, and where changes in the content won't require developers. Gatsby and Strapi definitely met our expectations, so we will be more than happy to use them in the future!

Do you want to build your project in Gatsby and Strapi? Contact us: hello@start-up.house