CloudCannon

7 Free Jekyll Templates

2016-12-05T00:00:00+13:00

Starting a new Jekyll site from scratch can be a pain. It’s often easier to start with an existing site and modify for your use case. To help get you started on your next project we’ve created seven high quality Jekyll templates for common use cases. Even better they’re all optimised for use with CloudCannon. The templates are licensed under MIT so you’re free to use and modify them however you’d like.

Usage

To use the new templates in CloudCannon, create a new site and select the “Choose a Template” option.

From here you can browse through the templates and select your favourite.

These templates also work without CloudCannon, just fork the template repository on GitHub or download a zip.

Some of you may be wondering why we didn’t use the new Jekyll theme functionality for the templates. We may convert them to themes in the future, for now we want to encourage people to look through and modify the source code on their site.

The Templates

Urban live demo

Urban is the perfect starting point for your Agency website.

Show off your latest work on the portfolio page.
Talk about the latest trends in the industry on the blog.
Get new business through the contact form.

Justice live demo

Justice is a law firm themed template for Jekyll which can be modified to fit any local business.

Show testimonials to add credibility to the business.
Your clients post advice on their blog.
Inbound leads get in touch on the contact form.

Cause live demo

Cause is the perfect way for a non-profit to get started with Jekyll.

Build a community through a mailing list.
Accept donations from around the world.
Post the latest milestones to your community.

Frisco live demo

Build a marketing site for your app with Frisco.

Add your team and write your company story.
Write about your latest release and findings in the blog.
Get customers using your app.

Malt live demo

Malt is a great starting point for an event website.

List featured brands or speakers.
Embed Eventbrite so attendees can book tickets directly on the site.
Show photos from previous years in the photo gallery.

Hydra live demo

Market your product or SaaS business with Hydra.

Show your pricing in an easy-to-read table.
Write about your industry in the blog.
Have potential customers get in touch on the contact page.

Edition live demo

Write documentation for your product using Edition.

Clearly document how you use your product.
Fully integrated search allows your customers to find the content they’re looking for.
Write a change log to keep customers up-to-date with the latest changes.

What do you need?

We really enjoyed making these templates and we hope they’re useful for you. We’d love to hear how you’re using them!

We’ll be making more templates in the future. Let us know what type of templates would be valuable for you in the comments below.

Officially Out of Jekyll Beta

2016-08-31T00:00:00+12:00

Today marks a huge milestone for CloudCannon. We’ve finished the Jekyll beta, making Jekyll and plugins available to all users on every plan. The latest release also includes some requested features and more Jekyll configuration.

Plugins

Every new site created on CloudCannon from today is automatically built with Jekyll and supports custom plugins. To prevent breaking changes, existing sites need to create a _config.yml for CloudCannon to build with Jekyll. New and existing static sites that do not use Jekyll are still supported in full.

Full documentation for Jekyll plugins

Versions

We’ve added support for all the latest versions of Jekyll, and have consolidated the way versions are set. The version is now set through a Gemfile. The default version for new Jekyll sites is 3.2.1. You can always check what version of Jekyll is active on the Status section.

Full documentation for Jekyll versions

Configuration

Jekyll has a number of command line options for builds. Setting these in the new Site Settings / Build section gives you more control and helps reproduce your local environment. The existing CloudCannon Optimisations and Jekyll Environment options have been moved to this section.

The most notable options are baseurl, source, and Jekyll’s other custom directory options. These options are now supported in full as command line options and specified in _config.yml. The CloudCannon editing interface reads the baseurl and custom directories and reacts seamlessly.

Full documentation for build configuration

Additional Features

To complement Jekyll’s custom directories, we’ve created uploads_dir to change the location that images uploaded in the editor are stored. By default it’s set to uploads. For consistency with Jekyll, the path is relative to the Jekyll source if set.

Full documentation for image editable regions

For those of you battling targeted spam email, we’ve added Google reCAPTCHA support in addition to our honeypot prevention.

Full documentation for contact forms

Thank you to everyone who provided feedback over the beta, you’ve shaped many of the features in our Jekyll support. We have plenty of new features and improvements planned and look forward to your continued feedback.

