Deploy Gatsby.js Site to AWS S3 using CircleCI Restful API

Yi Ai
Yi Ai
Jan 15 · 3 min read

If you’re looking to launch a static, safe and speedy website, you may consider Gatsby, This article will show you the process of using Gatsby with CircleCI, and continuous build static website when content is created, stored, and managed in headless CMS, and presented by Gatsby.

AWS S3

Setup a S3 bucket for Website Hosting

Gatsby Site

CircleCI config.yml

Create config.yml in .circleci directory at root of Gatsby site project. eg. config.yml should like

Install Gatsby Cli as development dependencies

CircleCI will need to use Gatsby CLI node_modules/.bin/gatsby to rebuild static site.

npm install --save-dev gatsby-cli

Then, add following code to package.json scripts property:

"build:ci": "node_modules/.bin/gatsby build",

CircleCI Dashboard

Go to CircleCI -> User Settings-> Account Integrations-> Connect Github.

Go to CircleCI ->Add Projects, Follow the project you just created, then go to project settings , set following permissions:

  • Checkout SSH Keys: Checkout source code from Github, Bitbucket…
  • SSH Permissions: Set key of Access to CircleCi build server.
  • AWS Permissions: Set the AWS credentials to be used for authenticating against AWS services during your builds.
  • API Permissions: Create and revoke project-specific API tokens to access this project’s details using CircleCI API.

Push Gatsby site latest source code to GitHub and let CircleCI do the rest!

Using the CircleCI API to Trigger Jobs

Some CMS use web hooks rebuild and deploy site using CircleCI, eg. you can automate deploy process using Contentful Webhooks and Jekyll or Middleman integrations.

In my case, I have a react headless CMS. When content updated/added/deleted, CMS sends http POST request trigger CircleCI to rebuild and deploy new generated static site to AWS S3.

You can use following command to test the rebuild process through Restful API, API Token is generated in previous step — Set AWS Permissions.

curl -X POST https://circleci.com/api/v1.1/project/:vcs-type/:username/:project/build?circle-token=:token

eg.

curl -X POST https://circleci.com/api/v1.1/project/github/neami/Gatsby-Site-Auto-depoyment-with-CircleCI/20/retry?circle-token=[YOUR_API_TOKEN]

You can find all the code on GitHub.

The Apps Team

We are an Applications Team in Australia. Our mission is to provide our staff with the best technology to provide the best possible service to customers.

Yi Ai

Written by

Yi Ai

An aspiring full-stack developer, a Serverless enthusiast

The Apps Team

We are an Applications Team in Australia. Our mission is to provide our staff with the best technology to provide the best possible service to customers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade