Evolving the Headless CMS with Kontent.ai and Gatsby

Ondrej Chrastina
Ondrej Chrastina
March 2nd, 2022

Editor’s Note: This is a guest blog post by Ondřej Chrastina, a Developer Relations leader at Kontent.ai. This post was updated in Jan 2023.

 

Over the last few years, the Headless CMS market has seen significant growth. At Kontent.ai, we’ve seen the potential of the Headless CMS approach and have worked tirelessly over the last six years to fulfill our vision of what an ideal Headless CMS platform should be. 

 

Kontent.ai is a headless CMS platform for enterprises, and provides developers the flexibility to design digital experiences for any channel with an API-driven approach that integrates seamlessly with your existing tech stack. Kontent.ai helps you leverage Gatsby easily and quickly.

 

Kontent.ai and Gatsby

Gatsby has always focused on being easy to set up and pin up for developers, and we’ve taken that same approach with Kontent.ai. To that end we make configuration and setup painless and straightforward for developers.

Kontent.ai is a headless CMS that offers you Content as a Service (CaaS) for all your content needs. Kontent.ai provides CaaS with an easy-to-use editing interface and excellent collaboration features, so all your work on content can happen in one place without requiring technical help for each user.

 

The first class source plugin that allows you to consume the data from Kontent.ai delivery REST API is fully compatible with Gatsby Cloud incremental preview. With Kontent.ai addon – Web Spotlight and Gatsby incremental preview, you can leverage onsite editing experience of your Gatsby site right in the Kontent.ai UI. Source plugin also allows to not just fetch the content itself, but also a meta information about the model, like taxonomy. And with the new experimental features you can trigger your site rebuild by workflow step change, or shorten the build times by reducing the size of Gatsby model.

 

Kontent.ai at GatsbyConf: The Takeaway 

We hope Gatsby developers walk away from our session at GatsbyConf 2022 with a better understanding of how seamlessly Kontentworks with Gatsby, including our support for such noteworthy Gatsby features as Deferred Static Generation (DSG) and Server-Side Rendering (SSR). More specifically, we’ll showcase how Kontent.ai and Gatsby can simplify supporting multiple languages on your Gatsby-powered site, and explore some of the more advanced approaches to multilingual support.

 

In addition, we’ll show how you can take advantage of more advanced features in that context. For example, support for Gatsby’s DSG has helped our customers see increased build and hosting performance. 

 

We also recently released a new GraphQL API that makes sourcing content even easier.  The API is used to provide specific content to your website. Since the API responses are cached at the CDN level, content is provided more quickly to wherever it is needed.  

 

Kontent.ai at GatsbyConf: The Talk

 

Talk: Building Advanced Multilingual Landing Pages with Gatsby and Kontent.ai

Time: March 3rd, 12:00 PM MST – 2:00PM MST

 

You’ve tried Gatsby and know how it works, but are you up-to-date with it’s new features? In this workshop, you’ll build a new Gatsby site that fetches content from Kontent.ai, implement advanced rich text resolution with multilingual content, set up pages for both static and deferred rendering, and enable visual live-site editing for non-technical users with SSR.

 

What you will learn:

  • How to set up Gatsby project
  • How to connect it to Kontent.ai
  • How to handle advanced cases for rich text resolution
  • How to handle multilingual use-cases (e.g. missing content in another language)
  • How to configure static, DSG, and SSR
  • How to enable editors work on their content in visual context of the website

Prerequisites:

  • Have a VS Code or another editor installed and available
  • Ideally, sign up for a free trial of Kontent.ai (not required, but advised)

What should you bring: A glass of your favorite drink to celebrate the end result!

 

Kontent.ai + Gatsby Developer Resources

 

To help you get your Kontent.ai and Gatsby project up to speed quickly, here’s a list of available resources that should be helpful. 

 

Gatsby + Kontent.ai Solution Page

https://kontent.ai/technologies/gatsby-cms/

 

Gatsby + Kontent.ai Integration page

https://kontent.ai/integrations/gatsby/ 

 

Kontent.ai Gatsby Packages

https://github.com/kontent-ai/gatsby-packages

Monorepo with Gatsby Kontent.ai packages includes the source plugin providing data from Kontent.ai delivery REST API and components package that helps you with the rich text resolution and image processing. Moreover you can browse the examples that will help you to start with Kontent.ai and Gatsby. Developers can also contribute and explore the repository via embedded development site hooked right into the source code and components source code.

 

Gatsby: Sourcing From Kontent.ai

https://www.gatsbyjs.com/docs/sourcing-from-kentico-kontent/

 

Gatsby Cloud & Kontent.ai
https://support.gatsbyjs.com/hc/en-us/articles/360052324654-Connecting-to-Kontent 

 

Gatsby: Using Gatsby with Kontent.ai
https://www.gatsbyjs.com/guides/kentico-kontent/ 

 

Gatsby & Kontent.ai starter project
https://github.com/kontent-ai/gatsby-starter 

 

Gatsby & Kontent.ai docs
https://kontent.ai/learn/tutorials/develop-apps/optimize-your-app/static-sites/?tech=react#a-leverage-graphql-with-gatsby 

 

Web Spotlight by Kontent

https://webspotlight.kontent.ai/

 

GraphQL API

https://kontent.ai/learn/reference/delivery-graphql-api/

 

 

Ondrej Chrastina

Ondrej Chrastina is a Developer Relations Leader at Kentico.

Follow Ondrej Chrastina on Twitter

Talk to our team of Gatsby Experts to supercharge your website performance.