Hosting on Netlify
In this guide, we'll walk through how to deploy & 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 high-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.
This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.
There are two ways, we can host our site.
Upload Site Folder
In Gatsby development mode, we constantly change content, add images, so Gatsby won't consume our time to optimize the source code as we are currently developing our site. For production usage, we want our site to load as fast as possible. Gatsby also informs us about it with below message.
Note that the development build is not optimized. To create a production build, use Gatsby build
For the production build, we will need to run
gatsby build command and Gatsby will generate our production site under
public folder, it will contain css, js, images and html files.
Once, the build is complete, we are ready to upload our site to Netlify. Go to Netlify and login in/sign up using any method. We will see below message after successful login.
Want to deploy a new site without connecting to Git? Drag and drop your site folder here
As written on the website, we only need to drag and drop our
public folder over above area on Netlify website. Netlify will create a new site with a random name, start uploading and hosting our files. In a few moments, it will give us our site URL like
Git Repository Setup
We can use git with Netlify to host our website. There are many benefits of this such as we can have past versions of our website so that we can rollback to previous versions whenever we want, no need to manually build our website and upload it everytime we change anything. Netlify supports GitHub, GitLab and Bitbucket. All we have to do is push our code to the respective repository. Our repository can be private or public.
Now, login to Netlify and we will see a
New site from git button at the top right corner on our 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 below options.
- Branch to deploy: We can specify the branch, when we push to that particular branch, then only Netlify will build and deploy our site. The default is
- Build Command: We can specify the command we want Netlify to run when we push to above branch. The default is
npm run build.
- Publish directory: We can specify which folder should Netlify use to host our website. eg. public, dist, build. The default is
Deploy site button and Netlify will start to build and deploy process we specified. In a few moments, it will give us our site URL like
random-name.netlify.com. We can go to the
Deploys tab and see what is actually happening.
Now that your site is connected to your repository, Netlify will auto-deploy the site and publish it whenever you push to your Git repo.
In Domain Settings, we can add our own domain and set
CNAME record as our netlify project URL in your DNS provider settings. Now we should be able to see our netlify project at our domain URL.
Below are some helpful resources