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.

If you have not yet installed Now, you can do so by installing the Now Desktop app which installs Now CLI automatically, or by installing Now CLI directly.

Now allows you to deploy your project from the terminal with just a single command:

now

Deploying the application with the now command.

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

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