New and Improved Front Matter Interfaces

2016-08-09T00:00:00+12:00

CloudCannon is committed to bringing the best editing experience to static and Jekyll sites. We provide world-class interfaces for your clients to update their front matter, a core offering of Jekyll.

There are more front matter interfaces available in CloudCannon than ever before. We’ve recently added more interfaces and ways to customise them.

Rich Text

Front matter is often useful for sections of text outside the main content of a page. Give clients control of formatting with this new interface. The _html and _markdown conventions set what format the text is saved in. Markdown values need to be run through the markdownify filter to render with formatting.

Full documentation for rich text

Colour

Giving your clients access to colour doesn’t always bode well for a design’s longevity, but there are some good use cases. CloudCannon supports colour in front matter by providing a unified selector that outputs to a number of formats. You control the format, the client controls the colour.

Full documentation for colour

Multiselect

If you’ve ever needed an interface for clients to select a subset of items from a predefined set of values, this is for you. CloudCannon populates values from arrays or objects defined in _config.yml, and collection items. Clients add collection items to create additional values in the set.

Full documentation for multiselect

There’s a undeniable link between social media and websites, and your editing interfaces are now aware of it. Social interfaces are text fields for URLs and IDs. Profile pictures are displayed alongside, validating for clients they have the correct URL and adding detail to an otherwise plain text field.

Full documentation for social

Documents and Images

The file selector based on the _path convention has been incredibly popular in sites on CloudCannon, especially for images. The new _image_path and _document_path conventions now allow you to restrict the files to images or documents only. Using a more specific type provides a better editing experience and reduces potential mistakes from clients.

Full documentation for files

Number

Take advantage of the HTML5 number input and store client-entered values numerically.

Full documentation for numbers

Comments

Comments provide instructional or guide text for any interface. Use this heavily requested feature to remind clients of specific details for each interface when a title or key just isn’t enough.

Full documentation for comments

Array Defaults

When clients create new items in an array, the keys and interface types are created from the previous item to ensure a consistent interface. You can now provide the starting values for the new item as well.

Set starting values for variables to the most likely value, and set starting images to placeholders (retaining the path when the client selects another)

Full documentation for array defaults

Full Width Editor

Collection items are often files containing only front matter. Dedicating most of the editor to the content isn’t the best experience in this scenario. Hide the content area by setting _hide_content: true in your front matter.

Full documentation for full width editor

The full documentation for front matter has details and examples to get you set up with any of these interfaces and customise them further.

We have more interfaces planned, keep track of all the changes in CloudCannon in the change log. As always, we are keen to hear your feedback on the new features and look forward to seeing what you build with them.

Plugins and SSL Private Beta

2016-05-17T00:00:00+12:00

This week we are excited to announce the beginning of two features: the ability to use Jekyll plugins and SSL support. Both features are in private beta, contact support to request early access.

Plugins Private Beta

Plugins support allows you to add custom plugins to any site and CloudCannon executes the custom code. Add plugins using a Gemfile or with Ruby files directly within the _plugins directory.

Plugins are used for:

Reducing the repetition across sites
Connecting to external data sources
Adding additional liquid tags
Generating pages from data files
And much more

Enjoy the editing of CloudCannon with the full power of Jekyll. Get in touch If you want to try Jekyll plugins on CloudCannon.

SSL Private Beta

Dozens of users are already using our SSL Support. This allows you to serve any traffic on your site over SSL. Simply upload your cert and connect it to your site. This enables HTTPS for any traffic to your site.

Optionally, any site can be configured to force SSL. This redirects any HTTP traffic to HTTPS.

For a full list of changes check out the changelog. If you want to help us in this early stage of either feature get in touch. We are extremely excited to see what you build with the new features.

Inline Editing of Markdown Pages

2016-04-11T00:00:00+12:00

This week we announce a long awaited feature, inline editing of Markdown files. This feature means that posts, collection items or pages written in Markdown are editable in the Visual Editor automatically. The ability to edit posts in context has been requested since the introduction of blogging.

