🌍 All

About us






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

Mateusz Wójcik

Feb 21, 20205 min read

Next.jsStrapiFront-end development

Table of Content

  • What are static site generators and headless CMSs?

  • How does the Content Management System (CMS) work?

  • Gatsby and Strapi CMS for building blazing fast websites

  • Our Gatsby and Strapi challenge

  • An example of a Gatsby and Strapi use

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:  

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

Published on February 21, 2020


Mateusz Wójcik JavaScript Developer

Don't miss a beat - subscribe to our newsletter
I agree to receive marketing communication from Startup House. Click for the details

You may also highlightlike...

14 accessibility hacks to make your users’ day better
AccessibilityUX designFront-end development

14 accessibility hacks to make your users’ day better

Accessibility in app development is often overlooked, but it plays a vital role in ensuring inclusivity and improving user experience for individuals with disabilities. With approximately one billion people worldwide experiencing some form of disability, it's crucial to consider accessibility as a necessary aspect of app design and development. By incorporating accessibility features from the beginning, you not only cater to a significant user base but also create a more user-friendly and inclusive app for everyone.

Maciek Kozłowski

Dec 02, 20197 min read

What Does a Test Written with Test-Driven Development Represent: Unpacking the Benefits and Pitfalls of TypeScript
Software developmentFront-end development

What Does a Test Written with Test-Driven Development Represent: Unpacking the Benefits and Pitfalls of TypeScript

TypeScript, an open-source language developed by Microsoft, offers numerous benefits for software developers, including static typing and reduced errors. However, it also comes with trade-offs to consider. This article explores TypeScript's advantages, its suitability for large projects, how it reduces errors, and its compatibility with JavaScript.

Marek Majdak

Jul 18, 20235 min read

What Does a Test Written With Test Driven Development Represent and Why Should I Use TypeScript?
Front-end developmentSoftware development

What Does a Test Written With Test Driven Development Represent and Why Should I Use TypeScript?

Test Driven Development (TDD) is an effective strategy in today's evolving programming landscape. Learn about TDD, its benefits, and how TypeScript—a powerful programming language—can be used for writing clean and reliable code.

Marek Majdak

Jul 24, 20235 min read

Let's talk
let's talk

Let's build

something together

highlightRethink your business, go digital.

Startup Development House sp. z o.o.

Aleje Jerozolimskie 81

Warsaw, 02-001

VAT-ID: PL5213739631

KRS: 0000624654

REGON: 364787848

Contact us

Follow us


Copyright © 2024 Startup Development House sp. z o.o.

EU ProjectsPrivacy policy