Implementing new ideas into reality is always hard. But as it is with the creation of every product, not only software projects, correctly selected tools can make this road much smoother. Let&rs...
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?
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.
But we can fix that issue using a Content Management System (CMS). It gives us the ability to take any part of a 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 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 together, which we can achieve by using a static site generator. It takes an HTML template and data from the CMS and merges them together, creating static HTML files. We get profits from a static site, as well as aCMS: our websites are quick and we can manage the content on them. We have to keep in mind 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.
Gatsby is based on React, so it was an obvious choice for us, as we use React on a daily basis. 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 we won't download huge images for mobile viewport. It also works with any CMS we would choose.
Given that we wanted a solution which will be swift, for both development and usage, will be flexible and customisable, actively maintained and supported and will be easy for our clients to use, we’ve decided to choose Gatsby and Strapi.
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 development and production, and all of the content can be editable by non-developers.
Example of 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 huge 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.
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.
After coding the front-end, we moved on to Strapi. Strapi provides CLI tools to quickly generate basic projects, so the setup was painless and took 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.
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 future!
Do you want to build your project in Gatsby and Strapi? Contact us: email@example.com