Create a Gatsby Website and Deploy It with Now

Learn how to create a simple Gatsby website and deploy it live with ZEIT Now

Gatsby is a popular front-end framework that helps you create static apps and websites with React.

In this guide, we will show how you can set up your Gatsby project and deploy with Now in a few moments.

Step 1: Set Up Your Gatsby Project

If you have not already set up a Gatsby project you can do so by first installing Gatsby CLI globally from your terminal:

yarn global add gatsby-cli

Installing gatsby-cli globally with Yarn.

Then you can run the following command to create a Gatsby project locally:

gatsby new my-gatsby-project

Creating a Gatsby project by creating the my-gatsby-project directory and generating content within it with gatsby-cli.

At this point you you add a now-dev script to your package.json file. This will allow you to replicate the Now environment locally:

{
  ...
  "scripts": {
    ...
    "now-dev": "gatsby develop -p $PORT",
  }
}

Adding a now dev script to the package.json file.

The @now/static-build Builder supports a custom now-dev script that allows you to define custom development behavior while gaining extra features that mimic the Now platform locally.

To run your project locally, all that's required is a single command:

now dev

Step 2: Deploying Your Gatsby Website with Now

With a Gatsby application set up, it is ready to deploy live with Now.

First, you need to provide Now with instructions on how to build your Gatsby project using a now.json configuration file:

{
  "version": 2,
  "name": "my-gatsby-project",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "public" }
    }
  ]
}

An example now.json file for your Gatsby project.

This now.json file will allow your deployment to do several things, specifically:

The @now/static-build Builder you added requires a script to be included in the package.json you provided as the entrypoint. This script can be added to the end of the array of scripts that Gatsby CLI created for us as you did earlier with now-dev:

{
  ...
  "scripts": {
    ...
    "now-build": "npm run build"
  }
}

Adding a now build script to your now.json file.

And with configuration set up, you can now deploy your Gatsby project.

If you have Now CLI on your system, you can deploy from your terminal with just one command:

now

If you want to deploy your Gatsby project when you push to a GitHub repository, you can use Now for GitHub to have your project automatically deployed on every push, and aliased on push to master.

When your app has been deployed, you will receive a URL similar to the following: https://my-gatsby-project-fp9racotj.now.sh/

Bonus: Cache Your Gatsby Assets

Caching is a key part of making your websites fast for users, new and returning. With this in mind, Now's routes configuration allows you to set up caching headers easily.

The Gatsby documentation has recommended cache control values which we will use for our routes configuration. Since Now will cache all static assets for one year without any configuration, we just need to tell the platform to avoid caching of HTML pages.

In the now.json configuration file, add the following routes property:

{
  ...
  "routes": [
    {"src": "^/(.*).html", "headers": {"cache-control": "public,max-age=0,must-revalidate"}, "dest": "$1.html" }
  ]
}

Routes configuration for setting caching headers based on Gatsby recommendations.

Resources

For more information on working with Gatsby, please refer to their documentation.

To configure Now further, please see these additional topics and guides:



Written By
Written by timothytimothy
on January 31st 2019