Gatsby Meets Storyblok

What is Gatsby?

• Framework for building FAST static sites
• Built on React and GraphQL
• Can use the full interactive power of React
• Can pull data from multiple sources of any kind
• Easy to deploy to many free hosting services

What is Storyblok?

• Headless CMS
• Completely API-based
• Front End agnostic
• Only headless CMS with a visual editor*

Why Storyblok?

• Visual editor for real-time preview for content editors
• Build “root” content for pages and additional content types for use anywhere
• Feature-rich image service for responsive-friendly imagery
• Generous free tier for testing development (or even hosting a small live site)
• Incredibly flexible due to the component architecture

Working with Gatsby

• Use Storyblok source plugin during build to get content
• Storyblok Components can map 1:1 to React Components
• Template and Component files to support different page types
• Mix Storyblok content types with your other sources through GraphQL queries

Usage at Spork Bytes

• Data from our REST API populates Gatsby GraphQL nodes
• Storyblok root content is used to create standard pages and blog posts
• Other Storyblok content can be queried alongside our API data to build custom pages such as “The Restaurants” page or partner landing pages
• Used Storyblok content to build part of our Get Started form

Downsides

• No support for Gatsby Image processing of Storyblok images in deeply nested component structures.  See gatsby-storyblok-image for how to handle one-off images.
• That’s all I can think of…it’s seriously a great CMS

Example Pages

• Spork Bytes Homepage - HomePage root content type.  Fully-managed Storyblok content mixed with REST API data.
• Blog Post - BlogPost root content type.  The post is managed in Storyblok and "See more of our blog" is dynamically built per-post from Storyblok BlogPosts.
• Contact Page and Services Page - Page root content type.  100% Storyblok-driven main area content.
• The Restaurants Page - Gatsby-specific page.  No Storyblok content; all REST API data.
• Partner Landing Page - Gatsby template built with Storyblok content through GraphQL query per-partner.

Resources

• Gatsby Storyblok Boilerplate - official Storyblok maintained boilerplate
• Gatsby Storyblok Tutorial - includes details on how to make your site multi-lingual
• Storyblok Image library - Spork Bytes-built library for transforming images from Storyblok with their Image Service