Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby Starter Blog Storyblok

This is the example integration of gatsby-starter-blog and Storyblok. I assume you know some Storyblok basics.

0. Prerequisites

Create a space

First of all, create a space on Storyblok for this project (if not, there’s no contents to be shown!).

Define a schema

Next, define a data schema. In this repo assumes following data (component, field,…) can be fetched from Storyblok API.

  • /blog (folder)
    • slug: ‘blog’
    • real_path: ”
    • content_type: blogpost
      • title (text)
      • image (image)
      • intro (text)
      • long_text (markdown)
  • settings (entry)
    • slug: ‘settings’
    • real_path: ”
    • content_type: settings
      • site_title (text)
      • site_img (image)
      • site_description (text)
  • bio (entry)
    • slug: ‘bio’
    • real_path: ”
    • content_type: bio
      • bio_img (image)
      • bio_msg (markdown)
      • bio_name (text)


By default, real_path property of an entry (or folder) is disabled in settings panel. Please install Advanced Paths App on Storyblok to make it configurable:

If you have done, your Content page will be like this:

Create contents

Create your contents.

Get an API key

Get API key as written on this article and paste it on gatsby-config.js:

module.exports = {
  plugins: [
      resolve: "gatsby-source-storyblok",
      options: {
        accessToken: process.env.STORYBLOK_ACCESS_TOKEN, // <- set your own
        homeSlug: "home",
        version: process.env.NODE_ENV === "production" ? "published" : "draft",

1. Installation

Download and init this project:

gatsby new my-site https://kenchon.github.com/gatsby-starter-blog-storyblok
yarn # or `npm install`

2. Start dev server

yarn dev # or `npm run dev`

If you have finished 0. Prerequisites properly, GraphQL fetch the stored contents and create static pages for you. For example, if you made blogpost whose slug is my-first-post, /my-first-post/index.html is created when onCreatePage API (which is defined at gatsby-node.js) is called.

Go to localhost:8000/ and you’ll find your contents are there!

3. Using Visual Editor

Go to your first blogpost page on Storyblok GUI (e.g. Content > /blog > my-first-post) and you’ll find something like this:

In your blogpost page, following editable comopnents are shown:

  • <Header />
  • <BlogPage />
  • <Bio>

Click them and edit the contents!

© 2023 Gatsby, Inc.