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