Janik von Rotz

3 min read

Autodeploy to Github Pages with Travis CI

Github pages are a common way to create a website for your open-source project. Github provides a website generator tool which simply reads the README file from your repository. The big disadvantage is that there’s no auto deployment for your this kind of website. You always have to run the generator manually. To solve this problem we need a third-party computing engine that automatically updates our page. This is the perfect job for Travis CI. Travis CI is a Github integrated continuous testing platform that runs tests for different development frameworks. It triggers a test whenever you make a commit on your Travis registered repository. We will use Travis to update our page whenever we make a commit to our repository.

Now I will show you how you can setup this kind of autodeploy. This guide assumes you have a repository on Github that uses npm and gulp to create a website into a folder named out. Make sure to update <> tags in the instruction steps.

This script will be executed by Travis CI later. The idea of the script is to create an out folder which holds the website that is deployed to the Github page repository.

set -e # exit with nonzero exit code if anything fails

# clear and re-create the out directory
rm -rf out || exit 0;
mkdir out;

# run commands to build the website in the out folder
npm install -g gulp
npm install

# go to the out directory and create a *new* Git repo
cd out
git init

# inside this git repo we'll pretend to be a new user
git config user.name "Travis CI"
git config user.email "<name>@<domain>.com"

# The first and only commit to this new Git repo contains all the
# files present with the commit message "Deploy to GitHub Pages".
git add .
git commit -m "Deploy to GitHub Pages"

# Force push from the current repo's master branch to the remote
# repo's gh-pages branch. (All previous history on the gh-pages branch
# will be lost, since we are overwriting it.) We redirect any output to
# /dev/null to hide any sensitive credential data that might otherwise be exposed.
git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages > /dev/null 2>&1

As already mention this script uses npm to installs gulp and dependencies and also runs the gulp tasks that will in result create the website.

This configuration file will tell Travis what to do and set environment variables which will passed to our deploy.sh script file.

If you want to see an example in action open this repository: https://github.com/HaloCustomEdition/Halo

Categories: Web development
Tags: continuous integration , github , testing , travis
Improve this page
Show statistic for this page