loading...
Cover image for Hosting Gatsby Site Using a GoDaddy Domain & Netlify

Hosting Gatsby Site Using a GoDaddy Domain & Netlify

ivanadokic profile image Ivana Updated on ・3 min read

Deploying and Hosting

Getting your new site deployed and accessible is probably the first thing you will want to do once that it’s built!

I used Gatsby to build my site, it follows the latest web standards, and is optimized to be highly performant. It’s made in what’s probably the only technology as hot as the Go language, React.js. React is a hugely popular JavaScript framework out of Facebook. There are various Gatsby templates for personalized website, you can check it here

When you build your Gatsby application, the output is static content: HTML, CSS, JavaScript, images, etc. This content can be hosted with any provider, whether you’re deploying to AWS, Netlify, or something else.

I will deploy on Netlify.

Getting Your Own Domain

There are so many options to host your site for free. I personally purchase my own unique domain because it looks more professional but it’s possible to host your website on Netlify without one, the only think is that URL address will include ".netlify.app" at the end.

I used GoDaddy, so I'll be covering the process for that site, but there are tonnes of options to purchase domain, some of them are: namecehap.com, Google Domains, goDaddy...

You can easily search for your preferred name on GoDaddy website, they will give you available options based on your search.

Connect Netlify to Your Repo

I choose Netlify platform for automating modern web projects and its free to deploy from a Git repository. I already have my GitHub Repo set and committed, and next step would be to connect Netlify to my Repo.
Alt Text

Basically you need to Log in to Netlify and click on "New site from Git", find your repo and connect it following the instructions. Netlify will now deploy your Gatsby website using a free ".netlify.app" address.
Alt Text

Netlify will automatically redeploy your code anytime you push an update to the master branch, so you won't need to manually redeploy, once your GitHub repo is connected to Netlify.

Next step would be to update the site name, on the Netlify settings page for your app, click "Site Settings" and update the site's name. After that, click "Domain Settings" and add the custom domain that you purchased earlier by clicking "Add Domain Names" under "Custom Domains".

Alt Text

Next step would be to click on "Domain Settings" and add the custom domain by clicking "Add Domain Names" under "Custom Domains", but before that you'll need to change a few options from the GoDaddy site.

Open your GoDaddy account and go to your "My Products" page. From there, find your domain and click the "DNS" button. In the Records section, you'll see a couple of entries already added. If you have any editable entries by default, delete them because they will interfere when you try to add the Netlify information (104.198.14.52 - the IP address of Netlify's servers).

Entries can be deleted with the edit sign next to them and add the following:
1)
Type: A
Name: @
Value: 104.198.14.52
TTL: 1 Hour

2)
Type: CNAME
Name: www
Value: .netlify.app
TTL: 1 Hour

The CNAME value should be whatever your Netlify site's address is (i change it earlier from default one) don't include the "www." part.

Alt Text

The next step would be to go to Domain Settings page on Netlify to the HTTPS section and Click the "Verify DNS Configuration". If everything was set up right, Netlify should connect to the custom domain and you'll see the message "Waiting on DNS propagation".

Don't panic if you get an error like this, double check that you entered the GoDaddy DNS information correctly.

Alt Text

It will take up to 48 hours for page to be propagated and changes to take full effect globally.

This is a good resource to watch short animation of this task show me how.

Your live website should be up and running!

To connect please check my Github, LinkedIn or Twitter. Thank you for reading!

Discussion

pic
Editor guide