Deploy Your Gatsby Website to Netlify
July 14, 2020
One of the great advantages of deploying your Gatsby website through Netlify is free hosting. Today you’ll learn how to deploy your own Gatsby website to Netlify and have that free hosting too. Let’s get started.
You have an exiting Gatsby project repository on one of the three sources:
What is Gatsby JS?
What is Netlify?
Netlify works great with Gatsby. Netlify CMS is an open-source content management system for your Git workflow. You can use it with Gatsby to create faster, more flexible web projects. Your project is stored in your Git repository for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git. Every time you push your code to Git, it builds in the Git repository and builds a preview branch, where you can share your latest work, live, with others. So when you have worked hard on that project and need to show your manager the latest changes, take that Netlify link and send it to them. They’ll see everything you just pushed to your Git repository. Not to forget, with Netlify you can host your Gatsby website for free. Yep, for free. I won’t go into full details about Netlify. That could be a blog post on its own, but here is the documentation on getting started with Netlify and hosting your website. You’re welcome. Want to read more about Netlify? Click here.
Deploying your Gatsby Website to Netlify
Now that you know what Gatsby and Netlify are all about, let’s get this party started.
Login to Netlify
Don’t have a Netlify account? No problem. Simply login through your GitHub, GitLab, BitBucket, or sign up with your email account. For this tutorial, I’ll sign into Netlify with my GitHub account. You should see the following: Here you can deploy your Gatsby site in two ways:
- Click “New site from Git” at the top right of the page.
- Drag your public folder from your Gatsby project and place it where it says “Drag and drop your site folder here”. For this tutorial, I will click the “New site from Git” at the top right of the page.
“Create a new site”
You will need to choose your Git provider. So choose the provider where your Gatsby repository is. For me, it will be GitHub. You may be asked to authorize Netlify before you can select the repository you want to deploy to Netlify.
“Pick a repository”
From here, select the repository you that want to deploy to Netlify. You should see a list of your repositories in this section.
“Build options and deploy!”
Have a look at the generated information. If everything looks good, click “Deploy site” and let the magic begin.
Look Ma! My Gatsby project is deployed to Netlify!
Once you’ve clicked “Deploy site”, you will see an active Netlify deploy status. If you build fails, don’t worry. You can find out the reason why it failed by looking at the deploy log under the Production deploys section.
Unique Web Address
Every deployed project on Netlify has a unique URL. Most often the combination of words doesn’t make sense, but they can provide you with a link that you can share with friends, co-workers, family, and so on. This way you can show off that Gatsby project you’ve worked on for days.
One such example of the unique Netlify URL is: https://hungry-elion-3babd3.netlify.app/
What If I Update My Repository?
Netlify will take care of everything for you. Because your repository is connected to Netlify, whenever you update your repo, the changes will be picked up by Netlify. How cool is that?
If you happen to be deploying a Gatsby website that uses AWS Amplify, make sure your
aws-exports.js file isn’t included in the
.gitignore file. Otherwise, your project won’t deploy and will fail.
The Amplify documentation is not specific about how you should maintain your builds when using the Amplify Console, but there has been success by generating your aws-exports file when you run a successful amplify push command.
For more information on this solution, please click here.
Is That All?
Yep! It’s that easy! In a matter of minutes, you can have your Gatsby project deployed to Netlify with a shareable link.