Skip to main content

Deploying to Cloudflare Workers

Cloudflare Workers is a serverless platform for creating entirely new applications or augmenting existing ones without configuring or maintaining infrastructure. With Workers Sites you can deploy any static site including your Gatsby projects to a domain on Cloudflare or for free on your subdomain.

To enable the KV store required to serve the Gatsby files, you’ll need the Workers Unlimited plan for \$5/month.

This guide will get you started in a few steps:

  1. Installing wrangler CLI

Workers Sites requires wrangler. The more straight forward way to install wrangler is with npm, run the following command:

npm i -g @cloudflare/wrangler
  1. Initialize the Project

To create the Worker code that will serve your Gatsby files, from the root of your Gatsby project run:

wrangler init --site

You’ll notice your project structure should now look something like:

+ ├── wrangler.toml
+ └── workers-site
+ │   ├── index.js
+ │   ├── package-lock.json
+ │   └── package.json
  ├── src
  │   ├── components
  │   ├── images
  │   └── pages
  ├── gatsby-config.js
  ├── package.json
  1. Configure

To authenticate into your Cloudflare account run:

wrangler config

Follow the Quick Start for steps on gathering the correct account ID and API token to link wrangler to your Cloudflare account.

If you don’t already have a domain run:

wrangler subdomain

Then, add your account ID to the wrangler.toml file, and set bucket to "./public", which is where Gatsby’s built files are output by default:

name = "gatsby-project"
type = "webpack"
account_id = "abcd..."
workers_dev = true

bucket = "./public"
entry-point = "workers-site"

This deploys to your subdomain. For a custom domain see Quick Start.

  1. Deploy

You can deploy your application by running the following command in the root of the project directory:

wrangler publish

Now your site is available at!

  1. CI with GitHub Actions

Use wrangler’s GitHub action plugin to automatically deploy to Workers every time you push to master.

Once GitHub Actions is enabled on your repo, add a file to your project’s root called .github/workflows/main.yml with the contents:

name: Deploy production site

      - master

    runs-on: ubuntu-latest
      - uses: actions/checkout@v1
      - name: Navigate to repo
        run: cd $GITHUB_WORKSPACE
      - uses: actions/setup-node@v1
          node-version: "10.x"
      - name: Install deps
        run: npm install
      - name: Build docs
        run: npm run build
      - name: Publish
        uses: cloudflare/wrangler-action@1.1.0
          apiToken: ${{ secrets.CF_API_TOKEN }}
          environment: "production"

Set up CF_API_TOKEN in GitHub secrets with appropriate values from Quick Start.

Additional resources

Edit this page on GitHub