Mobile Menu

Integrate Gatsby with Webiny 

Headless CMS

Building a dynamic, content-heavy site with Gatsby and Webiny is easy to 

build, simple to use, secure and scalable.

Why Gatsby?

The world's top-performing teams use Gatsby to deliver dynamic web pages with performance and security that scales.

Build a fast, secure, and powerful website using a React-based open-source framework and integrate different content, APIs, and services seamlessly into one experience.

Why Webiny?

Webiny Headless CMS contains everything an enterprise needs to build, manage and deliver content at scale.

Webiny doesn't just manage your content, it also allows you to manage all of your projects centrally using built-in internationalization and multi-site features, and use advanced processes that support organization-wide collaboration.

Gatsby + Webiny integration

You can easily build a dynamic, content-heavy site with Gatsby and use Webiny to decouple engineering needs from your marketing team using a highly-scalable, fault-tolerant Serverless service that scales in and out in seconds. Use a single Webiny instance to manage content for an unlimited number of websites. All under one tenant in your own security perimeter.

Gatsby Benefits

Combines static-site generation, deferred static generation, and intelligent page rendering.

Unified data layer that enables developers to easily combine data from different sources and render them alongside each other.

Deploy and host on Content Delivery Networks, delivering content to visitors faster than traditional servers.

Statically generated sites have fewer vulnerabilities than traditional websites and monolithic platforms.

Webiny Headless CMS Benefits 

Keep your data in your cloud, under your own security perimeter.

Unlock greater performance by storing and delivering content closer to your users.

Webiny runs on highly-scalable fault-tolerant serverless services that scale in and out in seconds.

Marketing teams have full control to create and manage content, landing pages, files, and forms across multiple web properties.

Webiny is open source, released under an MIT license, and architected for extensibility.

Building a Frontend With Gatsby

Learn how to build a frontend for Webiny Headless CMS with Gatsby starter.

Step 1

Install and Deploy Webiny

Skip this step if you already have Webiny installed and deployed. Be sure to check out the prerequisites for installing Webiny on your local machine.

Then, create a new Webiny project by running the following command. If you get stuck or for more details, please see our documentation.

npx create-webiny-project my-webiny-project
Step 2

Create a new Gatsby site

Click on the button to deploy the project to Vercel. Or follow the link to full instructions if you want to start locally.

Full instructions →

One click Gatsby install button

Check out these tutorials on using

Webiny + Gatsby on our blog

Build a Blog with Gatsby and Webiny Headless CMS

In this tutorial, we will build a blog site with Gatsby and Webiny Headless CMS. We will look at how to set up Webiny and consume that data in a Gatsby project.

Caleb Olojo

Working on a larger project that requires a Headless CMS?

Book a demo

Other Integrations

Webiny also supports other frontend technologies.

Next.js logo


Next.js is a React framework that lets you build hybrid static and server rendered applications.

Discover more →
React logo


A declarative, component-based JavaScript library for building user interfaces.

Discover more →
Vue.js logo


Vue.js is an approachable, performant and versatile framework for building web user interfaces.

Discover more →
Flutter logo


Build apps for any screen with Flutter. Compiles to mobile, web, desktop and JavaScript runtimes.

Discover more →
By using this website you agree to our privacy policy