CI/CD Basics with Travis-CI

Automatically update GitHub pages for a repository as soon as the master branch is updated

Software development world has always been volatile — ever-changing, ever-evolving. New tools emerge almost every day. Some create better things for the world and some make the process of creating things better.

Deploying the latest, well tested and bug-free code seamlessly to production has always had a lot of friction and uncertainty. In spite of all the amazing standards and guidelines, there can be a lack of time and resources to make the best of them all. But now, we have automation to take care of all that for us. 

CI/CD is a set of practices and strategies that make ‘the process of creating things’ better.

We have been hearing that Continuous Integration and Continuous Delivery, are the tools of the trade for all developers, and they are the heart and soul of every fast-evolving code base. They provide true and tested techniques to deliver seamless and bug-free code.

But how does all this work? 

CI (Continuous Integration)

In its very essence, CI is simply a means automating the test and build process of any application and integrate the tested code to the codebase. In addition to that, CI aids in saving time otherwise spent in manually testing the code. This means it also promotes writing tests. 

In this post, we’ll take a look at Travis-CI and how to implement it with your GitHub repository to instantly update the GitHub pages branch (gh-pages) as soon as there is an update in the master branch.

I am using a node.js app so the code will be for a node build.

What you’ll need:

1. GitHub account

2. GitHub public repository (private works if you prefer paid version of Travis-CI)

3. Travis-CI account

Steps

1. Login to travis-ci.org (use your GitHub account to login)

2. Add the repository (from one of your GitHub repositories) that you want to implement CI on

3. Add a .travis.yml file to your repository and use the configurations below:

language: node_js
node_js:
  - "stable"
cache:
  directories:
    - node_modules
script:
  - npm run build

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $gh_token  # Set in the settings page of your repository, as a secure variable
  local_dir: build
  on:
    branch: master

Now, go to travis-ci.org and onto the repo settings page

4. Create an environment variable called gh_token from repo settings (to use it in the travis.yml file)

Set the value as your GitHub Personal Access Token.

If you are unsure how to obtain a GitHub Personal Access Token, please follow this link to find out.

Now, make any changes to your app and commit(or merge) them to the master branch. You should see an update in Travis CI. 

If all goes well the gh-pages branch should be created in your repository and Travis is successfully integrated. 

You can access the live app via the GitHub pages URL: https://{your-github-username}.github.io/{repository-name}

Now with this new found power of Travis-CI you are ready to think of more interesting ways to build your programming habits.