02 March 2017

Phenomic + Travis CI + Netlify

Deploying Phenomic static sites with juicy reactjs onto Netlify.

Phenomic has a great guide for deploying to Netlify but it depends on letting Netlify do the deploys for you. On one side this is great but if you are on the free plan then you have a fair usage limit.

If you do have Travis CI (or another CI software), granted Travis CI does cost money however if you are using it for other projects then it is already paid for.

Create a site on Netlify

Go to https://app.netlify.com/sites and create a website there. You will then need the API for the website.

Now go to https://app.netlify.com/applications and create a personal access token for your CI software to use.

Setup Travis CI for your repository

Enable Travis CI for your chosen repo with your phenomic website in it. Then add your API and personal access tokens to the environment variables of Travis CI.

Setup your .travis.yml file in the root of of your repository as below, which is modified from the deploy guide for github pages:

language: node_js
node_js:
  - '5'

deploy:
  skip_cleanup: true

  provider: script
  script: ./scripts/deploy.sh

  on:
    branch: master # replace with
    node: '5'

Now place the deploy.sh script in the /scripts/ folder, which is modified from a Jekyll deploy script:

#!/usr/bin/env bash
set -e # halt script on error

zip -r website.zip dist

curl -H "Content-Type: application/zip" \
     -H "Authorization: Bearer $NETLIFYKEY" \
     --data-binary "@website.zip" \
     https://api.netlify.com/api/v1/sites/$API/deploys

Where the following are:

  • $NETLIFYKEY is your ENV variable for your Netlify key
  • $API is your ENV variable for your website api key

Ensure you set the correct permissions on the deploy.sh:

chmod +x ./scripts/deploy.sh

Now deploy away!