Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

The Storyblok Gatsby Ultimate Tutorial

Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.


On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

The Storyblok Gatsby.js Ultimate Tutorial

Section titled Welcome to the Ultimate Tutorial Series for Gatsby! Welcome to the Ultimate Tutorial Series for Gatsby!

In this tutorial series, you will learn how to build a full-blown, multilingual website using Storyblok and Gatsby from scratch. We will start with the basic integration of Storyblok and Gatsby. Taking one small step at a time, we will then gradually add more and more functionalities, such as dynamic page rendering, dynamic menus, custom components, and much more. After having followed this tutorial, you will not only be very well-versed in Storyblok, but you will also have created a complete multilingual website built on Gatsby.

This tutorial series aims to provide you with bite-sized, easy-to-follow content, live demos, and in-depth coverage of everything you need to become a master of modern web development using Storyblok and Gatsby.

Are you ready to get started?

  1. Add a headless CMS to Gatsby in 5 minutes
  2. Render Storyblok Stories Dynamically in Gatsby
  3. Create Dynamic Menus in Storyblok and Gatsby
  4. Create Custom Components in Storyblok and Gatsby
  5. Create and Render Blog Articles in Storyblok and Gatsby
  6. Manage Multilingual Content in Storyblok and Gatsby (This tutorial uses folder-level translation without File System Route API from Gatsby)


Arisa Fukuzaki

Arisa Fukuzaki

Arisa is a front-end engineer with a passion for front-end technologies and programming education. She is from Germany, the Stuttgart area, and works as a Senior Developer Relations Engineer at Storyblok. She is also a GirlCode ambassador, GirlCode Coffee Chat live streaming co-host, Google Developer Expert (GDE), and speaker at several tech conferences.

Patrick Odey

Patrick Odey

Patrick is a Software Engineer with a passion for web technologies, Cloud computing and community building. He is from Nigeria and works as a Developer Relations Engineer at Storyblok. He is also a skateboarder.