Gatsby.JS on Circle.CI + Netlify

If you want to get around Netlify's initial limitations (and not to be billed accidentally, once you surpass it) - you could use CircleCI for the build process ⚙ and then deploy to Netlify ☁

Why CircleCI?

Netlify provides a simple, out-of-the-box building & deployment process. You basically specify the Base directory, the Build Command, Publish directory - and you’re done.

Usually that’s more than enough to build a Gatsby.JS website - however Netlify offers 300 minutes of build-time per month, and if you exceed this, they will automatically charge you.

Image

Another issue that comes with Netlify - it allows only a 15 min build process, if your website has many images, it might exceed this limit and you will suddenly fail ? to publish new versions.

CircleCI - has a free tier that offers 2500 credits / week. The default build instance spends around 10 credits / minute, this means that CircleCI offers you 250 minutes per week (or ~1000 minutes a month). I have also noticed that the default build instance (“Medium”) is building my website faster than Netlify did (Netlify was taking ~18 minutes, and was timing-out, while CircleCI was taking ~12-13 minutes).

Image

You are also pretty flexible with CircleCI - you can build a workflow that fits your needs (not just running a npm build command).

Implementation

The idea is simple:

• disable auto-build process on Netlify;
• create a project on CircleCI;
• write config.yml (define the build process);
• use Netlify CLI to push the built website to Netlify.

Image

Disabling is pretty simple - on Netlify’s Project Page, just go to Build & Deploy, click Edit and check “Stop builds”.

Image

CircleCI has a pretty simple onboarding process, so I’m not going to cover how to create a project there, let’s get into writing the config.yml. In my case, the gatsby files live under /app/ sub-folder.

version: 2.1
executors:
  node-executor:
    docker:
      - image: circleci/node:12
commands:
  gatsby-build:
    steps:
      - checkout

      - restore_cache:
          keys:
            - npm-cache-{{ checksum "./app/package-lock.json" }}
      - run:
          name: Install Dependencies
          command: npm --prefix ./app install && npm --prefix ./app run-script clean
      - save_cache:
          key: npm-cache-{{ checksum "./app/package-lock.json" }}
          paths:
            - ./app/node_modules
      - restore_cache:
          keys:
            - gatsby-public-cache-{{ .Branch }}
      - run:
          name: Gatsby Build
          command: GATSBY_CPU_COUNT=2 npm --prefix ./app run-script build
      - save_cache:
          key: gatsby-public-cache-{{ .Branch }}
          paths:
            - ./app/public
workflows:
  version: 2
  build-deploy:
    jobs:
      - build:
          filters:
            branches:
              ignore:
                - master
      - release:
          filters:
            branches:
              only:
                - master
jobs:
  build:
    executor: node-executor
    working_directory: ~/repo
    steps:
      - gatsby-build
      - run:
          name: Netlify Deploy
          command: ./app/node_modules/.bin/netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN --dir=app/public
  release:
    executor: node-executor
    working_directory: ~/repo
    steps:
      - gatsby-build
      - run:
          name: Netlify Deploy
          command: ./app/node_modules/.bin/netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN --prod --dir=app/public

This config covers some aspects such as:

• Caching of the node_modules (between builds), because most probably we’re just updating content;
• Caching of the public folder (potentially might enhance speed)
• Ability to have 2 different build processes - using master branch for production, and any other branch for a different ‘build’ process - which can be customized to be published elsewhere for testing.

Last bit - Environmental Variables:

Make sure you migrate all of your Environmental variables to CircleCI - because they might be needed during the build process (i.e. if you’re using Algolia and you index your content during the build process).

Now, you can notice there are some new environmental variables used in the config.yml file, let’s go through them:

• NETLIFY_SITE_ID -  this is the Site ID found on Netlify’s project page, under: General → Site Information → API ID.
• NETLIFY_ACCESS_TOKEN - this is your personal token. You can generate one by going to your Netlify’s profile → User Settings → Applications → Personal Access Token.

Image

Also make sure you have these 2 packages in your Gatsby website:

• gatsby-plugin-netlify
• netlify-cli

These should be enough to get you started with the CircleCI integration. Hope this was helpful for you - feel free to leave a comment or a reaction down below ?