How to Host your Website for FREE with Netlify and Add a Namecheap Custom Domain Name to Netlify

hi guys and welcome to another video today i'll be showing you how to host your website for free using the platform called netlify i'll also be showing you how to add a custom domain name to your netfi hosted website and finally i'll be showing you how to enable https encryption using ss certification given to you by netlify which allows you to cover your apex domain name and all sub domain names so they offer you a wildcard ssl certificate which is an amazing service for a free website hosting provider before we get started i'm just going to minimize this and i'm going to show you how my website's files and my website looks offline so i'm just going to double click this websplaining.com folder and hit index.html and as you can see there is my website hosted offline on my desktop let's close out of this and begin the tutorial okay so the first thing you need to do is navigate to www.netlife.com once you're on the home page you need to sign up for an account hit the sign up button once you're here you're going to need to choose a sign up method you can either sign up by github gitlab bitbucket or email address if you don't have any of these three version control accounts then you'll need to sign up the traditional way which is by email you enter your email you pick a password you get a verification to your email that you need to click on to verify it's you i'm going to go through the github method because i have a github account left click on this once you're here you're going to need to click authorize netlify to allow them access to your github account once you've done that you'll be taken to this page where you have a quick start guide that you can follow if you want i'm going to x out of this because i'm familiar with how netlify works there are two ways to upload your website's files onto netlify the first method is to drag your files from a folder into this box here on netlifly or you can create a new site from git such as github git lab or bitbucket i'll show you how to upload your files through git on another video for this video i'm going to keep it simple and we're going to upload our files by dragging the files into this box so let's minimize this window and x out of this now you need to search and find the folder that contains your website's files as you can see the folder that contains my website files is this one here so you're going to need to drag this folder into the netlifes box for uploading your files so i'm just going to move this to the side here and i'm going to maximize netlify's website and then restore down this gives you easy access to the folder containing your website's files and you simply just left click and drag into the box here and as you can see now the file is being uploaded let's maximize this window here and there you have it your site is deployed which means basically the website has been uploaded and here's the url of your website hosted on netlify left click on it to see it and there you have it your website is hosted for free on netlify now the url for the netlify website is randomly generated and as you can see mine says elegant saha and then a bunch of numbers netlify.app we want to change this so go back to the netlify website hit site settings scroll down and you'll be able to change site name left click on it left click the site name text box and delete the contents and then give it a name to whatever you desire so i'm going to go with web splaining and then i'm going to hit save let's go back to the top here and click overview now let's hit this new url that we have for our website as you can see it's much neater and tidier than the previous url that netlify automatically generated for us now we're going to move on to step two of this guide and that is adding a custom domain name to your netlify hosted website let me just x out of both these tabs here okay let's just scroll down a bit here as you can see step one is your site is deployed check and that's done now we're going to set up our custom domain left click on this and add the custom domain name that you own mine is going to be www.websplaining.com left click on verify you'll then get a piece of text that says websplaining.com already has an owner is it you you want to hit yes add domain let's scroll back up to the top here to where it says custom domains as you can see the current default domain name is the netlify domain name given to us the second is our subdomain name which is our primary domain and the third is the apex domain name we need to add netlify's domain name servers to our custom domain name host so we need to left click on this where it says check dns configuration and then you'll want to hit setup netlify.dnsforwebsplaining.com it will say your website's name here left click on this click verify yes add domain name scroll down and hit continue you will now be taken to this page where you'll be given netlify's domain name servers and you'll need to change your domains name servers to netlifes in my case my custom domain name provider is namecheap if you don't have a custom domain name currently then i'll recommend buying one from namecheap.com i'll add my affiliate link in the description below you'll save a bit of money and i'll make a bit of money so let's open up a new tab here and navigate to our custom domain name host so in my case it's namecheap.com so www.namecheap.com hit enter to be taken to the website once you're here you'll need to sign in at the top left here okay so once you've logged into namecheap you want to select the domain name that you want to point to netlify's dns so in my case it's going to be websplaining.com and you want to left click manage once you're here scroll down to where it says name service and you'll want to change where it says name cheap basic dns to custom dns if it's already on custom dns you want to remove the current name servers that you have here if it's blank you're going to want to add the name servers in the other tab given to you by netlify so i'm just going to go back to the tab here and i'm going to copy the first dns go back to your custom domain name host and put in the first name server and go back to the tab and do this for the remaining three name servers and ctrl v and then copy the final name server once you've populated the namecheap custom dns with netlify's name servers you want to hit the check mark here left click on it to save so it gives you a prompt here that says dns server update may take up to 48 hours to take effect all right go back to the netlify website and you'll hit done scroll back to the top and let's test our website out by hitting the primary domain name so left click on it and as you can see the website currently displayed is not the same as the website that we uploaded to netlify and this is due to the new name servers taking up to 48 hours to propagate let's go back here to the domain management settings on netlify's website and now we just simply need to wait until our website has propagated once that's done propagating we'll be able to move on to step three which is getting https encryption for our website and getting the necessary ssl certificates for the apex domain name and a wildcard sub domain name certificate so i'll be back once our website propagates okay i've just refreshed the page and it's been around 10 minutes i just want to see if our website has propagated so i've scrolled all the way down to where it says https and as you can see it says waiting on dns propagation so we need to give it some more time i'll be back with you when the dns has propagated and then https should be enabled all right guys i've just refreshed my page and then i've scrolled down all the way to where it says https and as you can see our name servers have indeed propagated so it says your site has https enabled and the certificate is from let's encrypt which is a provider of free ssl certificates that renew every three months as you can see two ssl certificates have been generated one is a wild card sub domain ssl certificate which covers sub domain name such as www dot and an apex domain name ssl certificate for websplaining.com if we navigate over to where it says ottawa news before september 7th so basically in three months it will auto renew by itself now if we scroll back to the top here you should see custom domain names again and let's try our primary domain name so the www.websplainin.com our sub domain name this should work now if we click on it and there we go with the name service propagated and https enabled you can see our website is live i'm not looking too shabby if i do say so myself let's navigate back to netlifly and i just want to show you that the apex domain name because we put the sub domain name as our primary domain name anytime someone searches websplaining.com it will redirect them to www.websplaiding.com so let's click on this just to show you if i highlight the url you can see that it's https colon slash www.websplaining.com and if we go over to this tab here you should see that it's exactly the same again all right guys that concludes the video i hope the video was helpful in getting your website hosted for free on netlify linking it to a custom domain name my custom domain host provider was namecheap.com and also enabling https covering the apex domain name and a wild card ssl certificate covering all sub-domain names thank you very much for watching guys remember to smash that like button if you enjoyed the video and it was helpful subscribe and comment down below if you have any questions see you on the next one

Channel: Websplaining

Views: 29,309

Keywords: How to Host your Website for FREE, Add a Namecheap domain Name to Netlify, How to Host your Website for FREE with Netlify, how to Namecheap domain Name to Netlify, Let's Encrypt, Sign up to Netlify, Change Netlify site name, deploy a website on netlify, netlify free hosting, host a static website for free, netlify, free hosting, custom domain, How to Host your Website for FREE with Netlify and Add a Namecheap domain Name to Netlify, namecheap, custom domain name, HTTPS with netlify

Id: T9L8aWTPTLA

Length: 11min 14sec (674 seconds)

Published: Wed Jun 10 2020

Reddit Comments

[u/VoteAndrewYang2024]

omg.

thank you thank you thank you

total noob here, so thank you!