How to set up a custom domain for a Netlify site, using DreamHost as a domain registrar

By Caroline Liu

Last week, I made the big DNS change to leave my WordPress blog behind, in favour of this statically-generated site hosted at Netlify. It was a scary process, because I’ve never had to modify DNS settings before, the DNS records looked like some other-worldly language, and what if I accidentally took down my entire site?! 😱 Then I reminded myself that no one reads my site anyway, and even if it goes down for a bit, no one will notice. Perks of being a nobody on the internet! 💯 So with that very humbling thought, I dived into my DNS settings.

The situation

I had a fully-hosted solution at DreamHost. What this means is that I had everything set up at DreamHost: My domain was registered there, my DNS settings were there, and both my WordPress blog and email was hosted there.

What I wanted to do now was change my DNS settings so that my apex domain (superchlorine.com) pointed to my new Netlify site, without breaking any of my existing email settings.

This sounded super complicated to do, but in hindsight, it was actually a straightforward process!

The solution

I actually bungled my settings at first, thereby taking down both my email and website for short periods, but they were quickly resolved and I don’t think anyone noticed. 😅 A big thank you to DreamHost Support for quickly responding to my ticket and fixing my bad settings! 🙏

Below are the steps in the right order, which should lead you directly to success (and not to a “create support ticket” page)!

What are we are doing? We’ll be making configuration changes at both Netlify and DreamHost. Most of the changes will be at DreamHost, where we’ll be modifying our DNS settings to point our existing apex domain (e.g. example.com) away from our DreamHost-hosted site to our Netlify site (e.g. example.netlify.app). Your email and any other custom subdomains (e.g. foo.example.com) should not be affected.

How long will this take? If everything goes right, the changes should take under 20 minutes to do, and with some luck, everything will propagate throughout the internet within a couple of hours.

Let’s go! 🚀

At Netlify:

  1. Go to the Netlify settings page for your site and click “Domain settings”.
  2. In the “Custom domains” section, click “Add custom domain”. Follow the prompts to submit and verify your domain.

That’s it for what we need to do at Netlify. Your domain will still point to your old site at this point, so we’ll need to head over to DreamHost to finish up.

Note: Netlify will give you a list of their nameservers (e.g. dns1.p02.nsone.net) after you’ve set up your custom domain, and will tell you to set these at your domain registrar. If you do this, you will be switching from DreamHost’s nameservers to Netlify’s nameservers, which is NOT what we’re doing in this article. You can totally do that if you want to start managing your DNS settings via Netlify, but then you’d also have to copy over your DNS records for your email and other subdomains to Netlify. For me, that was more work than I was willing to deal with.

At DreamHost:

  1. In the DreamHost Web Panel, head over to Domains > Manage Domains.

  2. If you have a SSL certificate for your apex domain (example.com), delete it now before continuing!

    • To do so, under the Security column, click “HTTPS secure” for your domain. On the next page, click the “Remove Certificate” button.
    • This was the step I accidentally skipped, and the consequence was that DreamHost couldn’t automatically remove the CNAME record for my www subdomain (www.superchlorine.com). As a result, www.superchlorine.com was broken until DreamHost Support manually removed the CNAME record for me. Don’t do what I did – remember to delete your SSL cert before moving on to the next step!
  3. Unlink your DreamHost-hosted site from your domain by switching to DNS Only mode.

    • To do so, head back to the Manage Domains page, and under the Web Hosting column, click “Edit” for your domain. Scroll all the way to the bottom on the next page, and click the “Host DNS Only!” button.
    • DreamHost will now automatically delete your default A records, which detaches your domain from your old site.
    • To my understanding, your site data is retained after this change, so if you ever need to revive your old site for whatever reason, you can still do so.
  4. Create a new A record that points your apex domain to Netlify’s load balancer.

    • To do so, head back to the Manage Domains page and under the Domain column, click “DNS” for your domain. Then, in the “Add a custom DNS record” section:

      Name:                   # Leave blank to mean "example.com"
      Type: A # Makin' an A record!
      Value: 104.198.14.52 # Netlify's load balancer IP address
    • You can read more about this in Netlify’s docs.

  5. Create a new CNAME record for your www subdomain.

    • To do so, on the same page and section, add another DNS record with the following settings:

      Name: www.example.com
      Type: CNAME
      Value: example.netlify.app # Your Netlify subdomain
    • This was the step that I had trouble finding Netlify documentation for, but I found this great explanation by their support engineers.

  6. Request a new SSL certificate for your apex domain again.

    • To do so, head back to the Manage Domains page, and under the Security column, click “HTTPS not secure” for your domain. On the next page, request a certificate (a free Let’s Encrypt certificate is often sufficient).
  7. Sit back and wait for all your changes to propagate across the internet. Use whatsmydns to check the progress:

    • For your apex domain: Enter example.com and select “A” in the dropdown. It’s done if all the reachable nameservers list Netlify’s load balancer IP address (104.198.14.52).
    • For your www subdomain: Enter www.example.com and select “CNAME” in the dropdown. It’s done if all the reachable nameservers list your Netlify subdomain (example.netlify.app).
    • For me, everything was done within about half an hour, but your mileage may vary.

We’re done! 🙌

Congrats, you just did a Big Scary Technical Change on your own! 🎉 That wasn’t so bad, right? Give yourself a pat on the back and a break too, because you deserve it!

Fetching comments...