Automatically deploying a website to Github pages using Travis CI

Travis CI is a continuous integration service used to build and test software hosted on Github.
In this blog post I'll briefly cover the subject of Continuous Integration and explain step by step how to deploy your project to Github pages using Travis.

Table of contents:

What is Continuous Integration?
How to deploy a website to Github pages using Travis CI

<a name="ci"></a> What is Continuous Integration?

Continuous Integration, or CI for short is the development practice of automating the build and testing of code every time a team member commits changes to their version control system.

This diagram represents the process pretty well:

<a name="howto"></a> How to deploy a website to Github pages using Travis CI

In my specific case, I wanted to automate the deployment process for the website you're currently visiting.
In other words, for each new article or change to the website itself, I wanted to test, build and deploy it to Github pages to keep it up to date.

I turned to Travis CI for multiple reasons, it's free, easy to set up and the web client is practical.

So, how did I do exactly what I wanted?

<a name="activate"></a> Step 1: Activate Travis on your Github repository

Simply go to Travis-ci.com and Sign up with Github.
Accept the Authorization of Travis CI. You’ll be redirected to GitHub.
Click the green Activate button, and activate the repositories you want to use with Travis CI.

<a name="configure"></a> Step 2: Configure the CI process for your repository

To do so, add a .travis.yml file at the root of your repository, this file will basically tell Travis what to do and in what order.
Thankfully, the process is simplified, especially when it comes to deploying to Github pages, take a look at this example:

1# Important for the Travis container set up
2language: "node_js" # Language used by the project
3node_js: "8" # Node version used
4
5cache:
6  directories:
7    - "node_modules" # Travis will cache node_modules so it doesn't reinstall them every time
8
9# Lifecycle job, will execute the actions bellow before the build and deployment.
10# Find other build lifecycle hooks here: https://docs.travis-ci.com/user/job-lifecycle
11before_script:
12  - npm run lint
13
14# This is where the magic happens, Travis handles Github pages deployment automatically
15deploy:
16  provider: pages # Tells Travis we're deploying on Github Pages
17  skip-cleanup: true # Make sure you have it set to true
18  github-token: $GITHUB_TOKEN # See notes bellow
19  local_dir: dist # The directory to deploy
20  repo: github_username/repository_name # For example christopherkade/christopherkade.github.io
21  target_branch: master # Branch to be deployed on
22  on:
23    branch: code # Deployement only triggered when code is pushed on the code branch
24

Note that the $GITHUB_TOKEN must be set up directly in the repository's Settings on the Travis client.

To get that token, follow these brief instructions.

Step 3: <a name="trigger"></a> Trigger your first Travis CI build

To do so, start by adding, committing and pushing your .travis.yml file to Git.
You can now go back to the Travis client and see your build status.

If said build fails for reasons you cannot understand through the logs, feel free to check out common build problems.

If not, your Github page is now up and running thanks to the deploy statement in your configuration file. The deployment is visible as one of the very last logs of your build.

I hope this was useful to some of you, as discovering CI has truly made my development process more enjoyable as a whole.

Have a good one :-)
@christo_kade