Kentico Cloud -> Kentico Konent docs
65 removals
| Words removed | 80 |
| Total words | 1739 |
| Words removed (%) | 4.60 |
194 lines
63 additions
| Words added | 70 |
| Total words | 1729 |
| Words added (%) | 4.05 |
193 lines
---
---
title: Sourcing from Kentico Cloud
title: Sourcing from Kentico Kontent
---
---
In this guide, you'll go through how to quickly source content for your Gatsby site from [Kentico Cloud](https://kenticocloud.com/).
In this guide, you'll go through how to quickly source content for your Gatsby site from [Kentico Kontent](https://kontent.ai/).
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.
Kentico Kontent 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 Kontent 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](https://github.com/Kentico/gatsby-source-kentico-cloud) will ensure the proper nodes are created for your Gatsby site.
You can also take advantage of Kentico Kontent's ability to deliver content in multiple languages and create relationships among various content with linked items. However you structure your content in Kentico Kontent, the [source plugin](https://github.com/Kentico/gatsby-source-kontent) 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](https://github.com/gatsbyjs/gatsby-starter-default) 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](https://github.com/Kentico/gatsby-starter-kentico-cloud), which includes worked examples for querying content._
_Note: For this guide, you'll work from scratch from the [Gatsby default starter](https://github.com/gatsbyjs/gatsby-starter-default) to get a feel for how sourcing from Kentico Kontent 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](https://github.com/Kentico/gatsby-starter-kontent), which includes worked examples for querying content._
## Setup
## Setup
### Kentico Cloud
### Kentico Kontent
The first thing to do, if you haven't already done so, is [sign up for a Kentico Cloud account](https://app.kenticocloud.com/sign-up). 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.
The first thing to do, if you haven't already done so, is [sign up for a Kentico Kontent account](https://app.kontent.ai/sign-up). This will automatically start a free 30-day trial with all Kentico Kontent 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](https://app.kenticocloud.com/sample-project-generator) to create sample content. This guide will continue with the example of the Sample Project.
Once you have a subscription to Kentico Kontent, 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](https://app.kontent.ai/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](https://app.kenticocloud.com/quickstart) from within that project.
The created Sample Project is a comprehensive presentation of a fictional coffee company named Dancing Goat that showcases various Kentico Kontent features. It can be displayed in various channels, as you can see by going to the [Quickstart page in Kentico Kontent](https://app.kontent.ai/quickstart) 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_.
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 Kontent under _Project settings_ -> _API keys_.
### Gatsby
### Gatsby
#### Adding content to existing pages
#### 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](/docs/quick-start/#install-gatsbys-command-line-tool), create a new site and navigate to it in your terminal:
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](/docs/quick-start/#install-the-gatsby-cli), create a new site and navigate to it in your terminal:
```shell
```shell
gatsby new kentico-cloud-guide
gatsby new kentico-kontent-guide
cd kentico-cloud-guide
cd kentico-kontent-guide
```
```
Next, install the [Kentico Cloud source plugin](https://github.com/Kentico/gatsby-source-kentico-cloud):
Next, install the [Kentico Kontent source plugin](https://github.com/Kentico/gatsby-source-kontent):
```shell
```shell
npm install --save gatsby-source-kentico-cloud
yarn add @kentico/gatsby-source-kontent
```
```
Once that's done, you need to add the plugin to `gatsby-config.js`:
Once that's done, you need to add the plugin to `gatsby-config.js`:
```javascript
```javascript
module.exports = {
module.exports = {
siteMetadata: {
siteMetadata: {
...
...
},
},
plugins: [
plugins: [
{
{
resolve: `gatsby-source-kentico-cloud`,
resolve: `@kentico/gatsby-source-kontent`,
options: {
options: {
deliveryClientConfig: {
deliveryClientConfig: {
projectId: `<YourProjectID>` // Fill in your Project ID
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`.
// 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: [
languageCodenames: [
`en-US` // Or the languages in your project (Project settings -> Localization)
`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:
And that's enough for you to be able to access content from Kentico Kontent in your site. You can see this by starting Gatsby in development mode:
```shell
```shell
gatsby develop
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 all the content that's available from Kentico Kontent, you can test out GraphQL queries in GraphiQL at <http://localhost:8000/___graphql>. Nodes from Kentico Kontent will be prefixed with `kontent` (for single nodes) or `allKontent` (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.
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 Kontent.
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.
The title here is generated in the layout from the site metadata. By default, the Kentico Kontent 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.
```javascript:title=src/components/layout.js
```javascript:title=src/components/layout.js
...
...
const Layout = ({ children }) => (
const Layout = ({ children }) => (
<StaticQuery
<StaticQuery
query={graphql`
query={graphql`
query {
query {
kenticoCloudItemHome {
kontentItemHome {
elements {
elements {
metadata__meta_title {
metadata__meta_title {
value
value
}
}
}
}
}
}
}
}
`}
`}
render={data => (
render={data => (
<>
<>
<Header siteTitle={data.kenticoCloudItemHome.elements.metadata__meta_title.value} />
<Header siteTitle={data.kontentItemHome.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](#continuous-deployment)).
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 Kontent to whatever you want and rerun `gatsby develop` to rebuild the site ([see below about automatic builds](#continuous-deployment)).
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.
So you've seen how to add content to existing pages in Gatsby using Kentico Kontent. Next, you will start creating new pages of your own.
#### Creating new pages
#### 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).
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 Kontent 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 Kontent).
Start by making use of the URL pattern in the Article type to generate slugs for your Article nodes:
Start by making use of the URL pattern in the Article type to generate slugs for your Article nodes:
```javascript:title=gatsby-node.js
```javascript:title=gatsby-node.js
exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
if (node.internal.type === `KenticoCloudItemArticle`) {
if (node.internal.type === `KontentItemArticle`) {
createNodeField({
createNodeField({
node,
node,
name: `slug`,
name: `slug`,
value: node.elements.url_pattern.value,
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:
Now that you have a pretty way to define the path for your pages, you can create the pages programmatically:
```javascript:title=gatsby-node.js
```javascript:title=gatsby-node.js
const path = require(`path`) // highlight-line
const path = require(`path`) // highlight-line
exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
if (node.internal.type === `KenticoCloudItemArticle`) {
if (node.internal.type === `KontentItemArticle`) {
createNodeField({
createNodeField({
node,
node,
name: `slug`,
name: `slug`,
value: node.elements.url_pattern.value,
value: node.elements.url_pattern.value,
})
})
}
}
}
}
// highlight-start
// highlight-start
exports.createPages = async ({ graphql, actions }) => {
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const { createPage } = actions
// Query data from Kentico
// Query data from Kentico
const result = await graphql(`
const result = await graphql(`
{
{
allKenticoCloudItemArticle {
allKontentItemArticle {
edges {
edges {
node {
node {
fields {
fields {
slug
slug
}
}
}
}
}
}
}
}
}
}
`)
`)
// Create pages
// Create pages
result.data.allKenticoCloudItemArticle.edges.forEach(({ node }) => {
result.data.allKontentItemArticle.edges.forEach(({ node }) => {
createPage({
createPage({
path: node.fields.slug,
path: node.fields.slug,
component: path.resolve(`src/templates/article.js`),
component: path.resolve(`src/templates/article.js`),
context: {
context: {
slug: node.fields.slug,
slug: node.fields.slug,
},
},
})
})
})
})
}
}
// highlight-end
// highlight-end
```
```
Now create a basic template to display each article with a title and the body that you pull with a GraphQL query:
Now create a basic template to display each article with a title and the body that you pull with a GraphQL query:
```javascript:title=src/templates/article.js
```javascript:title=src/templates/article.js
import React from "react"
import React from "react"
import { graphql } from "gatsby"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Layout from "../components/layout"
const Article = ({ data }) => {
const Article = ({ data }) => {
const item = data.kenticoCloudItemArticle.elements
const item = data.kontentItemArticle.elements
return (
return (
<Layout>
<Layout>
<h1>{item.title.value}</h1>
<h1>{item.title.value}</h1>
<div dangerouslySetInnerHTML={{ __html: item.body_copy.value }} />
<div dangerouslySetInnerHTML={{ __html: item.body_copy.value }} />
</Layout>
</Layout>
)
)
}
}
export default Article
export default Article
export const query = graphql`
export const query = graphql`
query articleQuery($slug: String!) {
query articleQuery($slug: String!) {
kenticoCloudItemArticle(fields: { slug: { eq: $slug } }) {
kontentItemArticle(fields: { slug: { eq: $slug } }) {
fields {
fields {
slug
slug
}
}
elements {
elements {
body_copy {
body_copy {
value
value
}
}
title {
title {
value
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).
When you rerun `gatsby develop`, you'll be able to see each article as a page with content pulled from Kentico Kontent. 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](https://github.com/Kentico/gatsby-source-kentico-cloud#embedded-js-sdk-resolution) or query the required data in structured form for resolution and create your own React components for [inline content items](https://github.com/Kentico/gatsby-source-kentico-cloud#content-items-in-rich-text-elements), [links](https://github.com/Kentico/gatsby-source-kentico-cloud#links-in-rich-text-elements), and [images](https://github.com/Kentico/gatsby-source-kentico-cloud#images-in-rich-text-elements).
The body copy for this article comes from a rich text element in Kentico Kontent. 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](https://github.com/Kentico/gatsby-source-kontent#embedded-js-sdk-resolution) or query the required data in structured form for resolution and create your own React components for [inline content items and components](https://github.com/Kentico/gatsby-source-kontent#content-items-and-components-in-rich-text-elements), [links](https://github.com/Kentico/gatsby-source-kontent#links-in-rich-text-elements), and [images](https://github.com/Kentico/gatsby-source-kontent#images-in-rich-text-elements).
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.
Now you know how to create pages programmatically and pull their content from Kentico Kontent. 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 Kontent.
### Continuous deployment
### 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](https://www.netlify.com/docs/continuous-deployment/), but the principle is similar using other services like [Travis CI](https://travis-ci.org/), as with another [site sourced from Kentico Cloud](https://github.com/Kentico/kentico.github.io/wiki/How-the-automatic-deployment-works).
To keep your site static but always up to date with the latest content from Kentico Kontent, it helps to set up automatic deployment whenever your published content changes. Here, you can see how to set that up using [Netlify](https://www.netlify.com/docs/continuous-deployment/), but the principle is similar using other services like [Travis CI](https://travis-ci.org/), as with another [site sourced from Kentico Kontent](https://github.com/Kentico/kentico.github.io/wiki/How-the-automatic-deployment-works).
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.
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](https://www.netlify.com/docs/webhooks/) 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](https://developer.kenticocloud.com/docs/webhooks#section-when-webhooks-are-called)), your webhook will trigger a build in Netlify to ensure your static content is updated to the latest version.
Now that your site's up and running, you need to set up automatic builds when published content in Kentico Kontent changes. First, in Netlify [create a new build hook](https://docs.netlify.com/configure-builds/build-hooks/) with a name like "Change in Kentico Kontent content" and copy the URL. Then go to Kentico Kontent. 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](https://docs.kontent.ai/tutorials/develop-apps/integrate/using-webhooks-for-automatic-updates#a-when-webhooks-are-called)), your webhook will trigger a build in Netlify to ensure your static content is updated to the latest version.
## What's next?
## 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?
You've seen how to set up a simple Gatsby site that sources content from Kentico Kontent and is automatically redeployed on any change to the content. Kentico Kontent 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](https://github.com/Kentico/gatsby-source-kentico-cloud#features).
- See [more about what the Kentico Kontent source plugin can do](https://github.com/Kentico/gatsby-source-kontent#features).
- Read the [Kentico Cloud documentation](https://developer.kenticocloud.com/docs) to see what's possible.
- Read the [Kentico Kontent documentation](https://docs.kontent.ai/) to see what's possible.
- Explore the [Kentico Cloud Gatsby starter](https://github.com/Kentico/gatsby-starter-kentico-cloud) to see a more complete example.
- Explore the [Kentico Cloud Gatsby starter](https://github.com/Kentico/gatsby-starter-kontent) to see a more complete example.
- Read a [blog post about using Kentico Cloud and Gatsby](/blog/2018-12-19-kentico-cloud-and-gatsby-take-you-beyond-static-websites/).