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*

* as of December 13, 2019

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

Made with Slides.com