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/