kentico-michaelb / gatsby-starter-kontent

Gatsby starter site with Kontent by Kentico.

Gatsby starter site with Kentico Kontent

This repo contains a Gatsby v2 starter site pre-configured with Kentico Kontent source plugin. The site portrays a personal site of a fictional technical evangelist that attends user groups, writes blog posts and implements projects.

Prerequisites

• Node.js with NPM installed

How to run the code

The preferred way is to use Gatsby CLI gatsby new command, but you can of course simply clone or fork this repo.

Use Gatsby CLI

Make sure you have Gatsby CLI installed via npm list -g gatsby-cli. If not, you can install CLI via npm install --global gatsby-cli.

Then, navigate to your projects directory and run gatsby new [subdirectory name] https://github.com/Kentico/gatsby-starter-kentico-cloud. Replace [subdirectory name] with your project directory's name. The CLI tool will essentially do three things:

• create a subdirectory
• clone the starter site code files into that subdirectory
• run npm install to get all dependencies for you
  • that also copies content from .env.template to newly created .env file using prepare npm script

Clone or fork the repo

Clone or fork this repo. Once it's done, navigate to the app's root directory and run:

npm install

Run the starter site

Now, run:

npm develop (or gatsby develop, should you have the Gatsby CLI installed)

This will bootstrap the site, build all static pages and start the site at http://localhost:8000 . You'll also be able to test arbitrary GraphQL queries in the GraphiQL interface via http://localhost:8000/___graphql.

Developing

You may use any IDE, however, we've added a settings file for Visual Studio Code for easier debugging.

Create content source

1. Go to app.kontent.ai and create empty project

2. Go to "Project Settings", select API keys and copy

   • Project ID
   • Management API key require Business tier or higher or Trial account

3. Install Kontent Backup Manager and import data to newly created project from content.zip file (place appropriate values for apiKey and projectId arguments):

   npm i -g @kentico/kontent-backup-manager
   
   kbm --action=restore --apiKey=<Management API key> --projectId=<Project ID> --zipFilename=content

   • 💡 Alternatively, you can use the Template Manager UI for importing the content.

4. Go to your Kontent project and publish all the imported items.

5. Set environment variables to .env (created automatically by running npm install)

   • KONTENT_PROJECT_ID from Go to "Project Settings" -> "API keys" -> "Delivery API" -> "Project ID"
   • KONTENT_LANGUAGE_CODENAMES from "Project Settings" -> "Localization" (use "Codename" of each language)

Retrieve both published and unpublished content

To load data from Preview API just set following environment variables to you .env file (created automatically by running npm install)

• KONTENT_PREVIEW_KEY from Go to "Project Settings" -> "API keys" -> "Preview API" -> "Primary key/Secondary key"
• KONTENT_PREVIEW_ENABLED to true

Experimenting

Of all the artifacts of Kentico Kontent, the starter site only displays content items and only in the default language. But, our source plugin also provides content types and items in non-default languages.

Check out the source plugin's readme for more details on which kinds of data and relationships it supports.