I haven’t made time to blog since April (so two months and maybe two weeks have passed) due to a lot of big life changes, but I wanted to share a process I just used to host a site on Netlify while its registered at GoDaddy.

Background

Those of you who follow my blog know that I built a website for a cancer charity called Breast Cancer Comfort. They originally had a WordPress website that was largely incomplete. I drafted a new site for them using HTML & CSS and showed it to their founder via Facebook back at the end of 2019 and she loved it. I told her they could have it for free, because I support their mission. I had planned on rebuilding it with React, but their marketing director at the time asked if I could rebuild it using WordPress and a drag-and-drop editor called Divi, because he wanted it to be updateable by others if I wasn’t available. I learned Divi and did so, but (1) no one else made any updates to the site except for me and (2) the marketing director had his first baby and left, leaving me with Divi and a slow-to-load WordPress site.

About a year after my initial draft of the BCC site, I was experimenting with Next.js and found that I loved it. I decided to rebuild the site using Next.js, instead of just React. Development was rapid and I had it completed in a matter of days. Its missing one component though: ecommerce. We want a shop on the website, and I personally don’t want it to be external. I don’t want to link out to an Etsy shop, or an external Shopify one. I’m currently experimenting with different ecommerce options to see what I can integrate into the existing website. But, in the meantime – since I have a working website, I made time earlier today and backed up all of the media from the WordPress site (there were 2,992 images!) and puzzled out how to use the organization’s GoDaddy domain with the site I had published on Netlify. So, to put it in terms web developers are more used to, GoDaddy is the site’s registrar and DNS provider and Netlify is the host. Here’s what I did:

Process

1: Log into Netlify and go to the Sites section (in the top menu) and click on the website that you want to connect with GoDaddy’s DNS. In the Site Overview tab, click on the Site Settings button and then Domain management in the left pane. Click the Add custom domain button.

2: In the form, enter the URL of the site. It should include “www” and match the URL from GoDaddy. For example, if your domain is “www.imarealwebdevnow.com” then enter that (but not the quotation marks). A question will appear, asking if you own the domain. Select “yes” to confirm.

3: Custom domains will now show two new entries, the domain that you entered, and the same domain name, but without the “www” prefix. This 2nd entry will default to the first one with “www” if entered. Its essentially a rollover.

4: Okay. I can’t remember if I clicked on Options in the primary domain selection above or if the next dialogue just popped up, because too much time has passed, but you’ll get the following screen. The important thing here is to copy the CNAME that’s listed (its a URL). You don’t need the trailing period. You’re going to paste this into the DNS settings at GoDaddy. Its the name of the deploy at Netlify, so you’re essentially forwarding requests from the URL at GoDaddy to the domain name at Netlify.

5: Log into your GoDaddy account, scroll down to All Products and Services and click on DNS for the domain that you want to link to Netlify. Once that’s done, the DNS Management screen will open. Scroll down the list until you find the CNAME entries and edit the one marked www (its probably set to the “@” value). In the screen that appears, change the current value to the URL copied from Netlify.

From here, you’re basically done. Now you need to wait for the changes to propagate out across the internet. It might happen almost immediately, or it might take from 24-48 hours for the changes to reach your ISP’s DNS servers. Open the website’s URL in your browser from time-to-time and check to see when the change has reached your browser.

Also, I did have to scroll down to the bottom of the Domain management screen for the website on Netlify and click Verify DNS configuration in order to get the TLS/SSL certificate from Let’s Encrypt. It didn’t happen immediately, it took a few minutes for the process to complete. Netlify still has to apply it to the BCC website. If it doesn’t happen by tomorrow, I’ll update with a post detailing next steps, which will walk through providing a certificate from Let’s Encrypt.

Update (2021.07.07)

Sometime overnight, the HTTPS certificate from Let’s Encrypt did process and attach, so the website is now secure. Here’s what it looks like from Netlify, and then in the address bar in Chrome: