Deploying Gatsby Cloud Sites with gatsby-plugin-s3

Gatsby Cloud currently does not support setting metadata (e.g. client-side cache control headers) or writing redirects when uploading files to your bucket. The purpose of this guide is to demonstrate a workaround that uses gatsby-plugin-s3 to deploy your Gatsby Cloud site. This guide assumes you:

• are familiar with gatsby-plugin-s3
• understand how the plugin deploys your site
• know how to deploy a Gatsby site using the plugin outside of Gatsby Cloud

Deploying with gatsby-plugin-s3

The general approach for this workaround is to build your site with Gatsby Cloud, but allow gatsby-plugin-s3 to handle deployment. The trade-off is that:

• Gatsby Cloud will not be able to remove unpublished or deleted content from your bucket
• This approach may not work well with incremental builds enabled

First, be sure to add your AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY​ as environment variables, see Managing Environment Variables.

Then, define a script for your deploy command, e.g.:

{
  "scripts": {
    "deploy": "gatsby-plugin-s3 deploy --yes"
  }
}

Finally, use an onPostBuild script to run your deploy command.

const util = require("util");
const child_process = require("child_process");
const exec = util.promisify(child_process.exec);
exports.onPostBuild = async (gatsbyNodeHelpers) => {
  const { reporter } = gatsbyNodeHelpers;
  const reportOut = (report) => {
    const { stderr, stdout } = report;
    if (stderr) reporter.error(stderr);
    if (stdout) reporter.info(stdout);
  };
  reporter.info("Deploying build w/ gatsby-plugin-s3");
  reportOut(await exec("npm run deploy"));
};