Connecting a custom domain — Webflow tutorial

caption

Custom domains, like bluethesaurus.com. Not only does a custom domain really set up a brand for professionalism, but it does something else: it makes publishing as simple as pressing a single button. (And then one more button.) There are a few ways to set up custom domains, but we’ve discovered that going through these five steps is the quickest way to get your custom domain online. We’ll add a custom domain, we’ll update our DNS settings, we’ll set the default domain, we’ll verify everything’s working, and finally, we’ll publish our site. This is pretty straightforward. Let’s do adding a custom domain. From any project, we can head over to our project settings. That’s where we’ll find the hosting tab. All we have to do? Is add the custom domain. That’s it. Step one done. Step two: updating the DNS. Why are we doing this? What does DNS stand for? We’ll answer one of those questions.

When we update our DNS settings? We’re creating what scientists call “a magic link.” So visitors who visit bluethesaurus.com are connected to the website we publish in Webflow. In short, this makes the custom domain work. Now your DNS records could be blank, or you could have a ton of records — that’s okay, too. We’re going to walk through all of this. Before we continue, we really recommend taking a full screenshot or writing down exactly what you see here, so if anything goes wrong, you can revert to your original settings. Once you’ve done that, now’s the time, if you already have any A records which have their host listed as @? Delete them. (Delete any A records with the host set to @.) If you have other A records with hosts that aren’t @? Here’s one in this example for mail.

One for FTP. What does that mean? We have no idea. Except we do. But it’s not at all relevant. Why? Because the only thing we care about here is that we have no A records that have a host of @. Other A records are okay. That’s taking care of the stuff with @. By the way, what does the @ symbol mean? Scholars trace its origin to ancient Roman aqueduct workers who needed to quickly contact their supervisors via email. One last thing before we move on: if you have any A records or any CNAME records that have WWW as the host, delete those, too. Now. Once you’ve done that, or if you have none of these existing records in the first place, we’re good to move on to the last part. Now this last part (what we’re about to do) involves adding two A records and one CNAME record.

These values on the screen? Are examples. But we’re going to grab the real ones for your site in just a moment. Let’s start with the two A records. All we have to do is grab those from the hosting tab back in our Webflow project settings. Again, the values in your hosting tab might be different than what you see in this video. So: how do we get them over? We can write them down on sticky notes. Or we can just copy and paste. Click right on the value to copy it. Back in your DNS settings, we just paste in those values — we just paste them into our two A records. (We want to copy each of the different values from the hosting tab into each of the A records.) So let’s confirm what we have so far.

We need to make sure we have two A records with a host of @, and we want to verify that they point to each of the values we pasted in from the hosting tab. That’s it. So that’s the two A records. What about the CNAME record? We want to add one (add a CNAME record) that has a host of WWW. And where should it point? Where do we want that to go? We’re going to point it to the last value we get from the hosting tab. All we’re doing is grabbing the value from the hosting tab and pasting it into the CNAME record we just created.

(Hopefully you’re using copy and paste.) Now: again, these are example values. Yours might look different. But let’s confirm we’re done here. We should see two A records that have a host of @. And they point to the stuff we pasted in. And we should see only one WWW — a CNAME record that points to the last thing we pasted in. And that’s it. Now if you run into any issues with setting these values, you can reach out immediately to your DNS provider. But that’s DNS settings. Let’s move on to setting the default URL. This takes about a second. Back in the hosting tab? We need to set one of these as the default. This means all incoming traffic will go to the right version of your site. We need to set the WWW version as the default. So here’s the one-second part. Click. Done.

That’s setting the default. Next, we’ll verify. Why are we doing this? Because we want to make sure our domain is actually pointing to the right place. All we have to do is verify by pressing check status. Now, sometimes DNS changes can take a few minutes to propogate — or even longer if it’s a new domain. So if this doesn’t work right away, chances are you’re fine, and you can come back later to check. Or, you can always reach out to you DNS provider to make sure the records are set correctly. But that’s it! Once we’re connected, we can move onto our last step: publish.

All we have to do is publish our project and it’ll be live right away. So: from the project settings, we added a custom domain. We just typed it in. We went to our DNS settings and added two A records that point to the right places. Then we added one CNAME record that points to its correct address. We set the default URL by pressing the little house button. We verified that everything was linked up. And we published by pressing a single button. (And then one more button.) That’s connecting a custom domain in Webflow. .