Work in progress - do not try this yet, incomplete

Creating Static Sites for clients with Contentful, Aerobatic, and Jekyll

Many small agencies are facing a challenge: How to create a high-performing web site, while at the same time, let the client edit blog posts and pages. Fortunately, a combination of services and open-source tools has made this possible now. Contentful provides the web site where content is edited. Jekyll provides the the code that turns content into webpages. And Aerobatic provides the high-performance hosting system. Research has shown that speedy sites translate into more engaged visitors and higher search engine rankings.

What does this all replace? The decade old solution to this has been WordPress, or another PHP based content management system (CMS). But in addition to the code in WordPress showing its age, it may not be the right solution for everyone. The admin interface for WordPress is too complex for many clients. It is powerful, but also gives people "enough rope to hang themselves on". And while WordPress has made progress on core security, the many plugins and their required updates take a lot of time, and introduce potential security risks. To create a WordPress theme, the front-end designer must leave the comfortable world of HTML, CSS, and JavaScript, and also learn some PHP.

What is a Static Site, and why use it?

A static site is a website that has no code running on the server. It does not mean the web site does not change. Static sites typically take less than 5 minutes to build, and can be updated all day long if necessary. Browser-based JavaScript can talk to web services via application programming interfaces (APIs) and provide a dynamic, customized experience to the site visitor.

Static site generators have recently seen a lot of growth, and for good reason. Static sites can be optimized for high performance, because there is no code to run on the server to slow things down. Static sites can be distributed globally on a content distribution network (CDN) so that site visitors can get the content more quickly.

And most importantly, static sites are simple. They are easier to debug and optimize, because there are fewer "moving parts". For example, on Aerobatic, getting a site online and globally distributed is three steps:

Getting started with Aerobatic

Aerobatic offers a hosting service specifically tailored to static website publishing. It is simple and powerful.

1. Install NodeJS. If you haven't already, see the downloads page.

2. Open a command line window and install Aerobatic:

npm -g install aerobatic cli

3. Create an html page. In this example we'll use something ridiculously simple to prove the point.

 echo "<h1>Hello World</h1>" >> index.html

4. Login to Aerobatic and copy the index.html page up to the service:

aero login && aero deploy

Granted, that was, of course, the bare minimum. A more robust static site can be built with a tool called Jekyll.

Getting started with Jekyll

Jekyll was released in May 2013. It is used by thousands, if not tens of thousands of sites. It has the most available themes, currently numbering several hundred.

1. Install Ruby. Many of you will already have it installed. If not, see the installation instructions
2. Install Jekyll: gem install jeykll
3. Create your Jekyll site: jekyll new mysite (Replace mysite with whatever you want)

You can preview your new site with jekyll serve.

Adjust your aerobatic.yml file to push the _site directory.

deploy:
   directory: _site
 ---

And re-publish your site with aero deploy

Getting started with Contentful

We need to create a Contentful space and then add a content type for blog posts. Then add some sample data and get the API info.

1. create a post content type with title and body
2. get your space id
3. get an API key

Integrating Contentful and Jekyll

We need to grab Contentful's Jekyll plugin and hook it up to your Contentful account. Then grab the blog posts as JSON, and transform them into HTML markup.

1. Edit the Gemfile to include the plugin for integrating with Contentful. Be sure to put it in the :jekyll_plugins block.

group :jekyll_plugins do
     gem 'jekyll-contentful-data-import'
end

2. Create a new file called _config-secret.yml. Include in that file Contentful's spaceId and API key:

# replace CHANGME with your API keys
contentful:
     spaces:
      - your_space_alias:
          space: CHANGEME
          access_token: CHANGEME

• run jeyll contentful (with secret config)
• check data files exist
• transform data files into blog posts with liquid magic

Wrapping Up

Where to take it from here? It's up to you!

• Add advanced features with Aerobatic's plugins For example check out the form-submit plugin to add a contact form to your site.
• Add different content types with Contentful
• Optimize your site for speed with WebpageTest
• Set your site up for Continuous Integration