Jekyll Continuous Integration With Codeship And Bitbucket

October 27, 2015

Codeship is a popular Continuous Deployment (CD) tool that integrates nicely with Bitbucket, and Jekyll is a static site generator. In fact, this site is built with Jekyll. Frequently, Jekyll users will deploy their site to Github Pages. In this post, we'll show you how to build your Jekyll site with Codeship and deploy to Bitbucket, with Aerobatic hosting the resultant static site.

In doing so, Codeship will take your Jekyll markdown files, generate your static assets, push them to Bitbucket, and Aerobatic will automatically update your hosted site. The benefit to this kind of flow is that you don't need to generate the static content locally. In fact, you can then get in the habit of editing markdown files in Bitbucket directly, and everything else will happen automatically.

You can download one of the many Jekyll themes and follow their quick start guide or one of our previous blog posts on Jekyll.

In our case, we are not going to build the site locally, so in the .gitignore file, if it isn't already, add _site. This tells git not to push the _site folder to your hosted repo.

  1. Push your Jekyll site to Bitbucket, either from the command line, or using a tool like Sourcetree.

  2. Create a new branch - in this demo, we're calling our branch aerobatic but you can call it whatever you want. This will be the branch that we have Codeship push the built assets to and have Aerobatic host our site.

  1. Create a new Codeship project and select the repo on Bitbucket that you just pushed.
  1. In the Setup Commands section, select Ruby as your language.

  2. Remove the auto-generated commands in the Test Commands section

  3. Save your changes

  1. Create your deployment commands

    We're going to use a Rakefile to instruct Codeship how to build and publish. So, in your deployment command section, select master as the branch to trigger the build and enter the following in the custom scripts section:

By default, when you link your Bitbucket repository to Codeship, it will automatically place a SSH key in the deployment keys section of your repo. However, this key is read-only, and you need to enable Codeship to also push to your repository. We're going to delete that read-only key and create a new one at the account level that can also push to your repository.

  1. Delete the repository Deployment Key
  1. Copy the Codeship SSH Public Key
  1. Create an account level SSH Key
  1. The Rakefile will be pushed to our repository, and this will tell Codeship how to build and publish the Jekyll site. Replace the repository details with your own:

    require 'tmpdir'
    
    desc "Generate jekyll site"
    task :generate do
      puts "## Generating Site with Jekyll"
      system "jekyll build"
    end
    
    desc "Generate and publish blog to Bitbucket"
    task :publish do
      Dir.mktmpdir do |tmp|
        system "mv _site/* #{tmp}"
        system "git checkout -b aerobatic"
        system "rm -rf *"
        system "mv #{tmp}/* ."
        system 'git config --global user.email "jason@aerobatic.com"'
        system 'git config --global user.name "Jason Gowans - Codeship"'
        system "git add ."
        system "git commit -am 'Codeship Update'"
        system "git remote add bb git@bitbucket.org:dundonian/jekyll-codeship.git"
        system "git push -f bb aerobatic"
      end
    end
    
  2. Push your Rakefile to Bitbucket. Once you push your changes, your Codeship build will kick-off automatically.

Now that we have Codeship set up, we can now git push our markdown files to the master branch and Codeship will deploy our static assets to the aerobatic branch.

To host the static website, we now just need to link the aerobatic branch to Aerobatic, assuming you've already installed the Aerobatic add-on for Bitbucket.

Phew, you're now done! Thankfully, all of this was a series of one-time steps. From now on, you can just push markdown files to the master branch and everything else will happen automatically. You can even just create your markdown blog posts directly in the Bitbucket UI.

The demo app is live on Aerobatic at http://jekyll-codeship.aerobaticapp.com/.