Kentico Kontent & GatsbyJs web template

Kentico Kontent web template using Gatsby and Kentico Kontent.

Get started

Prerequisites

• Node.js
• Yarn

Run

1. Clone or fork this repository. Once it's done, install the packages:

   yarn

2. Register on Kentico Kontent

3. Create an empty project

4. Enable Content Management API

5. Import content.zip data using Template manager

   • Use Project Id and Content Management API key from previously generated project.
   • Select Publish language variants after import

6. Copy .env.template and name it .env, then set the KONTENT_PROJECT_ID environment variable to value from Kontent -> "Project Settings" -> API keys -> Project ID.

7. Run development environment

   yarn develop

🚀 Your site is now running at http://localhost:8000!

Deploy with Netlify

Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Use the button below to build and deploy your own copy of the repository:

After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.

Features

• GatsbyJS static site generator
• Data source - Kentico Kontent (using Gatsby source plugin for Kentico Kontent)
• Styling using SCSS
• Font awesome + Material Icons
• CSS Grid

Color palette

To define color pallette - change values of variables stored in _vars.scss.

Icons

It is possible to use two sets of font icons - Material Icons as well as Font Awesome.

Format Example:

• Material icons: <i className="material-icons">face</i> (face - icon code)
• Font Awesome : <li><span className="fa-code"></span></li> (fa-code - icon code)

CSS Grid

The grid on this site was replaced with a custom version, built using CSS Grid. It's a very simple 12 column grid that is disabled on mobile. To start using the grid, wrap the desired items with grid-wrapper. Items inside the grid-wrapper use the class col- followed by a number, which should add up to 12.

Here is an example of using the grid, for a 3 column layout:

<div className="grid-wrapper">
    <div className="col-4">
        <p>Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.</p>
    </div>
    <div className="col-4">
        <p>Content Here</p>
    </div>
    <div className="col-4">
        <p>Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.</p>
    </div>
</div>

Thanks

© 2019, Built with Gatsby using Gatsby starter Photon