This feature works for all existing and new sites. The only requirement of this feature is that the {{ content }} block is the only child of its parent element. For example:

<div>{{ content }}</div>

The controls available to the editable region are decided by the parent element. span has less controls than a p which has less controls than a div. See our Editable Regions documentation for more information.

The Content Editor is still available for sites that are not set up for inline editing. Existing sites need to trigger a build to access the new feature.

If you need help or have any feedback you can always contact support. Alternatively, let us know in the comments below.

Deploy Jekyll sites anywhere using jekyll-hook

2016-01-26T00:00:00+13:00

In the last tutorial, we used Travis CI to deploy a Jekyll site to Amazon S3. This tutorial covers using jekyll-hook to automatically deploy changes from GitHub/CloudCannon to your own server.

What is jekyll-hook?

jekyll-hook is a Node.js program which runs on a server. It listens for new commits on a GitHub repository using webhooks. When there is a commit, jekyll-hook pulls the latest source code, builds the site with Jekyll, then deploys the built site to a directory.

Setup

I’m using Ubuntu 14.04 so adjust the instructions for your operating system.

Install Git, Node.js, Ruby and Jekyll:

$ sudo apt-get update
$ sudo apt-get install git nodejs ruby ruby1.9.1-dev npm
$ sudo gem install jekyll -v 2.4.0

Symlink nodejs to node:

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Clone the jekyll-hook repo from GitHub:

$ git clone https://github.com/developmentseed/jekyll-hook.git

Install the dependencies:

$ cd jekyll-hook
$ npm install

Configuration

Copy the sample configuration to config.json:

$ cp config.sample.json config.json

Open config.json in a text editor.

With this script you can configure jekyll-hook to listen to a particular server, run special build scripts for a particular Git branch or send an email every time there’s a build. The default config.json get us most of the way there, we just need to ensure changes can be pulled in from our account.

Change accounts to your GitHub account or organisation.

$ nano config.json

Here’s my complete config.json:

{
  "gh_server": "github.com",
  "temp": "/home/ubuntu/jekyll-hook",
  "public_repo": true,
  "scripts": {
    "#default": {
      "build": "./scripts/build.sh",
      "publish": "./scripts/publish.sh"
    }
  },
  "secret": "",
  "email": {
    "isActivated": false,
    "user": "",
    "password": "",
    "host": "",
    "ssl": true
  },
  "accounts": [

    "cloudcannon",
    "mneumegen"
  ]
}

As you can see from the configuration, jekyll-hook is going to run ./scripts/build.sh when it detects a change. The default build script pulls the latest commits to the local repository and runs jekyll build. We don’t need to change anything in this file.

Here’s my ./scripts/build.sh:

#!/bin/bash
set -e

# This script is meant to be run automatically
# as part of the jekyll-hook application.
# https://github.com/developmentseed/jekyll-hook

repo=$1
branch=$2
owner=$3
giturl=$4
source=$5
build=$6

# Check to see if repo exists. If not, git clone it
if [ ! -d $source ]; then
    git clone $giturl $source
fi

# Git checkout appropriate branch, pull latest code
cd $source
git checkout $branch
git pull origin $branch
cd -

# Run jekyll
cd $source
jekyll build -s $source -d $build
cd -

After the build finishes, jekyll-hook, runs ./scripts/publish.sh. This script moves the built site to your web server directory.

By default jekyll-hook deploys the site to /usr/share/nginx/html/$repo. $repo is one of the variables jekyll-hook makes available to use in the path. You can also use $branch, $owner, $giturl, $source and $build.

Change site to your desired location.

$ nano scripts/publish.sh

Here’s my complete scripts/publish.sh:

#!/bin/bash
set -e

# This script is meant to be run automatically
# as part of the jekyll-hook application.
# https://github.com/developmentseed/jekyll-hook

repo=$1
branch=$2
owner=$3
giturl=$4
source=$5
build=$6

# Set the path of the hosted site
site="/home/ubuntu/$repo"

# Remove old site files, move new ones in place
# On amazon EC2 use sudo if nginx html forlder has root ownership

