Deployment of static websites to Digital Ocean using TravisCI

A blunt tutorial

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

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)

.travis/deploy.sh

.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):

gulp/
index.min.html
*.gz