Gatsby Starter Kontent.ai

Gatsby Starter Kontent.ai is a deprecated Gatsby starter site that pairs a static blog with the Kontent.ai headless CMS via the @kontent-ai/gatsby-source plugin. The starter builds a list of articles for a fictional coffee shop called Dancing Goat, fetched from a Kontent.ai Sample Project. It is open-source and published by Kontent.ai, but is no longer maintained.

What is Gatsby Starter Kontent.ai?

This is a Gatsby starter site pre-configured with the Kontent.ai source plugin. It takes content from a Kontent.ai project (specifically the Sample Project) and builds a static site showing a list of articles. The starter runs on Node.js with NPM and uses Gatsby CLI to scaffold the project. It is published by Kontent.ai and carries a deprecation notice stating it is no longer maintained.

Key Features

• Kontent.ai integration — Uses the @kontent-ai/gatsby-source plugin to pull content items and types from Kontent.ai into the Gatsby data layer.
• Gatsby CLI setup — gatsby new clones the repo and runs npm install, which creates a .env file from .env.template automatically via a prepare npm script.
• Environment variable configuration — Supports KONTENT_PROJECT_ID and KONTENT_LANGUAGE_CODENAMES to connect to a Kontent.ai project and manage multilingual content.
• Preview API support — Set KONTENT_PREVIEW_KEY and KONTENT_PREVIEW_ENABLED=true to load unpublished content.
• Local development with GraphiQL — Running npm run develop serves the site at localhost:8000 and exposes GraphQL queries at localhost:8000/___graphql.
• VS Code debugging — Includes a .vscode/launch.json configuration for debugging in Visual Studio Code.
• Netlify deployment ready — The repository includes a Netlify status badge and a live demo link, indicating it can be deployed to Netlify.

Who is it for?

• Gatsby developers who want a starting point for building a blog or article site connected to Kontent.ai.
• Kontent.ai users learning how to integrate the CMS with Gatsby, using the Sample Project content for experimentation.
• Teams evaluating headless CMS setups that need a reference implementation of a static site pulling both published and unpublished content via the Preview API.

What can you do with it?

• Content editors can manage articles in Kontent.ai and have them appear in the static Gatsby site after a build.
• Developers can experiment with GraphQL queries against the Gatsby data layer using the built-in GraphiQL interface.
• Localization testers can set up multiple language codenames and explore how the source plugin handles non-default languages, even though the starter only displays the default language.

How does it work?

1. Install prerequisite Node.js with NPM and the Gatsby CLI.
2. Clone the repo or run gatsby new with the starter URL.
3. Configure environment variables in .env with your Kontent.ai Project ID and language codenames.
4. Run npm run develop to build static pages and start the local server.

Pros and cons

• Pros: Simple, official starter from Kontent.ai; automatic .env creation; GraphiQL for query debugging; Preview API support.
• Cons: Deprecated and no longer maintained; only displays content items in the default language; requires a Kontent.ai project (or the Sample Project) to be functional.

FAQ

Is this starter site free?

Yes, the starter code is an open-source GitHub repository and is free to use. The associated Kontent.ai CMS has its own pricing model, but the starter itself is free.

What does this starter do?

It creates a Gatsby site that fetches articles from Kontent.ai using the @kontent-ai/gatsby-source plugin. The site renders a list of articles from the Dancing Goat coffee shop sample content.

How do I connect my own Kontent.ai project?

Copy the .env.template to .env, then set KONTENT_PROJECT_ID from Project Settings → API keys, and list language codenames in KONTENT_LANGUAGE_CODENAMES.

Can I retrieve unpublished content?

Yes, set KONTENT_PREVIEW_KEY to a Preview API key and KONTENT_PREVIEW_ENABLED to true in the .env file.

Is the starter still updated?

No, the repository carries a deprecation notice saying it is no longer maintained. You may still use it, but you should expect no future updates.