rm -rf $site

Jekyll-hook is set up to listen for changes from GitHub. When there is a change it will build the site and deploy it to a folder.

Webhook

Now we need GitHub to send jekyll-hook a webhook when there’s a commit to the repository.

Open your repository on GitHub. Then go to Settings -> Webhooks & services.

Click Add webhook. Set the Payload URL to point at your jekyll-hook server http://example.org:8080/hooks/jekyll/:branch where :branch is the branch you want to publish. The rest of the defaults are fine, press Add webhook.

Deploying the site

Run jekyll-hook. It listens for changes on port 8080:

$ ./jekyll-hook.js

If you’re running this on EC2 remember you’ll need to open port 8080 in your security group.

Make a change in the repository and you’ll see logs appear in your jekyll-hook program. If nothing happens have a look at your webhook logs on GitHub.

Check the deployment directory to see a built version of your Jekyll site. Now you just need to configure your webserver to serve the site.

Editor Links

2016-01-25T00:00:00+13:00

Editor Links are a new CloudCannon feature to add in-app navigation around the editing interface. Use them to create edit buttons on blog posts and collections items in the editor for your clients.

The links are anchor tags with an href attribute specific to CloudCannon. The href is prefixed with cloudcannon, followed by a colon and the URL you wish to link to. For example, the following links to the Posts page for your clients:

<a href="cloudcannon:collections/_posts">Open Posts</a>

This link navigates to https://app.cloudcannon.com/editor#/site/123/collections/_posts, the interface for managing blog posts.

Generating Editor Links

Jekyll generates the paths you need in a number of situations. Adding an edit button to each blog post in a list is as easy as:

{% for post in site.posts %}
  ...
  <a href="cloudcannon:collections/{{ post.path }}">Edit Post</a>
  ...
{% endfor %}

This could generate https://app.cloudcannon.com/editor#/site/123/collections/_posts/2016-01-16-my-blog-post.md, navigating to the editor for that blog post.

Our documentation includes instructions for Editor Links on collection items and hiding them in the live site.

One of our customers requested this feature to create buttons to edit products from the Visual Editor. We’d love to hear how you use it in the comments below.

Deploy Jekyll sites to S3 using Travis CI

2016-01-21T00:00:00+13:00

CloudCannon consolidates editing and reliable hosting into a single package. Alternatively, you can use external hosting solutions and keep editing in CloudCannon. To demonstrate this workflow, we will use Amazon S3, a great platform to host static and Jekyll websites. The uptime is 99.9% guaranteed, it scales indefinitely and it’s cheap.

This tutorial shows you how to automatically deploy changes from CloudCannon/GitHub to S3 using Travis CI.

Setup

To begin, sign up for Travis CI.

Travis CI requires access to your GitHub account.

Click the add button next to My Repositories.

Enable the repository with your Jekyll site.

Scripts

Travis CI needs a configuration script in your repository describing how to build and deploy your site.

The script will set up Ruby:

language: ruby
rvm:
  - 2.1

Install the jekyll and s3_website gems. s3_website copies the website files to S3.

install: gem install jekyll -v 2.4.0 && gem install s3_website

Build the site using Jekyll:

script: jekyll build

Then copy the generated site to S3:

after_success: s3_website push

Copy the script to .travis.yml in your repository:

language: ruby
rvm:
  - 2.1
install: gem install jekyll -v 2.4.0 && gem install s3_website
script: jekyll build
after_success: s3_website push

s3_website needs a configuration file describing how and where to deploy the site. Your S3 Secret Key is private so it’s a bad idea to put it in your public repository. Instead, you can set and use an environment variable in Travis CI.

Copy the script to s3_website.yml and change s3_bucket to the name of your S3 bucket:

s3_id: <%= ENV['S3_ACCESS_KEY_ID'] %>
s3_secret: <%= ENV['S3_SECRET_KEY'] %>
s3_bucket: your.bucket.com

Environment Variables

The final step is to set environment variables for the S3 Access Key and Secret Key.

Go to settings and add your Amazon S3 credentials:

