Netlify

As of this writing, Netlify is one of the most popular solutions among Gatsby developers (including this author) seeking a convenient hosting platform for Gatsby sites. Netlify performs continuous deployments triggered by interactions with source control providers such as GitHub, GitLab, and Bitbucket, and it provides a slew of other features, including a global CDN, full domain name system (DNS) support, automated TLS support for HTTPS, and more.

Netlify offers two ways to host Gatsby sites on its platform, the easiest being through a Git repository. The other approach is to upload your generated Gatsby site in the form of a folder generated as the Gatsby build result.

NOTE

This section covers only the use of Gatsby with a Git repository. The Gatsby documentation offers a guide to uploading Gatsby site folders to Netlify.

With the use of Git repositories, Netlify allows Gatsby developers to roll back builds by reversing Git commits that trigger Gatsby builds in Netlify. Whenever new code is pushed to a Git repository that is integrated with Netlify, the platform will automatically create a new build of your Gatsby site, whether the codebase is housed in a public or private code repository. Many Gatsby developers prefer this approach as it obviates the need to manually manage builds and upload build results.

When you log in to Netlify, you’ll see a “New site from Git” button that will guide you through a wizard to select a source control provider and the code repository in which your Gatsby site is managed. Netlify will then display the following configuration options for your Netlify site:

• Branch to deploy. You can customize which branch Netlify should monitor for new code pushes that ought to trigger new Gatsby builds. By default, Netlify selects the master or main branch.
• Build command. This is the command that Netlify will execute to complete a build; it defaults to npm run build. Note that for cases where you need to account for path prefixes or asset prefixes, customizing this may be necessary.
• Publish directory. Gatsby, by default, provides its build results in a public directory. In Netlify the default is also public, but it allows developers to choose an arbitrary folder in their codebase that houses the build result.
• Advanced build settings. This is where Netlify users can configure other arbitrary settings for Gatsby site builds. For instance, if you need to set environment variable values that are normally only available in the local development environment, you can do so here.

Once you click the “Deploy site” button, Netlify will automatically kick off a build and deploy process to generate a new Gatsby build hosted in Netlify. The Deploys tab will display options such as “Deploy log,” which allows you to view the build log as the build proceeds, and a new live site URL will be generated, at which you can view the production version of your Netlify site.

NOTE

For more information about hosting Gatsby sites on Netlify, consult the Gatsby documentation, which includes custom domain setup information, and the Netlify documentation, which provides a step-by-step guide to setting up Gatsby on Netlify.