Configure External DNS for Netlify

Use a custom domain from Namecheap for a site hosted on Netlify.

Today we're going to learn how to use a custom domain name for a site hosted on Netlify.com.

When using Netlify, there are several options for a domain.

  • Sites are generated with a free sub-domain, no purchase necessary

  • Purchase one through Netlify and use their DNS

  • Purchase one elsewhere and use the domain name provider's DNS

I'm going to be talking about the latter, specifically with a Namecheap.com domain name.

Let's cover some vocabulary before we get started.

Domain name - a human readable form of an IP address, the destination a user types into their browser.
DNS or domain name system - translates human readable domain names to machine readable IP addresses.
Apex domain - a custom domain that does not contain a subdomain such as example.com. Also called bare, base, or root domain.
Subdomain - a part of another domain, used to organize and navigate to different parts of a website such as blog, store or help. 'www' is a subdomain.

This tutorial is written from the perspective that you already have a Netlify account and a site created. If you haven't done this yet, please visit Netlify.com to create an account and a site first.


Namecheap

Let's get started. Go to Namecheap (create an account if you don't have one), and purchase a domain name. For this example, we'll use my website, achulslander.com.

After purchasing your domain, you'll be directed to your products page. If you've previously bought a domain, log in to your account; your dashboard should come up and show your domain name. Select the manage button.

Then select the Advanced DNS tab.

Now find the Add New Record button and click it.

We need to add two records. The first is going to be an A record.

And we'll enter this information:

Type: A Record
Host: @
Value: 75.2.60.5
TTL: 5 min

Save that by selecting the checkmark to the right, and then click the Add New Record button again. This time select CNAME record from the drop-down and enter the following:

Type: CNAME record
Host: www
Value: [name-of-your-site].netlify.app
TTL: 5 min

(Value will be the address Netlify has generated for your website.)
And save it by clicking the checkmark.

So... What did we just do?

In simple terms, the A record is the IP address where Netlify can be found online. The CNAME record will point our domain name to that IP address. When users visit your domain name, they'll end up in the correct place because of these records.


Netlify

Now we move to Netlify.

Log in to your account and navigate to the Sites tab, then click the existing site you wish to add a domain name to.

From the Site Overview page, click Domain Settings, then click the Add a domain button.

Enter the domain name you registered on Namecheap and click the Verify button. You should get a prompt of text below the input box letting you know the domain name is already registered, and the verify button will change to read Add domain. Click that Add domain button.

Here's an important step: select the bottom Options drop-down and select Set as primary domain to remove the apex domain as the primary. This sets our primary domain to www.example.com, instead of the bare domain of example.com. Why does that matter? With Netlify, using a subdomain as the primary allows your site to fully utilize their CDN.

Now we can scroll down to the bottom of the page to the HTTPS section where our SSL certificate is being provisioned.

If this does not happen automatically, click the Verify DNS Configuration button, then the Provision certificate button. You may receive a pop-up asking you to confirm by again clicking a Provision certificate button.

After a few minutes, our site has HTTPS enabled! Congrats, you did it!

Let me know if you have any questions :)

Further Reading

Configure external DNS for a custom domain
How to Set Up Netlify DNS - Custom Domains, CNAME, & A Records
[Support Guide] Troubleshooting SSL certificate errors

Did you find this article valuable?

Support AC Hulslander by becoming a sponsor. Any amount is appreciated!