Every time you make a change to the repository in GitHub (including edits from CloudCannon), Travis CI rebuilds the site and deploys it to S3.

Summary

Travis CI is flexible enough to keep the easy-to-use editing in CloudCannon and host your site anywhere.

Output Drafts and Collection Defaults

2015-12-17T00:00:00+13:00

This week we have a smaller release for some highly requested configuration. We added draft post compiling and defaults for creating collection items.

Output Draft Posts

CloudCannon users can now preview draft posts in staging environments before publishing to the live site. Configure this in the Site Settings to add the --drafts flag to any Jekyll build on that site. Enabling Output draft posts will trigger a build and include drafts with posts.

In addition to the live site, you can preview drafts within the app. Just like posts, drafts now have the visual and markdown editor options. This will help keep you focused when writing blog posts.

Collection Defaults

Before this release, new collection items were pre-populated with cleared data from another item. Developers can now create a file within the collection folder to control default values. This file is used to define new items by cloning both the contents and filetype into the new file. Since this file begins with an underscore Jekyll will not output the file to the live site. As an exception, draft posts will always read from /_posts/ rather than /_drafts/. More details are available in our documentation.

These changes were inspired by your feedback. Syncing performance and reliability is the focus of our next release. If you need anything get in touch at support@cloudcannon.com or send us a message in the app.

Site Status and New User Flow

2015-12-10T00:00:00+13:00

Since our last release, we’ve focused on existing interfaces and adding features in our continuing effort to improve the CloudCannon experience. These improvements are driven by your feedback and support.

Site Status

Users were repeatedly missing our indicator for Jekyll build errors. We’ve made this much more prominent in the user interface by integrated everything related to the health, state and activity of your site in one section called Status. The sidebar link for this section displays a quick status of your site and indicates if there is an error.

The Status section displays the build progress for your site in real time as CloudCannon processes it. There are site statistics and a stacked bar graph displays your file composition. Suggestions are shown for your site, such as adding a site map file or making use of specific CloudCannon features. Trailing underneath is the redesigned site activity feed.

We plan to improve this section over time. We will expand on the build progress, increase the useful errors and warnings shown, and add additional suggestions.

Empty Interfaces

Many of our interfaces were rather underwhelming when empty, preventing some users from progressing through the app. Some new users were creating accounts without adding files to their first site. To encourage users to progress, we’ve added guidance text and artwork to the empty File Browser section.

Other sections will offer short descriptions and guide the user back to this section when there are no files present. We hope that these updates allow new users to discover the full potential of CloudCannon.

In addition to our File Browser improvements, we’ve consolidated our file creation options into one menu. The commonly requested feature of creating a folder within the app is also available here.

The new create menu, and other File Browser features are also available in the Collections section. Among the most notable requests, folders can be created, files can be dragged into folders and new posts/collection items are automatically opened for editing when created.

We plan to add an archive (.zip or .tar.gz) upload for browsers other than Chrome that don’t support folder upload.

Thanks again for all the suggestions and feedback. Keep it coming by contacting us in the app or at support@cloudcannon.com.

CloudCannon

7 Free Jekyll Templates

Usage

The Templates

Urban live demo

Justice live demo

Cause live demo

Frisco live demo

Malt live demo

Hydra live demo

Edition live demo

What do you need?

Officially Out of Jekyll Beta

Plugins

Versions

Configuration

Additional Features

New and Improved Front Matter Interfaces

Rich Text

Colour

Multiselect

Social

Documents and Images

Number

Comments

Array Defaults

Full Width Editor

Plugins and SSL Private Beta

Plugins Private Beta

SSL Private Beta

Inline Editing of Markdown Pages

Deploy Jekyll sites anywhere using jekyll-hook

What is jekyll-hook?

Setup

Configuration

Webhook

Deploying the site

Editor Links

Generating Editor Links

Deploy Jekyll sites to S3 using Travis CI

Setup

Scripts

Environment Variables

Summary

Output Drafts and Collection Defaults

Output Draft Posts

Collection Defaults

Site Status and New User Flow

Site Status

Empty Interfaces

New Create Menu