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.
Setup a S3 bucket for Website Hosting
Hosting a Static Website on Amazon S3 - Amazon Simple Storage Service
Host a static website on Amazon S3 by configuring your bucket for website hosting and then uploading your content to…
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",
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
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.