Continous delivery of Jekyll blog to surge.sh with Codeship

Now that the blog has been created, it is time to setup continuos delivery. The goal of setting this up is to be able to just push new changes to the master branch in Bitbucket and the blog will automatically be deployed to surge.

I was actually considering building a small NodeJS + ExpressJS app, which would listen to Bitbucket webhooks and then run my small deploy script. Then I found Codeship. Codeship is a continous delivery service you can connect with your Github or Bitbucket repository. You can then set it up to build your code and deploy it to your hosting provider, and it is all very easy to do. Surge has already written a great guide on how to use Codeship with surge, which you can find here: https://surge.sh/help/integrating-with-codeship. I am going to repeat the steps below, and add one important command to make it work with a Jekyll blog.

Getting your surge token

To be able to authenticate yourself to surge, you will need to find your surge token. If you store that token in an environment variable, surge will be able to authenticate you, and you can run the surge tool like normal. To get your token, simple execute this command in your terminal:

surge token

You will be asked to login again, and then you will be presented with your token.

Setting up surge as a devDependency

If you followed the first part of this guide you have a working Jekyll blog, but you are not using any node/npm libraries yet. Because Codeship does not have the surge utility installed on their build machines, you need to get it installed - and we can use npm for that. To setup npm, run:

npm init

This will create a package.json file in your current directory (so execute that command at the root of your blog directory). Npm will ask you a few questions, and then generate the file.

Now you can install the surge command line client, and save it as a devDependency with this command:

npm install --save-dev surge

Create new project on Codeship

You can now go to Codeship and create an account. The free account should be good enough for a blog. Then link that account with your Github or Bitbucket repository.

Setup commands

Codeship will ask you for some setup commands. These commands are used to prepare their virtual machine with the tools needed for building your code. We need to specify these commands:

# Install the latest version of Node.js
nvm install stable
nvm use stable

# Install Surge as a devDependency
npm install

# Install Jekyll
gem install jekyll

Add environment variables

To tell codeship how to authenticate against surge, we need to setup two environment variables. So find the page to add environment variables, and add these two:

SURGE_LOGIN = <your surge email>
SURGE_TOKEN = <your surge token>

Add deployment script

To be able to add a deployment script, you have to do a push to your repository. After you have done that, Codeship will update the page with the first build. They also show some new buttons, so you can Setup Continuous Deployment.

Select Custom Script and enter the following commands:

jekyll build
surge _site/ <yourdomain>

Next time your push to your repository, your blog on surge will be updated automatically!