How to put your website live on the internet with your own domain

Hey buddy, it's live me, and you. I felt like, this morning, I'm going to start the day, we're going to do a live video so that-- because I feel like we're being stuck behind the screen too long. Today's a very exciting day, or at least this video is a very exciting video, because we get to stick our internet, not internet, our website online. So we're going to do two things. We're going to buy a domain name, and get some hosting, then we're going to stick it up, and other people will be able to see it. 

So the domain name is something like www.adarerestaurant.com, we'll check to see if that one's available, and we'll buy that. Then we need something called Hosting, and that's just a service where they're going to say, "We will look after your website for you, your images, your HTML, your CSS, and we'll look after it, and we'll make sure it's available to everybody." That's the hosting part, and the name, the domain name, it's just the name. All right, exciting times. Let's jump in behind the computer again and see if we can get it all set up. 

Before we get started though I want to show you what we do at the end, this is it. It's our site, and you're like, "I've seen it before, we've done it.", but look, it's now at adarerestaurant.com. It's actually live on the internet, people can see it, people start making reservations and checking us on our map. All right, that's what we're going to do; let's jump in now. 

So let's get this started, it's going to be two parts. We need to sign up for our domain name, and our hosting. We kind of do that together, then we need to work out a way of connecting our kind of VS code, with that hosting, to upload it. So where are we going to buy our domain name and hosting, it's up to you. There are lots of sites that do it. My recommendation is a place called Bluehost, and that's what we'll do in this video, but there are lots of other alternatives. And why do I choose Bluehost? If you want to go to Bluehost, go to bringyourownlaptop.com/blue, and it will redirect you there. I like Bluehost because it's the one I use. I also like it because, two reasons, we both win. I've got an affiliate deal with them where I get a small cut of your sign up. So when you sign up I get a little bit, you can go around me if you don't want to, you can go to bluehost.com, that's okay, but if you use bringyourownlaptop.com/blue, two things happen, I get a little bit extra, and you get a big discount on your sign up. 

So if you use this, look, it's Bluehost, and it's got my face on there. We do some stuff together with Bluehost, so it's a nice little-- they've made a little website for me, which I can't believe. The cool thing about it is you get your domain name free as part of it, and it has all the things we're going to need for this, and kind of future classes that I have planned, where we're going to do WordPress. We're not doing that right now, so if you are looking for other alternatives for hosting, there's a couple of things you just need to watch out for, not watch out for, just make sure it's included. 

You need a domain and hosting, those are the basics. After that it would be really cool if they had really simple WordPress installation. You don't have to, for this entire course, because we're not doing it, but if you plan on following along to later courses, it would be super handy. 

The other little things to look out for is something called an SSL certificate, make sure they have that. Most of them have it now, and it should be free as part of your hosting, this Bluehost one does. Other nerdy stuff is to make sure that it's an Apache server, and that you can run PHP on it, because later on in this particular course, we're going to run some basic PHP to do some cool form validation stuff. If that went all over you and you're like, "What is he talking about?' just use Bluehost and follow me. 

All right, let's get started, let's click 'Get Started Now'. I'm going to choose our plan. There's always three, why is it always three? For you, for this class, all we need is the Basic plan, you can do the Plus or the Choice Plus. It's not that much more expensive, but the reason you would is, if I'm just designing one website, say I am the owner of Adare restaurant, and I do not need to have 10 other websites, I'll just use Basic, because that's the big thing that's different. Down here, Parked Domains, Sub Domains, just means, this one here I can be more of a Web Designer, and go, "All right, I've got 10 clients," and they're all using the same host, I have to buy 10 domain names, so adarerestaurants.com, and then I'm doing something for Dan's Dentist, and then Dan's Web Design, and then Dan's Auto Mechanics, 

So I'm doing lots of sites for people. That's where you might decide to use this Plus or Choice Plus, so that you get to do, like lots of-- lots of websites using the same monthly cost rather than-- imagine, like I bought one and then I had to buy a second one, I'm already at a flat $5 a month, so I might as well go for something like this. You can switch later on, so for the moment we're going to use 'Select', then we're going to pick a new domain name. 

Now at this stage you've got three, two option, three options actually, New Domain Name, where you get to pick your dot com, '.com', or whatever one you want. If you already have a domain name, type it in here and Bluehost will help you. Basically they're two separate things, right? The domain name gets pointed towards the hosting, and if you already have a domain name, type it in here, Bluehost will help you point it to the hosting that we're about to sign up for. If you don't have one put it in here, if you try and leave, because sometimes you're like, actually I'm not too sure, there you go. If you kind of-- I didn't even know how to activate this but it seems, when you try and leave this, it says, "Hey, can't decide on domain name, you can do it later." You just get a credit, and you can add it later. So if you've spent, like already an hour trying to figure out a domain name, come back later and do it.
 
