Skip to content

Latest commit

 

History

History
106 lines (76 loc) · 2.97 KB

README.md

File metadata and controls

106 lines (76 loc) · 2.97 KB
Raw

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!