Building a Jekyll Site – Part 2 of 3: Adding a Jekyll CMS with CloudCannon
The following is a sponsored guest post by Mike Neumegen from CloudCannon. This series is all about not only building a Jekyll site but then adding simple editability through CloudCannon.
In this series, we are building a site for a fictional cafe called Coffee Cafe. In the last tutorial, we converted their existing static site to use Jekyll.
This tutorial adds a content management system to the site with CloudCannon. We will host the Coffee Cafe site, define editable areas and share it with a non-developer staff member.
CloudCannon is a content management system for Jekyll and static sites. It allows your team/clients to update content inline and keep the advantages of a static site.
Setup
Start by signing up for a (free) CloudCannon account.
The first screen you see is the dashboard, where you create and access your sites in CloudCannon. Create a site and call it Coffee Cafe.
To add files to the site, upload the site we created from the previous tutorial by dragging the source files into the browser. CloudCannon also supports syncing files with GitHub, Bitbucket and Dropbox.
To configure the Jekyll site and tell CloudCannon to use Jekyll for our site, we need a configuration file. Create an empty file from the Add Files menu in the top right corner and name it `_config.yml`.
When a file changes, CloudCannon builds the site and pushes it live to a *.cloudvent.net address. Click the link at the top to view your live Coffee Cafe site.
Editing the Content
Non-developers update content in CloudCannon with editable regions defined by developers. Editable regions are HTML elements with the editable class. To add this, open the code editor by clicking on the `index.html` file.
Add the editable class to HTML elements you want non-developers to update. This example makes an entire div editable:
<div class="column third editable">
<div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg" alt="search" width="100" data-cms-original-src="/images/search.svg" /></div>
<h3>Improve</h3>
<p>Our customers rank up to 20% higher on their targeted keywords</p>
</div>This example restricts editing to some elements inside the div:
<div class="column third">
<div class="center-text"><img src="//d1qmdf3vop2l07.cloudfront.net/grape-giraffe1.cloudvent.net/compressed/8a0c8c4e90d8ac7681629b333225fc86.svg" alt="search" width="100" data-cms-original-src="/images/search.svg" /></div>
<h3 class="editable">Improve</h3>
<p class="editable">Our customers rank up to 20% higher on their targeted keywords</p>
</div>Save your changes and open the visual editor in the top right corner to see the editable regions in action. In the visual editor, content inside a yellow box can be updated inline.
Sharing with Non-Developers
Sharing the site with other staff members allows them to collaborate on the content. Go to Site Settings -> Sharing, enter the email address of a colleague, set permission level to Non-Developer and press Add Share.
CloudCannon sends an email inviting them to edit the site.
The non-developers log in, open the Coffee Cafe site to the visual editor and update the editable regions.
They can update the page title and other metadata in the settings panel, accessed from the settings button in the top right corner. The CloudCannon documentation has detailed options to control the front matter interface.
Blogging
Blogging is available by going to Collections -> Posts on the left sidebar.
To create a new draft post, use the Add Files menu in the top right corner. New drafts and existing blog posts open in an easy to use editor. There are options for saving changes and publishing drafts.
Status
There are suggestions, status and a history of changes made to the site on the Status page.
Workflows
Working locally is great for developers as you can use your existing tools. Keep this workflow by syncing your site from GitHub or Bitbucket with CloudCannon, and git push to publish changes. CloudCannon picks up the changes, builds the site and publishes it live. When non-developers update content in CloudCannon, the changes are published live and committed to the repository.
You can have multiple environments (e.g. staging and production) with Git branches. Set up a Git branch for each environment and create a CloudCannon site for each branch. Work in staging then merge changes to production, all within CloudCannon.
Our Editable Site
The Coffee Cafe site is now live and editable with CloudCannon. The fictional staff update content themselves without code. Developers work locally with their favourite code editors and push changes with Git.
For the final tutorial, we will build our own commenting system using Firebase.
Building a Jekyll Site – Part 2 of 3: Adding a Jekyll CMS with CloudCannon is a post from CSS-Tricks
