GridGiant

Dropbox, Jekyll and a Build Server

  • web@gridgiant.co.uk
  • @gridgiant
  • 07535087386

Dropbox, Jekyll and a Build Server

16 Jun 2015

In a continuation of the the previous post I detail how to setup the Dropbox hosted content, the image controller script into the jekyll running build-server.

The State of Affairs

In part 1 we setup up the Dropbox transit based image controller (icss) to handle image uploading for our static site.

In part 2 we setup the dropbox folders to deliver content into the build server directories.

However a few people contacted me about setting up the actual build server so that will be part 3.

What is the build server

So the build server is just the location that the actuall Jekyll program runs, in a simple situation it doesn’t actually exist rather you can just a folder on your computer. However there are a number of advanatges to setting up a VM and then using it only to build your static websites. The big one is you can have a for more reserved approach to system and application updates. Essentially all you have is a linux VM excepting only ssh key not-root logins from within the VM network and Dropbox. I personally use VMM on Unbuntu running UBUNTU LTS clients.

The Build Server

The build server requires command line Dropbox tools, your static site generator of choice, in this case Jekyll and Git for site uploading as well as static site generator files.

Firstly set up a bare git repo to host the static site code.

git init --bare

Than add a hook file to checkout the repo to the build folder location.

#! /bin/sh
GIT_WORK_TREE="/BUILD/SERVER/BUILD/DIRECTORY" git checkout -f

Having done this we need to make the checkout directory if it does not already exist. If you plan to use a git push to transfer the built site to the production web server you can now add the web server as a remote to the build folder. The easiest way to do this is just to clone the repo into the build folder and rename the folder as _site.

Now you clone the git repo and add the static site files minus the content.

Then push back to the web server and you will see it will checkout the files, you can now add symbolic links to the dropbox folder as suggested in part 1.

Now switching to the build folder check that jekyll builds ok.

This give us a directory where the Dropbox hosted content is combined with the static site files to make the complete website.

Getting the site live

Now we need to copy the built website to the internet, for this I would choose to use git.

No if you followed the suggestion above you should have the option of doing git add, git commit, git push. Ideally you should set this up using shh keys and for ease password less ssh keys.

It is a good idea to check this works before we automate it. However bare in mind that depending on your server domain settings any thing you post could go public.

If all works ok then it is time to add the cron job.

Cron to build at the right time

I use cron in this setup to control when the build server builds and uploads the website. While it would be possible to build on every Dropbox change I prefer to build at fixed intervals. To do so I use the following bash script,

export PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Path to icss script to upload images
/PATH/TO/icss.sh

#change to build directory
cd /ADD/BUILD/DIRECTORY

if /usr/local/bin/jekyll build; then
        git add .;
        git commit -m "script build";
        HOME=/HOMEFOLDER/OF/USER/WITH/SSHKEY git push origin master;
else
        echo "build error"
fi

This script triggered from cron first runs the icss image upload, then builds the website and finally use git to upload the built site as well as the entire Jekyll build directory. This does mean that the domain should be pointed to ‘_site’ folder off the checked out repo on the web server.