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:
Installing gatsby-cli globally with Yarn.
Then you can run the following command to create a Gatsby project locally:
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:
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:
- Use the latest Now 2.0 version of the platform.
- Set the project name to "my-gatsby-project".
- Use the @now/static-build Builder to take the
package.json
file as an entrypoint and use thepublic
directory as your content directory.
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:
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: