Hosting on Netlify
In this guide, we’ll walk through how to deploy and host your next Gatsby site to 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 repositories, and more.
There are two ways you can host your site.
In development mode, if you change the site content or resources, Gatsby won’t consume time optimizing the source code. However, for production usage, it is desirable for the site to load as quickly as possible. Gatsby lets you know as much with the message below.
Note that the development build is not optimized.To create a production build, use Gatsby build
For the production build, you will need to run the
npm run build command, then Gatsby will generate the production site under the
npm run build
Once the build is complete, you are ready to upload your site to Netlify. Go to Netlify and login / 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.
You can also use git with Netlify to host your website. 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.
Now that the site is connected to your Git repository, Netlify will auto-deploy the site and publish it whenever you push changes to the repository.
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.
Below are some helpful resources
Edit this page on GitHub