Sourcing from Kontent.ai
In this guide, you’ll go through how to quickly source content for your Gatsby site from Kontent.ai.
Kontent.ai is a hosted CMS that offers you Content as a Service (CaaS) for all your content needs. Using CaaS ensures that your content will be future-proof and reusable, so you can add a mobile app that uses the same content as your Gatsby site without worrying about how it will fit. Kontent.ai offers 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.
You can also take advantage of Kontent.ai ability to deliver content in multiple languages and create relationships among various content with linked items. However you structure your content in Kontent.ai, the source plugin will ensure the proper nodes are created for your Gatsby site.
Note: For this guide, you’ll work from scratch from the Gatsby default starter to get a feel for how sourcing from Kontent.ai works. If you’d like to look at an example of a complete basic site, have a look at the Kontent.ai Gatsby starter site, which includes working examples for querying content.
Setup
Kontent.ai
The first thing to do, if you haven’t already done so, is sign up for a Kontent.ai account. This will automatically start a free 30-day trial with all Kontent.ai features. At any point during the trial or after, you can switch to a Developer plan (which always starts as free) or a higher plan with more features.
Once you have a subscription to Kontent.ai, you need some content to retrieve. If you know what you want, you can set up your own content types (templates for your content) and then create content items (the actual content) based on them. If you’d like to take a shortcut and see some example content, you can use Sample Project generator to generate project “Sample Project” and import sample content. This guide will continue with the example of the “Sample Project”.
The created Sample Project is a comprehensive presentation of a fictional coffee company named Dancing Goat that showcases various Kontent.ai features. It can be displayed in various channels, as you can see by going to the Quickstart page in Kontent.ai from within that project.
For this guide, you don’t have to worry about most of the features. You’ll pull some data to display within the Gatsby site you’ll create in the next step. The only thing you need to get is your Project ID, which you can find in Kontent.ai under “Project settings” -> “API keys”.
Gatsby
Now that you have some content to pull, you can create a basic Gatsby site to display the content. Assuming you have the Gatsby CLI installed, create a new site and navigate to it in your terminal:
Next, install the Kontent.ai source plugin:
Once that’s done, you need to add the plugin to gatsby-config:
And that’s enough for you to be able to access content from Kontent.ai in your site. You can see this by starting Gatsby in development mode:
To see all the content that’s available from Kontent.ai, you can test out GraphQL queries in GraphiQL at http://localhost:8000/___graphql. The queries generated from Kontent.ai will be prefixed with kontentItem (for single nodes) or allKontentItem.
Using the plugin
Adding content to existing pages
To see how to put that data into your site, first go to http://localhost:8000/. Notice that the default title for the site is “Gatsby Default Starter”. You can change that by pulling the title for your site from Kontent.ai.
The title here is generated in the layout from the site metadata. By default, the Kontent.ai Sample Project has a single item named “Home” that is the only item of the Home type. So you can change the layout component to query the metadata of that item and then use that data to populate your title.
If you look at http://localhost:8000/, you’ll notice the title is now “Dancing Goat–Freshest coffee on the block!“. You can change this title in Kontent.ai to whatever you want and rerun gatsby develop to rebuild the site (see below about automatic builds).
So you’ve seen how to add content to existing pages in Gatsby using Kontent.ai. Next, you will start creating new pages of your own.
Creating new pages
It’s great to be able to add content to existing static pages, but one of the great benefits of using CaaS is being able to define pages in Kontent.ai and having them generated automatically. To see how, you’ll add pages based on content from the Sample Project in the Article type (feel free to explore how these are structured in Kontent.ai).
Start by making use of the URL pattern in the Article type to generate slugs for your Article nodes:
Now that you have a pretty way to define the path for your pages, you can create the pages programmatically:
Now create a basic template to display each article with a title and the body that you pull with a GraphQL query:
When you rerun gatsby develop, you’ll be able to see each article as a page with content pulled from Kontent.ai. To see a list of all pages, visit http://localhost:8000/asdf (or any other url that generates a 404).
The body copy for this article comes from a rich text element in Kontent.ai. Links and inline linked items (e.g., embedded videos) are not resolved by default for rich text elements. If you want to resolve them, you can query the required data in structured form for resolution and create your own React components. You could use Rich text element component that is a part of the @kontent-ai/gatsby-components package.
Since the Kontent.ai source plugin is defining the GraphQL schema for data from Kontent.ai, you could use this schema and extend it according to your needs. There are some examples of what you could do in your application.
Now you know how to create pages programmatically and pull their content from Kontent.ai. To get the most out of your CaaS, you’ll want to also make sure your site builds automatically whenever published content changes inside Kontent.ai.
Continuous deployment
To keep your site static but always up to date with the latest content from Kontent.ai, it helps to set up automatic deployment whenever your published content changes. Read the Gatsby Cloud instructions to learn more.
For automatic deployment from Netlify you’ll want to create a new build hook with a name like “Change in Kontent.ai content” and copy the URL. Then go to Kontent.ai. Under “Project settings”, choose “Webhooks” and create a new webhook. Give it a name like “Netlify build”, paste the URL into the “URL address” field and choose the events to trigger the webhook, you want to select just “DELIVERY API TRIGGERS” for content item events: “Publish” and “Unpublish”. And that’s it. Now whenever published content changes, your webhook will trigger a build in Netlify to ensure your static content is updated to the latest version.
What’s next?
You’ve seen how to set up a Gatsby site that sources content from Kontent.ai and is automatically redeployed on any change to the content. Kontent.ai is capable of creating many other kinds of relationships, including taxonomies for categorization, multiple languages, and linking items together. Want to do more?
- See more about what the Kontent.ai source plugin can do.
- Read the Kontent.ai documentation to see what’s possible.
- Explore the Kontent.ai Gatsby starter to see a sample site.