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 youremail@gmail.com

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 🙃