Challenge 2 of Gatsby's 100 Days of Code is to take your site live and to establish a deployment pipeline to automatically update your live site. The challenge is posted with the core steps outlined as:
- Host your project in a cloud git repository (publicly or privately)
- Use a "build service" to create a production version of your site
- Automatically publish your site's assets directly to a Content Delivery Network (CND)
How I Host My Gatsby Sites
When I was first getting my bearings with Gatsby, the most obvious way to host your Gatsby projects was via Netlify - it seemed the best option at the time and continues to serve my needs very well.
Netlify provides an almost effortless integration with Github that lets you update your live sites automatically by pushing to your main/nominated-production branch. I don't plan on hosting my '100 Days of Gatsby' development site live, because frankly, I already have a live site for my blog, and you're reading from it right now!
Instead, I'm going to talk you through the Github-Netlify pipeline I've already established, and how you'd do that yourself.
Going-live with Github and Netlify
Most tutorials on the subject of hosting presume a working knowledge of Github, which to be honest is a reasonable assumption for anyone trying to host a Gatsby blog - I'm also going to commit this crime. So, assuming you understand how to commit changes and work with branches (if you plan on doing something fancy with them, that is) - the next stages should be fairly easy to follow.
From your Netlify homepage, you want to click the button labelled "New site from Git"
Taking you to the second page, Netlify gives you a three step process to take your Gatsby project live:
- Connect to a Git provider - (e.g. Github)
- Pick a repository
- Build options, and deploy!
Continuous Deployment simply means that when you update your Git repository, your live website will be re-built and published with your new changes automatically - this is also known as a pipeline.
Once you've selected your Git provider, Netlify will ask you to authenticate your account on said provider by logging in and adding Netlify as an approved third party app to access your repositories. Personally, I only allow Netlify access to the repositories I intend to host on platform, but you can grant them access to all repos if you'd rather skip configuration.
The third step is to configure deployment and build settings. You choose our branch to deploy from (this is usually 'master' or 'main' by default), and then set the build command used to produce your Gatsby site (for most projects this will be 'gatsby build' - outputting to '/public/').
Finally, click 'Deploy site' - and wait for it gather the files and build your site. For a small site, this should take a few minutes at most.
Adding a Custom Domain
Once you've registered a domain from one of the many providers, you'll want your Gatsby site to be accessible from that domain. You should note that Netlify will provide a subdomain for your project by default, but you can optionally add a custom domain, like Securatom.com :)
From the Gatsby homepage, click on your deployed project and then the 'Domain settings' button; scroll your way down to the 'Domains' section shown below.
From here, you want to 'Add domain alias' and enter the hot and spicy domain you've either registered, or wish to register (if it's available, Netlify will give you the opportunity to register it with them directly).
Next, you'll need to configure the DNS - you want to point the root domain to Netlify using an 'ANAME' 'ALIAS' record - you'll need to do this with the registra you used to acquire your domain. They'll have their own way of doing this; Google (or DuckDuckGo) will hopefully be your friend here.
You'll have to wait for it to propagate, meaning the DNS record is distributed amongst the various DNS providers and servers, which should take 24 hours or less. After that time, your domain will be accessible from your custom domain, and you'll have finished the 100 Days of Gatsby, Challenge 2: Host Your Gatsby Site for Free :)