Deploying a static Gatsby app using Now.sh

If you are making your new static website with Gatsby, you are probably looking for an easy way to build and deploy it. There are two generic ways for you to do so, using Github integration with Now.sh platform or manually using CLI. In this article, I explain both of these methods and reflect my experience of using Now.sh for the deployment of the very same blog you are reading.

My assumption for this article is that you are familiar with Gatsby and recently started using Now.sh. Hopefully, you registered a domain with this service as well to create an alias for your deployment but it's not necessary.

Using CLI

Now.sh has a very handy and powerful command line tool. No matter how much you like the idea of integration with Github or using the Desktop App, you would always need to go back to cli for advanced functions. I also hate to say it but it's much more reliable than Github integration since sometimes those services just stop working for technical reasons.

In order to deploy you need to first download the command line tool from npm:

npm install -g now

Now you need to use this command in the terminal to log in to your now.sh account:

now login [e-mail]

Enter the password and you're all set. If you enter now in every folder, it will upload all the files in that folder into a new address which is assignable to your domain. However, if you do it with a Gatsby blog you end up uploading all the files in your source directory including package.json but not the static files. If you want to run a build in the cloud, you need to specify a configuration file for now.sh to understand how to build your files.

Add a file with the name now.json in the root of your Gatsby directory (next to package.json). This is a sample of how this file should be:

// now.json
{
  "version": 2, // using version 2.0 of now.sh
  "name": "Your Gatsby App Name",
  "alias": "yourdomain.com", // remove it if you don't own a domain with now.sh
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": {
        "distDir": "public" // default folder for Gatsby builds
      }
    }
  ]
}

One more step and we are good. Go to your package.json and add a new script called: now-build which should basically point to gatsby build like this:

// package.json
"scripts": {
    "dev": "gatsby develop",
    "now-build": "gatsby build",
    // other scripts ....
}

We are all set. Now you can simply run the command below in your Gatsby root folder:

now --target production

This command will prepare a new build and deploy your Gatsby app into your domain with Now.sh. Life is beautiful!

Using Github

Well yes, it's a great idea to use Github editor to write a new blog post or just edit the previous posts and Now.sh can trigger a new deployment immediately after every new commit. The rule of the thumb here is that if you already did set an Alias to your domain, every commit to master branch of your Github will trigger a deployment to your website URL and other branches will only deploy a version to a new address. This address is accessible inside your Github Environment tab or in your Now.sh dashboard.

In order to do it using Github you need to first connect your Github account to Now.sh. Afterward, all we need is to add a now.json file similar to the previous step:

// now.json
{
  "version": 2, // using version 2.0 of now.sh
  "name": "Your Gatsby App Name",
  "alias": "yourdomain.com", // remove it if you don't own a domain with now.sh
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": {
        "distDir": "public" // default folder for Gatsby builds
      }
    }
  ]
}

Also make sure to add now-build script to your package.json file:

// package.json
"scripts": {
    "dev": "gatsby develop",
    "now-build": "gatsby build",
    // other scripts ....
}

from now on, every commit to the master branch of your Github will trigger a deployment to your website URL. Great job, you're not a lazy developer!

This post is originally written for my personal blog fsociety 🙃

Comments

[Nick Richmond]

Can you explain what the purpose of the "builds" block is (in now.json)? Why are we setting src, use, and distDir the way you've outlined here?

Note that Zeit Now automatically inspects the package.json for a build command, so there isn't a need to explicitly set now-build. You can just use the regular "build": "gatsby build", which comes as a default command in package.json when using a Gatsby starter.

For other readers looking at the now.json and package.json in the Using CLI and Using GitHub sections and wondering how they are different in each section - I just checked with an online diff tool, and they are exactly the same...don't be like me, scrolling back and forth to try and find differences between them :)

[Pooria A]

There is a need, now.sh automatically looks for dist folder and Gatsby generates a public folder. So you either have to make gatsby build itself inside dist or ask now.sh to deploy the public folder.

For your second question, using a now-build script is recommended by the official docs: docs-git-plug-n-play-master.zeit.n...

[Richard Joseph]

Firstly, thank you for the article.

I came here to possibly pass this technique on to a colleague, I profess to knowing not a great deal about the Gatsby-Now symbiosis. However, I have successfully deployed a Gatsby starter onto Now, simply by issuing the now command, no 'now.json' necessary (I am vaguely aware of the file's usage from my older Now attempts).

Gatsby's own Now Github repository doesn't seem to have the 'now. json' file either:

github.com/zeit/now-examples

[Pooria A]

Seems like with a new update Now can identify the default dist folder for many frameworks. Before that it was only looking for /dist folder and with Gatsby it was a different name.

As you can see, they removed it all from many projects in a recent commit

Thanks for informing, will update the article soon.