Editor’s Note: This is a guest blog post by Arisa Fukuzaki, Developer Relations Engineer at Storyblok.
At GatsbyConf 2002, I’ll be working with other members of the Storyblok team to discuss how Gatsby developers can get the most out of using the Storyblok headless CMS. In addition to the talk and the workshop we’re presenting at the conference – both of which you can find information about at the end of this post – I’ve also included links to many resources that help you and your organization get the most out of your Gatsby + Storyblok investment.
Improving the Headless CMS Experience for Developers
My main focus as a Developer Relations Engineer at Storyblok is to improve the experience that developers have with the Storyblok CMS and the Gatsby Framework. To that end I’ve personally given many talks about the Jamstack, Gatsby, and Storyblok. We’ve also created many tools and resources to improve the developer experience, including an SDK for developers and other tools.
Advantages of a Headless CMS Approach
Before I get into more specifics about using Gatsby with Storyblok, it’s useful to discuss the many advantages that a Headless CMS platform can bring to your web development project. Here are a few:
- Enhanced Security: Using a Headless CMS like Storyblok with a frontend framework like Gatsby allows you to separate your CMS interface from your backend, which provides an additional layer of security.
- Development Flexibility: Finding full-stack developers isn’t always easy or convenient, and a headless approach also allows you to choose the best web development technologies for your particular use case. Choose from among the best libraries, frameworks, and Headless CMS platforms that work best for you, your team, and your environment.
- Enterprise Scale: A Headless CMS solution also scales better than an integrated, full-stack approach. Scaling very large sites with a full-stack solution can be challenging for developers, and Headless CMS adoption allows you to utilize best-of-breed solutions that can grow and scale as the demands of your project increases.
Better Together: Gatsby and Storyblok
In my GatsbyConf presentation (which you can watch live, or in recorded form after GatsbyConf) I’ll show you how you will be able to build the most developer- friendly Jamstack CMS approach with Gatsby. In addition to the Gatsby Framework—already one of the best solutions for building blazing-fast websites—Gatsby also offers the Gatsby Cloud hosting service. Gatsby may have started out being optimal mainly for generating static pages, but it has expanded over time to support three different ways of serving content—Static Site Generation (SSG), Deferred Static Generation (DSG), and Server-Side Rendering (SSR)—allowing developers to choose the best page rendering most for their particular use case.
The Storyblok CMS provides a lot of advantages to Gatsby developers, including a polished visual editor (developed with a component-based approach) and a Gatsby source plug-in (gatsby-source-storyblok) that enables Gatsby image and takes advantage of the inherent image-processing prowess of Gatsby.
We’ve also updated our SDK that gives you the tools to add Storyblok to your Gatsby projects. We’re also looking at more enhancements to our SDK to make it even easier to use, including reducing the number of required packages (from 3 to 1). I’ll cover these improvements in my Leveling Up In Jamstack with Gatsby & Storyblok GatsbyConf talk.
More Gatsby + Storyblok Resources
In order to help you make your next Gatsby + Storyblok project a success, I’ve included links to many of the developer tools and resources we have available, ranging from case studies and technical information to tutorials, starters, code samples and more.
I hope you’ll join me and my colleagues at GatsbyConf 2022 (see session details below), and you can also reach out to me on Twitter at @arisa_dev. See you at GatsbyConf!
Storyblok at GatsbyConf
Talk: Leveling Up In Jamstack with Gatsby & Storyblok
Time: March 2nd, 11:35 AM MST – 11:55 AM MST
Discover the future of the Jamstack and join the revolution in visual editing with Storyblok and Gatsby. The powerful combination of Gatsby.js and Storyblok empowers your content creators & marketers to experiment with content without fear. You’ll learn how to develop a blazing fast project using the real-time visual editor & component-based approach in no time. Long live Jamstack!
What you’ll learn:
- Real-time visual editing experience in Gatsby & headless CMS
- Easier content editing Jamstack environment for content editors and marketers
- Component-based approach
Workshop: Jamstack Crash Course Using Gatsby & Storyblok
Time: March 3rd, 10:00 AM MST – 12:00 PM MST
You know about the Jamstack. You probably already used Gatsby, and recently you may hear a lot about headless CMS platforms. In this crash course, Arisa and Facundo will put all the pieces together, and show you why Storyblok in combination with Gatsby is the best combo for your next project. Stop by and try it yourself!
What You Will Learn:
- Blazing fast Jamstack approach that works for everyone
- Gatsby with Storyblok integration
- Graduates of this course will learn to look differently at the project from the whole start and will be able to build their first Jamstack website with Gatsby at the end.
Prerequisites:
- Node.js installed, GitHub account
- Brief familiarity with React.js & Gatsby and optionally Git.
Gatsby + Storyblok Case Studies
Built by our agency partner Bejamas:
- Armorbox (Cybersecurity): https://www.storyblok.com/cs/armorblox
- Avenues: The World School (Education): https://www.storyblok.com/cs/avenues-the-world-school
- Emerging Dynamics (Security) https://www.storyblok.com/cs/emdyn
Other case studies:
- Leeds United Supporters’ Trust (NPO/NGO): https://www.storyblok.com/cs/lufctrust
- Giggles Nurseries (Education): https://www.storyblok.com/cs/giggles-nurseries
Storyblok + Gatsby Roadmaps and Perks
- Gatsby.js technology hub page: https://www.storyblok.com/tc/gatsbyjs
- Storyblok V2 beta roadmap: https://www.storyblok.com/v2
- GatsbyConf special perk (paid plan (Teams plan: Includes Shopify extension app and more) will be free for 3 months from this link. No indexed page.): https://www.storyblok.com/a/gatsbyconf-2022-perk
Resources for getting started with Gatsby.js and Storyblok
- Quick starter (Codesandbox): https://www.storyblok.com/docs/guide/getting-started#gatsbyjs-example
- 5 min Gatsby.js & Storyblok tutorial: https://www.storyblok.com/tp/add-a-headless-cms-to-gatsby-5-minutes
- Multi-language tutorial (Gatsby.js & Storyblok): https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial