Deploying a static Gatsby app using Now.sh
Tags: gatsby, deploy, zeit, react
Published: 2019-06-03 05:26:04


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:

```javascript
// 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:

```javascript
// 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](https://zeit.co/docs/v2/integrations/now-for-github/) to Now.sh. Afterward, all we need is to add a `now.json` file similar to the previous step:

```javascript
// 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:

```javascript
// 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](https://fsociety.at) 🙃