Making a CI pipeline with Travis CI

I thought I’d set up this blog with some sort of build pipeline, the intention was to have a good Continuous Integration pipeline so that if there were any issues when building the site that I wouldn’t push a broken build. No one wants to see that 😿

I’m feeling my way around with this and I’m presuming it’s far from perfect or ideal even, but I have it as a functional work-flow.

What I’m using

How the set-up works

I have my GitHub project set up with two branches master and development, changes are made on feature branch of development then pushed into development then up to master once I’m happy the change is ok to go to production.

Using Zeit’s now you can define a different url for each of your environments. I have a .now.sh url for development and a sub-domain of my scottspence.me domain for master/production.

The set-up

There are a few parts to setting this up, the first is adding your repository to https://travis-ci.org/ then adding your NOW_TOKEN from https://zeit.co/account/tokens to the repository settings page on Travis-ci

The guide here covers it for using now, the part I found particularly painful was generating the secure variable for the .travis.yml file because I don’t have Ruby installed and I struggled to set it up on my OpenSUSE WSL install, so instead I used a Cloud9 machine in the end.

the flow

Issue is “Add self hosted Fonts #75” I’ll make a branch from git and give it a name to reflect the issue number dev/75/add-self-hosted-fonts I’ll make my changes locally then push to the development branch.

Once I have merged these changes into the development branch then I can view them om the .now.sh url configured in my package.json

My travis.yml looks like this:

1sudo: false
2
3language: node_js
4
5cache:
6  directories:
7    - node_modules
8
9notifications:
10  email: false
11
12node_js:
13  - '9'
14
15before_script:
16  - npm prune
17
18script:
19  - npm i -g now@canary
20  - npm run clean
21  - npm run build
22  - npm run deploy
23
24after_script:
25  - if [ "$TRAVIS_BRANCH" = "development" ]; then npm run alias:dev;
26    fi
27  - if [ "$TRAVIS_BRANCH" = "master" ]; then npm run alias:prod; fi
28  - if [ "$TRAVIS_BRANCH" = "master" ]; then npm run release; fi
29  - npm run cleanup
30
31env:
32global:
33  secure: lngmfinghashvariable!

My package.json looks like this:

1"now": {
2    "name": "scottblog"
3  },
4  "scripts": {
5    "clean": "rm -rf .cache/ && rm -rf scottblog/ && rm -rf public/",
6    "build": "gatsby build && mv public scottblog",
7    "deploy:now": "npm run clean && npm run build && now scottblog/",
8    "dev": "npm run clean && gatsby develop",
9    "format": "pretty-quick",
10    "precommit": "pretty-quick --staged",
11    "deploy": "now scottblog/ --token $NOW_TOKEN",
12    "alias:dev": "now alias blog-scottspence.now.sh --token $NOW_TOKEN",
13    "alias:prod": "now alias blog.scottspence.me --token $NOW_TOKEN",
14    "cleanup": "now rm scottblog --safe --yes --token $NOW_TOKEN",
15    "release": "release-it"
16  },