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)

📖 NOTE

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!