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? Direct link to this section

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 Direct link to this section

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 Direct link to this section

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 Direct link to this section

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 Direct link to this section

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.