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.
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.
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".
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.
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.
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!
Top comments (3)
Thank you for the tutorial! I was puzzling over the best way to publish a new site using a GoDaddy domain name, and I plan to try this method. And I have been curious about Netlify and Gatsby for a while now.
My background is primarily VanillaJS, though I was wondering how much React you recommend knowing before using Gatsby. I am learning it for this purpose and am curious about how far you recommend one should go before diving into the Gatsby end of it. Thanks for any insight.
Thank you so much for writing this. It was a big help.
Thanks @boyloe , hope it helps!