Deployment of static websites to Digital Ocean using TravisCI

#digitalocean #travis #devops #staticwebsite

Originally posted on Medium on May 8, 2016.

YMMV: The code below is given for the environment and use-case I had at the time of writing, adapt it for your requirements.

Stack

Code on GitHub, master branch deploys to prod, and staging branch deploys to a subdomain for preview and QA.
Web hosting on a Digital Ocean droplet, running Ubuntu 16.04. Using Nginx web server, serving www.planecq.com from /var/www/planecq.com/html.
TravisCI for the automatic deployment when git pushing to specific branches. It pushes to a bare git repo at /var/www/planecq.com/.git. From there, a post-receive hook checks out the latest code to the html folder.
Gulp used for the build and test workflow

1. Create an encrypted private key for travis (on your dev machine)

Install Travis CLI if needed:

gem install travis
travis login

Create the encrypted key and public key in your local repo:

cd ~/Sites/planecq.com
touch .travis.yml
ssh-keygen -t rsa -N "" -C "travis@planecq.com" -f travis_rsa
travis encrypt-file travis_rsa --add
rm travis_rsa
cat travis_rsa.pub # << copy this for later

2. Setup Travis on the droplet

Create a passwordless travis user on the droplet, setup the generated access key, and give it access to the folder where the website is hosted:

sudo adduser --disabled-password --gecos "" travis
sudo chown -R travis:travis /var/www/planecq.com
sudo su travis
mkdir ~/.ssh
chmod 700 .ssh
emacs .ssh/authorized_keys
"copy content of previous cat, save, exit"
chmod 600 .ssh/authorized_keys
exit

3. Prepare remote repository on the droplet

sudo su travis
cd /var/www/planecq.com
mkdir .git
cd .git
git init --bare
cd hooks
emacs post-receive
"copy the content of the hook posted below, save, exit"
chmod +x post-receive
exit

post-receive hook:

#!/bin/sh
git --work-tree=/var/www/planecq.com/html/ --git-dir=/var/www/planecq.com/.git checkout -f

4. Travis config

.travis.yml

language: node_js
node_js:
  - 4.3.1
env:
  global:
  - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
addons:
  ssh_known_hosts: webhost.planecq.xyz
branches:
  only:
  - master
  - staging
before_install:
  - rvm install 2.2.2
  - openssl aes-256-cbc -K $encrypted_b0b2958c016f_key -iv $encrypted_b0b2958c016f_iv -in .travis/travis_rsa.enc -out ~/.ssh/travis_rsa -d
  - chmod 600 ~/.ssh/travis_rsa
install:
  - gem install html-proofer
  - npm install -g gulp
  - npm install
script:
  - gulp build && gulp test
deploy:
  skip_cleanup: true
  provider: script
  script: .travis/deploy.sh
  on:
    all_branches: true
notifications:
  email: false
  slack:
    secure: rWg9[...]x69

gulp build

This is where the website is compressed for production. I have written a separate post covering that.

gulp test (extract of gulpfile.js)

var exec = require('child_process').exec;
var gulp = require('gulp');
var runSequence = require('run-sequence');
var bootlint  = require('gulp-bootlint');

// Validate html, links, etc.
gulp.task('html-proofer', function(done) {
  execute('htmlproofer ./index.min.html --check-html --check-favicon --check-external-hash', {}, done);
});

// Validate bootstrap
gulp.task('bootlint', function() {
  return gulp.src('./index.html.min')
    .pipe(bootlint({
      stoponerror: true
    }));
});

// Full test task
gulp.task('test', function(cb) {
  runSequence('html-proofer', 'bootlint', cb);
});

// Util to execute external command
function execute(cmd, opts, done) {
  console.log(cmd);
  exec(cmd, opts, function(error, stdout, stderr) {
    console.log(stdout);
    console.error(stderr);
    done(error);
  });
}

.travis/deploy.sh

#!/bin/bash

# print outputs and exit on first failure
set -xe

if [ $TRAVIS_BRANCH == "master" ] ; then

    # setup ssh agent, git config and remote
    eval "$(ssh-agent -s)"
    ssh-add ~/.ssh/travis_rsa
    git remote add deploy "travis@webhost.planecq.xyz:/var/www/planecq.com"
    git config user.name "Travis CI"
    git config user.email "travis@planecq.com"

    # commit compressed files and push it to remote
    rm -f .gitignore
    cp .travis/deployignore .gitignore
    git add .
    git status # debug
    git commit -m "Deploy compressed files"
    git push -f deploy HEAD:master

elif [ $TRAVIS_BRANCH == "staging" ] ; then

    # setup ssh agent, git config and remote
    eval "$(ssh-agent -s)"
    ssh-add ~/.ssh/travis_rsa
    git remote add deploy "travis@webhost.planecq.xyz:/var/www/planecq.xyz"
    git config user.name "Travis CI"
    git config user.email "travis@planecq.com"

    # commit compressed files and push it to remote
    rm -f .gitignore
    cp .travis/deployignore .gitignore
    git add .
    git status # debug
    git commit -m "Deploy compressed files"
    git push -f deploy HEAD:master

else

    echo "No deploy script for branch '$TRAVIS_BRANCH'"

fi

.travis/deployignore

This file replaces .gitignore for deploy only and lets the following files to be committed and deployed (files generated by gulp build and normally ignored in the repository):