Sourcing from Kentico Cloud

In this guide, you’ll go through how to quickly source content for your Gatsby site from Kentico Cloud.

Kentico Cloud 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. Kentico Cloud 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 Kentico Cloud’s ability to deliver content in multiple languages and create relationships among various content with linked items. However you structure your content in Kentico Cloud, 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 Kentico Cloud works. If you’d like to look at an example of a complete basic site, have a look at the Kentico Cloud Gatsby starter site, which includes worked examples for querying content.

Setup

Kentico Cloud

The first thing to do, if you haven’t already done so, is sign up for a Kentico Cloud account. This will automatically start a free 30-day trial with all Kentico Cloud features. At any point during the trial or after, you can switch to a Starter plan (which always starts as free) or a higher plan with more features.

Once you have a subscription to Kentico Cloud, 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 our Sample Project generator to create 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 Kentico Cloud features. It can be displayed in various channels, as you can see by going to the Quickstart page in Kentico Cloud from within that project.

For this guide, you don’t have to worry about most of the features. You’ll just pull some data to display within the Gatsby site you’ll create in the next step. The only thing you need to continue is your Project ID, which you can find in Kentico Cloud under Project settings -> API keys.

Gatsby

Adding content to existing pages

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:

gatsby new kentico-cloud-guide
cd kentico-cloud-guide

Next, install the Kentico Cloud source plugin:

npm install --save gatsby-source-kentico-cloud

Once that’s done, you need to add the plugin to gatsby-config.js:

module.exports = {
  siteMetadata: {
   ...
  },
  plugins: [
    {
      resolve: `gatsby-source-kentico-cloud`,
        options: {
          deliveryClientConfig: {
            projectId: `<YourProjectID>` // Fill in your Project ID
          },
          // Please note that with the Sample Project generated above, `en-US` is the default language for the project and this config. For a blank project, this needs to be `default`.
          languageCodenames: [
                    `en-US` // Or the languages in your project (Project settings -> Localization)
          ]
      }
    },
    ...

And that’s enough for you to be able to access content from Kentico Cloud in your site. You can see this by starting Gatsby in development mode:

gatsby develop

To see all the content that’s available from Kentico Cloud, you can test out GraphQL queries in GraphiQL at http://localhost:8000/___graphql. Nodes from Kentico Cloud will be prefixed with kenticoCloud (for single nodes) or allKenticoCloud (for all examples of a given type). Then each node has Item or Type, depending on what it is, and lastly you can add the codename of a specific type you are looking for. Feel free to explore the responses in GraphiQL.

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 Kentico Cloud.

The title here is generated in the layout from the site metadata. By default, the Kentico Cloud 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.

src/components/layout.js

...
const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query {
        kenticoCloudItemHome {
          elements {
            metadata__meta_title {
              value
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <Header siteTitle={data.kenticoCloudItemHome.elements.metadata__meta_title.value} />
...

If you look at http://localhost:8000/, you’ll notice the title is now “Dancing Goat–Freshest coffee on the block!“. You can easily change this title in Kentico Cloud 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 Kentico Cloud. 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 Kentico Cloud 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 Kentico Cloud).

Start by making use of the URL pattern in the Article type to generate slugs for your Article nodes:

gatsby-node.js

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
  if (node.internal.type === `KenticoCloudItemArticle`) {
    createNodeField({
      node,
      name: `slug`,
      value: node.elements.url_pattern.value,
    })
  }
}

Now that you have a pretty way to define the path for your pages, you can create the pages programmatically:

gatsby-node.js

const path = require(`path`);

exports.onCreateNode ... // As above

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions;

    return new Promise((resolve, reject) => {
      graphql(`
      {
        allKenticoCloudItemArticle {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
      `).then(result => {
        result.data.allKenticoCloudItemArticle.edges.forEach(({ node }) => {
            console.log(node.fields.slug);
            createPage({
                path: node.fields.slug,
                component: path.resolve(`src/templates/article.js`),
                context: {
                    slug: node.fields.slug,
                }
            })
        });
        resolve();
    });
  });
}

Now create a basic template to display each article with a title and the body that you pull with a GraphQL query:

src/templates/article.js

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

const Article = ({ data }) => {
  const item = data.kenticoCloudItemArticle.elements

  return (
    <Layout>
      <h1>{item.title.value}</h1>
      <div dangerouslySetInnerHTML={{ __html: item.body_copy.value }} />
    </Layout>
  )
}

export default Article

export const query = graphql`
  query articleQuery($slug: String!) {
    kenticoCloudItemArticle(fields: { slug: { eq: $slug } }) {
      fields {
        slug
      }
      elements {
        body_copy {
          value
        }
        title {
          value
        }
      }
    }
  }
`

When you rerun gatsby develop, you’ll be able to see each article as a page with content pulled from Kentico Cloud. 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 Kentico Cloud. 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 use the embedded JS SDK resolution or query the required data in structured form for resolution and create your own React components for inline content items, links, and images.

Now you know how to create pages programmatically and pull their content from Kentico Cloud. To get the most out of your CaaS, you’ll want to also make sure your site builds automatically whenever published content changes inside Kentico Cloud.

Continuous deployment

To keep your site static but always up to date with the latest content from Kentico Cloud, it helps to set up automatic deployment whenever your published content changes. Here, you can see how to set that up using Netlify, but the principle is similar using other services like Travis CI, as with another site sourced from Kentico Cloud.

For simple automatic deployment from Netlify, first store your site’s source code in a Git provider such as GitHub. Then log in to Netlify (e.g., through the same Git provider), create a new site from Git, and choose your site’s source code. Netlify should automatically detect that you’re using Gatsby and include the gatsby build command. If so, go ahead and deploy your site. Your site will now automatically build whenever you push changes to the source code in the Git repository.

Now that your site’s up and running, you need to set up automatic builds when published content in Kentico Cloud changes. First, in Netlify create a new build hook with a name like “Change in Kentico Cloud content” and copy the URL. Then go to Kentico Cloud. Under Project settings, choose Webhooks and create a new webhook. Give it a name like “Netlify build” and paste the URL into the URL address field. And that’s it. Now whenever published content changes (see what actions call a webhook), 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 simple Gatsby site that sources content from Kentico Cloud and is automatically redeployed on any change to the content. Kentico Cloud 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 Kentico Cloud source plugin can do.
Read the Kentico Cloud documentation to see what’s possible.
Explore the Kentico Cloud Gatsby starter to see a more complete example.
Read a blog post about using Kentico Cloud and Gatsby.

Edit this page on GitHub