Deploying to Netlify
In this guide, we'll walk through how to deploy and host your next Gatsby site on Netlify.
Netlify is an excellent option for deploying Gatsby sites. Netlify is a unified platform that automates your code to create performant, easily maintainable sites, and web apps. They provide continuous deployment (Git-triggered builds); an intelligent, global CDN; full DNS (including custom domains); automated HTTPS; asset acceleration; and a lot more.
Their free tier includes unlimited personal and commercial projects, HTTPS, continuous deployment from public or private repos and more.
There are two ways you can host your site.
Git Repository Setup
Netlify currently has built in support for GitHub, GitLab and Bitbucket. This approach allows you to roll back to past versions of the website whenever you want. You also gain the ability to redeploy the site simply by pushing the code to the respective repository, with no need to manually rebuild and upload every time you make changes. Your repository can be private or public.
Now, login to Netlify and you will see a
New site from git button at the top right corner of the screen. Click on it and connect with the same git provider that you used to host your website and authorize Netlify to use your account. Choose your website repository and it will take you to deploy settings with the below options.
- Branch to deploy: You can specify a branch to monitor. When you push to that particular branch, only then will Netlify build and deploy the site. The default is
- Build Command: You can specify the command you want Netlify to run when you push to the above branch. The default is
npm run build.
- Publish directory: You can specify which folder Netlify should use to host the website. eg. public, dist, build. The default is
- Advanced build settings: If the site needs environment variables to build, you can specify them by clicking on
Show advancedand then the
Click on the
Deploy site button and Netlify will start the build and deploy process you have specified. You can go to the
Deploys tab and see the process unfold in the
Deploy log. After a few moments, it will give you the live site URL eg.
Upload Site Folder
There is also the option to upload your site to Netlify without using git.
For the production build, you will need to run the
gatsby build command; Gatsby will generate the production site in the
Once the build is complete, you are ready to upload your site to Netlify. Go to Netlify and login or sign up using any method. After a successful login, you will see the message shown below:
Want to deploy a new site without connecting to Git? Drag and drop your site folder here
To start the deploy process, you need only drag and drop the
public folder over the above area on the Netlify website. Netlify will create a new site with a random name, then start uploading and hosting the application files. After a few moments, it will give you a live site URL eg.
Now that your site is connected to your repository, Netlify will deploy the site and publish it whenever you push to your Git repo.
From the site
Overview, you can go to
Domain Settings. By adding a custom domain and setting the
CNAME record as the Netlify project URL in your DNS provider settings, you should be able to see the Netlify project at your domain URL.