Deploy Your Gatsbyjs Static Site to Netlify

GatbsyJS is a React framework for generating high performance static websites and apps. It has a wide set of available methods to access content and data that make for quick production of Progressive Web App compliant apps. Gatsby also has a super easy production and continuous integration setup with Serverless hosting.

There are a few places to host GatsbyJS apps including AWS, Github Pages, and now Gatsby Cloud. The host I've found the easiest and that offers a number of other useful tools is Netlify. With Netlify you can get a GatsbyJS app up and running in just a few minutes. Seriously, it will take longer to get your DNS transfered over.

Additionaly, for small sites like this one with just one admin and infrequent changes, you can host on Netlify for free. Hopefully whatever you're working on gains traction and you can happily pay Netlify once your usage goes over the free tier caps. Otherwise, it's a great free option for trying out new things.

This guide assumes you know a few things including using a command line terminal, Git, and some understanding of a Git hosting platform. If not, there are an endless amount of free courses on all of the topics. A few good starting places are FreeCodeCamp and The Odin Project. At minimum, go through all of the items on try.github.io

If you haven't already gone through any of the GatsbyJS tutorials I would suggest going through the main tutorial first. For the purpose of this guide we're going to speed up and use the gatsby-starter-blog-theme. This starter sets you up with a working GatsbyJS blog with blog posts generated from Markdown files.

To get started you need to have a few things already installed including Git, Node.js, and the Gatsby CLI. If you've gone through the GatsbyJS tutorial you've already done this. If you didn't go through the tutorial, follow the instructions on the development environment setup and stop before the Create a Gatsby Site section. You can confirm you have the Gatsby CLI installed by running gatsby --version and getting a version response.

gatsby --version
Gatsby CLI version: 2.7.8

If you get an error, go through the development setup again to make sure a step wasn't missed. Once you've confirmed Gatsby CLI is installed you can create the starter app with:

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme

This may take a minute or five to install all of the node dependencies. Once it is done you will have a new project in the my-blog directory. You can quickly get the local app running by changing into the my-blog directory and starting the development server.

cd my-blog
gatsby develop

Once you see, You can now view gatsby-starter-blog-theme in the browser, go to http://localhost:8000 to see the running local development site. You should see the default starter content. The theme has a nice toggle for switching from light to dark mode!

Now that you have a working local development environment you can get the same blog state hosted on Netlify fairly quick. First you need to host your project Git repo on a Git host. Netlify integrates with Github, Gitlab, and Bitbucket; for this guide we'll use Github.

The gatsby-starter-blog-theme initializes a Git repository when it creates the app. You can confirm this by running git log in the my-blog folder. Since you already have your local repo you only need to create a Github repo, add the Github remote to your local repo, and push your local repo to the new Github remote (see try.github.io if don't remember how to do this).

If you do not already have a Netlify account, now is the time to create one. Once you're logged in, on the Sites page, click the New site from Git button.

You will then be given a choice of the GIt hosting platform you are using. Again, we're using Github for this guide but the other two choices will be similar. Once we choose Github you will see a popup to log into your Github account and authorize Netlify access to your Github account. This is required to allow Netlify to track your repo(s) for new changes.

The next screen will allow you to select if you want to give Netlify access to all of your Github account repos or specify which repos to give it access to. I would suggest only allowing the repo created for this project. You can always add others later.

Last setup screen, almost there! After confirming the last Github access page you will be returned back to Netlify. All of the fields will be auto-populated with everything you need to deploy the site. One quick thing to note is that you can select the branch to automatically deploy any new commits from. This allows easily setting up one site configured as production from your master branch; you could then create an additional testing site that builds from a testing branch.

Once you've clicked Deploy Site you will be brought to the Site dashboard overview page. This is where you will manage this specific site going forward. Just below the generated site name you can see the Netlify hosted URL where the deployed site will be live. You can also setup your custom domain on the domain management page in the site settings.

You will see in the bottom left in Production Deploys that the site deploy is currently in process. If you click the top queued deploy you can see more details of the status and a deploy log. Remember how to get to the log as it will come in handy if a deploy ever fails.

Once the deploy is completed you can now refresh the Netlify hosted URL or your custom domain. You should see the same thing that you seen earlier in your local dev environment. And done, your site is live!

So what next? If you want to deploy any changes to the production site you simply make a change in your local repo, test it in the local environment, make a commit, and push to your remote repo. Netlify will immediately detect the new changes and start a new deploy. By the time you've opened the Netlify page the deploy will already have started.

Netlify has a number of other features including Forms, Split Testing, and Analytics that are worth checking out. I'll be covering how to set up Forms in another article.

If you have any comments or questions feel free to @stabadie or dm on Twitter

Signup to Keep In Touch