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.
Article Series:
In this series, we are building a site for a fictional cafe called Coffee Cafe. This tutorial adds a content management system to the site with CloudCannon. 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.
We will host the Coffee Cafe site, define editable areas and share it with a non-developer staff member.
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>
Our customers rank up to 20% higher on their targeted keywords
</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>
Our customers rank up to 20% higher on their targeted keywords
</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 favorite code editors and push changes with Git.
How does CloudCannon store the editable content?
Hi there,
All the content is saved back to the original source code. This means all content changes are pushed back to GitHub, Bitbucket or Dropbox if you have them connected.
Mike
I think it would help to show the files that CloudCannon generates and forwards over to the Jekyll compiler so that the readers can better understand what’s going on and get an appreciation for what CloudCannon automates.
The way the part 2 article is written right now, it has nothing to do with Jekyll (other than the fact that CloudCannon just so happens to use Jekyll behind the scenes).
I think rather than CloudCannon using ‘Jekyll behind the scenes’ it more that CloudCannon provides a UI for your jekyll site. There are no magic files being generated, it is just providing a way to edit the markdown files for blogs or the html files. From a source code point of view it is exactly the same as a normal jekyll site. It is not that cloudcannon is automating it rather that it is allowing a non technical user to update a jekyll site
It’s worth pointing out the completely free alternative prose.io, opensourced by the excellent DevelopmentSeed a few years ago. I use this for all my Jekyll projects.
This Jekyll looks cool. After this series of articles, I found many important pieces of usefulness about this Jekyll content management system. It is quite similar to other enterprise web content management services where recently there are different editors for front-end and back-end developers. Jekyll CMS provides tools to design scalable and secured static websites where it takes advantage of CloudCannon to automatically optimize and spread the pages across different regions through CDN. Easy to use interface and ability to expand to a certain extent make Jekyll a good CMS for static sites, however it is difficult to accommodate complex websites in this. Use Sitefinity CMS, WordPress, Drupal or Umbraco for managing complex websites.