All Articles

Auto deploy Gatsby site with Gitlab CI/CD to Netlify

Recently I just made the move to Gitlab, for its powerful support of CI/CD (Continuous Integration / Continuous Delivery).

My blog (this site), which is powered by Gatsby is hosted there, and I wanna make use of the CI/CD pipeline. Here how it’s done.

To get started with Gitlab CI/CD, create a file name .gitlab-ci.yml. This is the content:

image: node:latest

cache:
  paths:
    - node_modules/

stages: 
- build

build:
  script:
    - npm install
    - ./node_modules/.bin/gatsby build
    - npm i netlify-cli -g
    - netlify deploy --site=$NETLIFY_SITE_ID --auth=$NETLIFY_AUTH_TOKEN --prod
  artifacts:
    paths:
      - public
  only:
    - staging

Explain:

  • image: node:lastest - Pull a node Docker image with tag latest. We need node environment for our npm install
  • cache - Gitlab CI leverages caching for improving pipeline speed for subsequent build. This case, the node_module will be cached for every later build.
  • stage: There are 1 stage only for this pipeline
  • script: What you actually make the pipeline do. We leverage the netlify-cli to programmtically deploy our build folder after gatsby build step.

Environment Variable: $NETLIFY_SITE_ID and $NETLIFY_AUTH_TOKEN are your secret Netlify credentials.

You can find these here:

  1. Netlify Site ID:
  2. Netlify Auth Token:

Then go to your gitlab repository, go to `Settings\CI/CD\Environment Variables and set them

That’s it. Please let me know if the script works.

Tuan