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.

You can then see your new project running locally by running:

gatsby develop

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" }
    }
  ]
}

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:

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

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.

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

{
  ...
  "routes": [
    {"src": "^/public/static/(.*)", "headers": {"cache-control": "public,max-age=31536000,immutable"} },
    {"src": "^/(.*).(css|js)", "headers": {"cache-control": "public,max-age=31536000,immutable"} },
    {"src": "^/(.*).html", "headers": {"cache-control": "public,max-age=0,must-revalidate"} }
  ]
}

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:


How Was This Guide?

Written By
Written by timothytimothy
on January 31st 2019