Scott's Thoughts Pamphlet!

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

  • Zeit’s now

  • Gatsby

  • Travis DUH!

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 url for development and a sub-domain of my domain for master/production.

The set-up

There are a few parts to setting this up, the first is adding your repository to then adding your NOW_TOKEN from 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 url configured in my package.json

My travis.yml looks like this:

1sudo: false
3language: node_js
6 directories:
7 - node_modules
10 email: false
13 - '9'
16 - npm prune
19 - npm i -g now@canary
20 - npm run clean
21 - npm run build
22 - npm run deploy
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
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 --token $NOW_TOKEN",
13 "alias:prod": "now alias --token $NOW_TOKEN",
14 "cleanup": "now rm scottblog --safe --yes --token $NOW_TOKEN",
15 "release": "release-it"
16 },

Back to Top

Scott Spence

Built with Gatsby · Hosted on Vercel · 2021