How to activate that little pop-up, no idea, just wiggle your mouse around. I think if you go towards this, crossing it out, it seems to launch it. Now we're going to check if Adare restaurant is available. Let's click 'Next'. I think Adare, it's a weird word anyway. So nobody has it, it's available, which is awesome. 

Next thing to do, is obviously you know what to do there, Package details. So the price we got, I think it's 2.95 for U.S, it's a little bit less in Euros, but that is based on 36 months, so 3 years. You might be like, "Wow, big commitment." You can go down to 12, it just cost you more per month, it's up to you. The other thing to think about is these. Now this is up to you, have a little read through. The main one that I'll kind of talk about is the Domain Privacy Protection. So when you fill out the details for a domain name, like this stuff, it's actually public domain knowledge. People can go in and find out who owns a domain name and find out the address. So what people do, not me, is some people just put in a fake address. Never heard of that before. 

Another way is to do this Domain Privacy Protection. I have no idea how, like how they do a monthly cost, that blocks it from people, but it does. You've got to then kind of reach out to Bluehost to get the information, it's just not easily available. Have a little read of this, I don't use any of these. They're just optional extras, have a read through them. I get a little bit blase about some of these things. So have a little read through yourself and decide whether they're right for you. What else? I don't need it to be my hosting. Credit card details, sign your life away. Fill in all that details, and I will see you in a second, after you've kind of gone past this page, we'll do the rest. 

All right, this is the page you end up at. Remember, if you're watching this in the future, everything might be slightly different, but we should end up in a similar sort of place. So we're going to set our password for the account. I'll do that without you looking. You look away, promise, and I'll see you in a second. Password complete, let's go to 'Login'. I'm going to go to my hosting login, and I'm going to sign-in, I'll see you in a sec. 

It's trying to get us to install WordPress, which is just a different way of building a website. You're not actually, well you're building it, yes, but using kind of templates. So what we're going to do is skip the step down the bottom. Yours might be a little different, they change this onboarding all the time. They're telling us here, they're going to kind of put the WordPress installation on a kind of temporary domain, we're not going to use it. So let's skip Start Building, because it will start building a WordPress website, we're just going to go to our hosting account. And this is your kind of dashboard. Getting Started,there's lots of-- I do not want to buy now, no, thank you. I'm sure I don't want it, thank you very much. So what I want to do now is upload my site. 

Next thing we want to do is, I'm going to show you two ways of uploading your website to your new domain. We'll use the caveman way, which is super simple and can't be broken, then there's the way of automatically doing it, straight from VS code, which is helpful, but a little bit harder to set up. So we're looking for the File Manager. It might not be here when you go to here, they might have moved this around a little bit, but you're looking for the File Manager somewhere. File Manager is going to load up, and this big thing opens up. This is looking at, remember before, we had something called the local site, so let me show you.
 
So on our desktop we created this local folder called Project1, and inside of that is our website. The only problem is, we've got an Index page, and we can see it but the rest of the world can't, and all hosting is, is that there's a company, like Bluehost, that says, "We'll take these files, and we'll share them with the world, and we'll make sure it's live and connected to your domain name." So when people go to adarerestaurant.com, they're going to be shown this index, and they promise to always have 100% uptime so that everyone can see it all the time. 

So what happens is, this is the kind of folder structure that you get. Your website's kept in this one called public_html. So double-click 'public_html' to go inside of it, and this is currently what's in your website. It's not what we need just, it's got kind of a placeholder website in here for us. We're going to select it all and delete it. So 'Select All', and along the top here, 'Delete'. We're going to add all that to delete. Leave in the trash, you can bin the trash, it's up to you. Now I've got an empty file, so now I want to upload some stuff.
 
Remember, we're in the public_html, so let's go to 'Upload'. In here we can drag files in or click them one at a time. Select a file, let's do Index, Open. It's not going to work unless we have all the rest of the files, a little half work, so we need to do both CSS and the HTML, or you can just drag it, it's up to you. You can't drag folders into this thing for some reason. That's why it's a bit caveman-ish doing it this way, but I've got my Index and my HTML uploaded. Now what I want to do is, I want to add an Images folder and upload them separately. So let's go 'Back'. 

So I've got those two, and we just need to rebuild this, right? So, Index, we need this folder called Images. Make sure it's spelt exactly the same. I'm going to make a new folder, put them in, okay, folder. Open it up by double clicking it, upload some stuff to it. Find all my images, don't have much too. I'm going to drag them across. Images will take a little bit longer to upload. I'm on some terrible internet here, so it's not pretty fast. I'm the Web Designer who's working out of a shed next to a sheep, with terrible internet, anyway it's fast enough. 

