Alright. 1
So in this video, I'm going to show you how to connect your website to a custom domain. For that we're 2
going to need to add a hosting plan to our Webflow Project. 3
So that requires payment, so you don't have to go through this tutorial to kind of publish your website 4
on a custom domain. You've already published it on a Webflow's domain and that's enough. 5
But with your real clients and real projects obviously you will have to do that. And you would have to publish 6
your project and your website on a real domain. And I will demonstrate it how to do it here. 7
I'm paying for the hosting plan and for the domain purchase. 8
Right? 9
But you don't have to do it. 10
And once you're already doing real projects and you want to publish them, then you know where to 11
come and where to see the tutorial on how it's done. 12
It's quite simple and straightforward. And I'm going to show you how it's done right here. 13
So first thing what we need to do is go to the project settings. And inside the settings, we need to 14
go through the hosting tab. And here we're going to add a hosting plan. The custom domains are here, 15
as you can see. But they're not enabled until we add the hosting. And we have to add the CMS hosting because 16
you can see already the basic plan is disabled. Because the project that, this team app website project, 17
has a CMS, right? The blog on it. 18
So that's why we have to choose the CMS hosting. Which is 16 dollars per month annually, 19
paid annually. And it's 20 dollars per month, if paid per month. Which what I'm going to do in this case, 20
I'm going to choose the monthly billing. 21
There is also this notification about the client billing, which is a very cool feature in Webflow. 22
It means, you can directly send an invoice to your client. Your client will provide their own credit card 23
details, they will have to pay for this hosting, not you. And you have an option to actually make a little 24
money on it. And you can charge extra and put like extra per month. 25
For example, if you offer your clients a service too, like a maintenance fee or something like that. Let's 26
say you want to charge maybe 50 dollars per month and you can kind of keep the 30 dollars and then 27
charge your clients the whole price 50 dollars and then Webflow will take their cut and their hosting plan. More 28
about this later. In the part about the freelancing. 29
I talk about this feature and I'll explain the benefits of it and all that stuff. 30
For now, we're just going to skip that step and just pay, at least, I'm gonna pay myself here. 31
Once the payment is gone through, we get to this page. 32
Now it says that CMS hosting is the current plan. 33
And then you can see under custom domain, we have an option to actually add new domains. Which we 34
need to buy. 35
We don't have a domain yet. 36
So go to godaddy.com. 37
GoDaddy is where I buy my domains usually, it's simple, it's straightforward. It's probably one of the 38
biggest ones out there. All the domains that are .com, they're available there. But country specific 39
domains like let's say .de for Germany or .es for Spain, it's not on GoDaddy. Usually, I don't 40
think they're are on GoDaddy, but I might be wrong. But usually, they are on a country specific websites. 41
That sell country specific domains. So you would have to purchase them there. But the tutorial that I'm 42
gonna show you and how to connect them, they work exactly more or less the same way on any of those domain 43
websites. 44
Seems like I'm getting a very good discount. 45
Eighty five cents, for the first year. 46
Not bad at all. 47
GoDaddy is very good with discounts, so that's one reason why it's a good place to buy them. Because they 48
do have these crazy discounts, when they give you like first year, for like dirty dirty cheap. Add to Cart. 49
Continue to cart. 50
Alright. Here, GoDaddy is gonna try to upsell you some different stuff. Like privacy protection, which 51
we don't need. No thanks. 52
Some website designer, we don't need that either. 53
No thanks. Emails. Continue to cart. 54
In here, 55
GoDaddy is gonna try to instantly upsell and sell you five-year contract right away. 56
I usually change this to one year. Now the price went back to the normal. And I'm going to choose a PayPal 57
option for the payment. 58
And there. The domain is done. 59
Now we need to go back to Webflow. Again under hosting tab. And add our new custom domain. 60
Webflow is going to detect that we are using GoDaddy for our domain. And what they offer here is that, 61
they have this ability to connect domain automatically. Which is a cool feature, 62
it makes things much easier. 63
So if your domain is on GoDaddy. 64
That's one reason why I usually use GoDaddy, because Webflow has this automatic connection. And they 65
also, I think, the only other automatic connection that they use with maybe Google domains. But Google 66
domains is not available in every single country, so. And you can connect automatically when you have 67
an access to the domain. GoDaddy's account. Because it's gonna ask you to sign in into your account. 68
And if you sign in, then it's gonna do the connection and every setting change that needs to be changed 69
for the domain automatically you don't have to worry about it. But in this case, I'm gonna do it manually, 70
so I can demonstrate how it actually works. Because it's going to be similar to every other website 71
where you're going to change the settings to connect the custom domain. 72
So we're gonna go with the connect manually. 73
This is a message saying, that because we are adding a new domain, the subdomain indexing has been disabled. 74
That means that, it's basically has something to do with SEO, so we don't have one website connected to 75
two very different domains. Because that's something it's not allowed by Google. And that's why it automatically 76
disables the indexing for that temporary domain that we have used from Webflow. 77
So, just click OK. 78
Alright. 79
Now we get this to, kind of instructions, on what we need to do once we choose our domain. 80
We have this Webflowcourse.com, which is the naked domain. 81
And then one which is with the www.webflowofcourse.com. And Webflow gives us these values 82
that we have to add inside DNS settings of our domain provider. 83
So what we need to do is, we need to go back to GoDaddy. Inside GoDaddy, 84
it's under products, 85
my products. And here it's gonna show us all the websites that we have, all the domains we have, not 86
websites. 87
Right. 88
So webflowcourse.com here and then we have to choose DNS. And it's usually the same thing in every other 89
website domain providers. 90
It's always, it's called either DNS on, DNS management, or something DNS editor or whatever. 91
It's basically, the keyword is DNS. 92
That's where you wanna go. And you get to this sort of weird sheet of different records that are DNS 93
records. That look complicated, but they're quite simple. 94
And what we need to do here is edit this A record and C name record. As you can see, we have to choose 95
this A, type, right? 96
The name is @ and then value is this IP address that is provided by GoDaddy. So, we have to copy that 97
IP address and then we are going to edit one that has an @. If your DNS, kind of records sheet, doesn't 98
have an @, you have to just create the new one and that's it. 99
But if it already has this @ record with an @ symbol, which is an A record, right? 100
Both have to match. 101
So, if it's on A record and has an @. Because as you can see, there is some other records with an @ like 102
NS or SOA. 103
So, don't worry about those. But if there is an A record and it says next to it @, then you have to edit 104
that one. If you don't see anything like that, 105
you just need to add a new one. 106
In this case, GoDaddy was showing us that we have one. So I'm just going to edit it. So, Host is @ and 107
Points to the IP address by 108
Webflow. Everything else you can just leave the same. So that's one A record. 109
We need the second A record. Because we didn't have an option to add the second one there. 110
So ADD from here. And under the type, we're gonna choose and A type. 111
Host, again @. And Points to, this time a second IP address from Webflow. And points it here. TTL you can leave 112
it as is. And save. That's done. 113
The A records are done. 114
Now we need to edit the C name record for www. So, copy the value from Webflow and edit. If you don't 115
have it, you just need to add the new one. That's it, 116
just like we did the last time. Add a new record, then choose a C name instead of a record. Alright. 117
That's it. 118
Now the DNS settings for the domain have been edited. 119
Now we can check the status right on Webflow and Webflow will check if everything is connected 120
well. As you can see it is. For the first domain. Let's check the status for the second one. 121
There you go. 122
Second one is connected as well. 123
This one actually was super fast. 124
It doesn't usually happen this fast. I guess because it was a new domain. 125
Also GoDaddy is quite fast updating this DNS records. 126
Some other websites, 127
they're quite slow and usually, they might take up to 48 hours to update the records. 128
So, don't freak out and don't worry if it doesn't work right away, just wait 48 hours. 24 hours or 48 hours 129
really depends on the DNS provider, who is providing this. Because, you know, some of my clients they use 130
very local, obscure DNS providers and they update like every, every, once in a day. If it doesn't work, 131
and if it's, you know. if one day goes by two days go by and it still doesn't work, then you would have 132
to contact the DNS provider themselves. Because sometimes what happens is that a website might be on 133
GoDaddy. 134
So the person might buy the domain in one place, but then move the DNS management. So those records that 135
we just added, they might move it somewhere else with some different company, or a different service, or 136
something like that. 137
So when you talk to the client, just make sure, to ask them, you know, I usually don't even do this. 138
I sometimes give these details to my clients. Because if they have a domain and if they have this DNS 139
editor or whatever, that means they already know how to do this or they've been dealing with this somehow 140
or whatever. But if they don't have it, then I sort of do the whole thing for them. 141
Now we have to choose a default. 142
We can use one of these versions. Either one with a www, or one without it, is as a default version of our 143
website. 144
So, if somebody just types in webflowcourse.com, they will be redirected to www.webfowcourse.com 145
. 146
This is usually the version I like to do, which is keep the www as the default and main version. 147
So, everything kind of comes and redirects to these main. You can do it reverse as well. 148
I don't know if there is ever some specific preference, I think www always is the best option to just 149
keep it as the default domain. 150
And one last step. We have to publish it. 151
This now, it's not published. If you check it, don't forget this last step. You always have to publish 152
from here. And then it's going to be available. So we're gonna deselect this Webflow subdomain and select 153
our new domain. And publish to selected domains. And done. 154
Let's check. 155
Our website, 156
is now published on a custom domain webflowcourse.com 157
Inside the general settings, 158
there is sometimes, Webflow keeps the branding, right? 159
The badge was right now automatically removed, but sometimes it might be there. 160
And also there is this another branding inside HTML. 161
So, you can change this, kind of disable this Webflow branding from here. Both in HTML and the website. 162
And again, publish one more time. 163
And also we can actually unpublish this second webflow.io subdomain. 164
We don't need that anymore. Since we already have it on our main domain. And that's it. 165
That's how you publish website in Webflow on a custom domain. 166
Easy peasy.