Legitimize Your Site with Custom Domain and HTTPS
This is a continuation of previous articles in which we created and deployed our own JAMStack site using Stackbit. You can read the initial article here: From Zero to Web App in Under 60 Seconds. If you’ve been following along and you’ve got a Stackbit site deployed already, let’s get you legit in a jiffy.
So, here we are! We have our site, but nobody wants their URL to look like “https://trey-white-63461.netlify.com/”… Let’s begin by adding a custom domain name. For simplicity’s sake, I’m going to use “trey-white.com.”
Note: If you don’t have a domain name of your own, go purchase one! You can purchase one using GoDaddy for $9.99, so you have no excuse. I also firmly believe that purchasing a domain is one of the first major steps you need to take in your web development journey.
Once you have purchased a domain, access your domain settings for your Stackbit site by following the images below.
Now let’s add the domain. From the Domain Management section of your Netlify dashboard, click the “Add Custom Domain” button.
Next, specify the domain name. Once you click “verify,” you will be asked if you own this domain to which you should indicate that you do.
After this, you will see you new domains in the Domain Management section, but you still need to update the DNS for the domain change to take place. So, click on “Check DNS configuration” and copy the ALIAS name specified.
Now head over to your GoDaddy account (or wherever your domain is registered), and open your DNS settings for the domain you specified when you added the custom domain to your Netlify dashboard.
If you’re using GoDaddy, you should simply edit the current A record to point to the IP address specified in the DNS Configuration instructions in the image above.
Note: If you’re not using GoDaddy and you’re following the Netlify instructions, “ALIAS” is often seen as “CNAME.” If you don’t see ALIAS as an option use CNAME.
Now, you will have to wait for the DNS record changes to propagate. As you can see in the image above, GoDaddy has a minimum TTL (time to live) of 600 seconds (10 minutes)… so go fold some laundry or read a book and come back in a little bit to see if the changes have taken effect!
Once you’ve finished your laundry, book chapter, underwater basket weaving, etc… You should refresh your Domain Management section within Netlify and, hopefully, no longer see any warnings about DNS configuration.
You can now access your site using your custom domain name!
However, in the image above, you’ll notice that the website is marked as “not secure” since we don’t have an SSL certificate for our new domain configuration.
Obtaining an SSL certificate is typically either expensive or time consuming… and sometimes both. If you choose the free route, you’ll typically have to install a bunch of packages onto your server and use Let’s Encrypt / Certbot to generate one. If you’re not familiar with this process, I can almost assure you it will be a pain in the rear end.
Fortunately for us, Netlify is awesome! When you connect your new domain, it will automatically begin provisioning a new certificate and once you’ve reconfigured your DNS, as we did earlier, you can scroll down in your Netlify Domain Management dashboard until you see the HTTPS section then click the button asking Netlify to provision a certificate for you.
Next, go knit a scarf, feed the dog, play basketball, do whatever you want to kill some time and when you return (possibly in a few hours) you should see something like this:
Pretty legit, huh? And without the usual hassle you might experience during this process!
