🌟 Help others discover us, star our GitHub repo! 🌟

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.

Stylized Gatsby logo

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.

Stylized Webiny logo

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
Copy
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

featured post

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
Caleb Olojo

Other Integrations

Webiny also supports other frontend technologies.

Next logo

Next.js

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

Discover more →
React logo

React

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

Discover more →
Vue logo

Vue.js

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

Discover more →
Flutter logo

Flutter

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
Webiny Chat

Find us on Slack

Webiny Community Slack