All right, let's go back. And we're inside the-- so go back to public.html just to see, you've got all them in there. Let's go check it out. Hey, ready, this is a pretty big moment; I'm going to go 'New Window', we're going to type in adarerestaurant.com Are you ready, hold, steady. Even like, this is just like a, "Do it, Dan, then talk later, go." Make it load. Hey, there's a map. The cool thing about it is, you right now as a student, can go to adarerestaurant.com, and it will probably be here. Let me know if it's not, because I haven't paid my hosting fees. It might come down at some stage, because as much as I like this website, it doesn't serve any real purpose other than learning, but that's the cool thing about it, is that, now anybody can go and see it. You can send it to your mum, you can send it to your friends, and say, "Go, check out my website." Start posting it on social media, "I made a website." 

Anyway, I get excited because even if it's just my-- like I've made a zillion sites, and it's just that moment, it's like the birthing of your website. It's alive, all that hard work, other people can see it. The trouble is nobody's really going to see it. Nobody's going to find this website unless I start sharing around, and telling people, and adding it to lists, and that sort of stuff, but it's alive, it's exciting. 

One thing you might find when you get started is that, surprisingly I assumed during this course we were going to go and-- we were going to upload it here, buy our domain name, and the domain names take a long time to populate, So often you need to wait for a day or a few hours, for adarerestaurant.com to work. I'm really surprised at how fast Bluehost got that up. I don't know if it's just like, because they're awesome or it's because, like it's taking me between recording this and actually doing that launch there, I don't know, about 15 minutes, so it's pretty amazing. If you go to your host, your domain, and it's like, you've got danswebdesign.com, and it's still not loading, it's coming up with, not recognized or can't find it, give it at least, give it the maximum of a day, if it's still not working after a day, contact Bluehost.

Bluehost are awesome at like, just customer service. Like that's the reason I'm real happy, they're like, same people that way, because Bluehost's 24-hour support is really amazing. So where are we, these guys, you can call them, you can use Live Chat, you can email them, like they're crazy fast at getting back to you. It's not a pitch, I guess it's just more of, I don't know, not all businesses are as good as this, I wish more were, but anyway. So the domain name came through, you might have to wait a little while. I just want to jump in here real quick, because I said just wait a little while. Actually you don't have to, you do have to wait a while for the domain name to get populated, but there is a temporary domain name that you will get. 

So they'll send you an email saying-- they'll send you probably three emails. Your account signup, some details like this one, so check through them all. You'll find one of them that has this important account information, and this is the one that you can use temporarily, because if you're like, a bit deflated, because you're like, "I've got a domain name, and it doesn't work", use this, copy and paste this into the browser, and this is like a temporary holding for your domain name, that will later on become live, so just use that. 

Yours won't be adareres, yours will be whatever domain name you're using, so this will be different for you, but anyway let's jump back into the video. Again ,if you run into any problems with this, with the hosting, you can contact me, and I'll help you as best I can, but because this is kind of more Bluehost's thing, and they change things and move things around, It can get a little bit-- it would be easier for them, and quicker probably for them to help you. So Home is where we kind of started, let's just recap. 

What Bluehost wants you to do is sign up for WordPress. So we ignored that and deleted kind of templated stuff from the site. What you want is File Manager, and just kind of recreate the folders and upload it manually. Other interesting parts about your host is under this Advanced one. Click on that, you'll see all of these again, but there's some other useful things in here. It depends on how nerdy you want to go. You can set up your email address from in here, you can set up kind of tracking, how many people have been to your site, all sorts of cool stuff. 

The other thing is something called an SSL certificate, will get created and applied to it later on. At the moment if we go to adarerestaurant.com, you'll see that it says, 'Not secure'. That's just because it hasn't been, like made and done yet, that will become secure later on. So if you go to your site, and it says, "Hey, this is a dodgy looking website", it's because the security hasn't been put on it yet, and it's fine for you to look at, it's fine for anybody to look at because it's not malicious, but it will need to be there eventually, because Google doesn't like unsecured sites, but that will happen automatically for you. If it doesn't, reach out to Bluehost and ask them to help out, but it seems to be an automated process with them. 

Now I promised you we'd do the long way, which is kind of using cPanel and File Manager, and manually updating it, now would be nice, just to kind of be in VS code and just kind of automatically send it. So let's do that now-- this video is epic, right, it's pretty long. Let's do it in the next video, I'll separate it out. All right, I'll see you in a sec