Lessons

Lesson Info

Making a Website Live

Hey Betty, it's live me and you. I felt like this morning, I'm going to start the day we're gonna do a live video so that because I feel like we're being stuck behind the screen too long and today is a very exciting day, or at least this video is a very exciting video because we get to stick our internet, our internet, our website online. So we're going to do two things. We're gonna buy a domain name and get some hosting. Okay. And then we're gonna stick it up and other people will be able to see it. So the domain name is something like Dub Dub Dub dot Adair restaurant dot com. We'll check to see if that ones available and we'll buy that and 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 your images and your html and 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 is just the name. Alright, exciting times. Let's j...

ump in behind the computer again and see if we can get it all set up. Alright, before we get started though, I want to show you what we do at the end. This is it, it's outside and you're like, I've seen that before, We've done it. But look, it's now at a deer restaurant dot com. Okay, It's actually live on the internet, people can see it. People start making reservations and checking us on our map. Alright, that's what we're gonna do. Let's jump in now. Alright so let's get this started. We're gonna there's gonna be two parts. We need to sign up for our domain name and our hosting. We kind of do that together and then we need to work out a way of connecting our kind of V. S. 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 Blue Host and that's what we'll do in this video. But there are lots of other alternatives. And why do I choose Blue Host? If you want to go to Blue Host, go to bring your own laptop dot com slash blue and it will redirect you there. I like blue hosts because it's the one I use. I also like it because two reasons we both win um 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 Blue Host dot com. That's okay. But if you use bring your laptop dot com slash 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 Blue host and it's got my face on there. We do some stuff together with Blue Host. So it's a nice little they made a little website for me, which I can't believe. Okay, so the cool thing about it is you get your domain name free as part of it and it has all the things we're gonna need for this and kind of future classes that I have planned, where are we going to do? Wordpress? We're not doing it right now. So if you do you know if you are looking for other alternatives for hosting, there's a couple of things you just need to watch out for. Okay. And not watch out for just make sure it's included. You need a domain and hosting. Those are the basics after that. You really would, 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 it on to later courses 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 blue house. 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 gonna run some basic PHP to do some cool form validation stuff if that went all over your head and you're like, what is he talking about? Just use blue host and follow me. All right, let's get started. Let's click get started now. All right. We got to choose our plan. Now. 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 a deer restaurant. Okay. 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. Okay. 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. Okay. I have to buy 10 domain names. So a deer restaurants dot com. And then I'm doing something for a dance dentist and then dan's web design and then dan's auto mechanics. Okay. 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 you know, imagine like I bought one and then I had to buy a second one. I'm already at like $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 and we're going to pick a new domain name now at this stage you've got two options. Three options actually. New domain name. Okay, well you got to pick your dot com or whatever one you want and if you already have a domain name, type it in here and Blue Host will help you basically the two separate things, right? The domain name gets pointed towards the hosting and if you already have a domain name, type it in here, Blue Host 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, where is it? Um because like sometimes you're like actually I'm not too sure. There you go. If you kind of, I didn't know how to activate this, but it seems when you try and leave this it says, hey, can't decide on a 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 kate and 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 a deer restaurant is available. Okay, let's click next. I think a deer it's a weird word anyway. Yeah. So nobody has its available, which is awesome. And so next thing to do is obviously you know what to do there, package details. So the price we got okay, I think it's 2 95 for us. It's a little bit less than euros, but that is based on 36 months, three years and you might be like, wow, big commitment And you can go down to 12. It just cost you more per month. That's up to you. The other thing to think about is these. Now this is up to you have a little read through. And 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 and it's actually public domain knowledge. Okay. So people can go in and find out who owns the 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. But 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 blue host to get the information. It's just not easily available but have a little read of this. I don't use any of these. Okay. And they're just optional extras. Have a read through them. I get a little bit blase about some of these things and so have a little read through yourself and decide whether they're right for you and what else? I don't need the email hosting, credit card details. Sign your life away, fill in all the details and I will see you in a second after you've kind of gone past this page and 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 gonna 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. Okay, password complete. Let's go to login. Alright. I'm going to go to my hosting login and I'm going to sign in. I'll see you in a sec. Alright. It's trying to get us to install wordpress, which is just a different way of building a website. Okay? You're not actually well, you're building it. Yes, but using kind of templates. So what we're gonna do is skip this. Step down the bottom, yours might be a little different. They changes. Onboarding all the time. Okay. 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's start building a Wordpress website was going to go to our hosting account. Alright. And this is your kind of like dashboard getting started. There's lots of I do not want to buy now. Thank you. I'm sure. I don't want it. Thank you very much. Mhm. Alright. 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. And then there's the way of automatically doing it straight from V. S. 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 move this around a little bit, but you're looking for the file manager somewhere. Okay? Fire managers going to load up and this big thing opens up. Okay. And this is looking at remember before we had something called the local site. So let me show you. Alright. So on our desktop we created this local folder called Project one and inside of that is our website. And 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 blue host that says we'll take these files and we'll share them with the world and we'll make sure it's alive and connected to your domain name. So when people go to a deer Restaurant.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 that this is the kind of like uh you know, this is the folder structure that you get, your website is kept in this one called public html. Okay. So double click public html to go inside of it. And this is currently what's in your website. Okay. It's not what we need. Just, you know, it's got a it's got a kind of like a placeholder website in here for us. We're going to select it all and delete it. So select all and on the top here, delete. Okay. And we're gonna add all that to the delete, leaving the trash. You can bend the trash. It's up to you. But now I've got an empty file. So now I want to upload some stuff. Remember we're in the public underscore html. So let's go to upload and here we can drag files in or click them one at a time. Select the file. Index open. It's not going to work unless we have all the rest of the files will 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. Okay. But I've got my index and my html uploaded. Okay. Now I want to do is I want to add an images folder and upload them separately. Cool, So let's go back. So I've got those two and we just need to rebuild this. Right? So index, so we need this folder called images. Make sure it's spelled exactly the same. Okay. And I'm going to make a new folder. Put them in, grateful the open it up by double clicking it load some stuff to it. Final images don't have much to, 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 going pretty fast. I'm the web designer who's working out of a shed next to sheep with their ones in it. Anyway, it's fast enough. Alright, let's go back and we inside the yep. So go back to public dot html just to see you got all them in there. Let's go check it out already. This is a pretty big moment. I'm going to go a new window. We're going to type in a deer restaurant dot com. Are you ready hold stead even like this is just like do it dan and then talk later, Make it load. Hey, there's a map and the good thing about it is you right now as a student can go to a deer restaurant dot com and it will probably be here. Let me know if it's not because I haven't paid my, 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 and but that's the cool thing about it is that yeah, now anybody can go and see if you can see it to your mom, 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 like just my, like I've made a zillion sites and that'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 that nobody is really going to see it, right. 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 is when you get started is that like surprisingly I assume during this course we were going to go and where is it? We're going to upload it here by 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 a deer restaurant dot com to work. I'm really surprised at how fast blue host got that up. And I don't know if it's just like because they're awesome or it's because yeah, like it's taking me between recording this and actually doing that launch there. I don't know about 15 minutes like. So that's pretty amazing if you go to your host domain and it's like you've got dan's web design dot com and it's still not loading, it's coming up with not recognized or can't find it. Give it at least you know, give it the maximum a day if it's still not working after a day contact Blue host. Blue hosts are awesome at like just customer service. They are like that's the reason I am real happy to like send people their way because blue host 24 hour support is is really amazing. So where are we? Um Yeah, these guys, you can call them, you can lose live chat, you can email them and 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. Alright 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. Okay. So they'll send you an email saying they'll send you probably three males your account sign up some details like this one so check through them all and 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 would later on become live. So just use that yours won't be a dare risk. Okay 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 and again if you run into any problems with this okay with the hosting you can contact me and I'll help you as best they can but because this is kind of more blue hosts thing and they change things and move things around it can get a little bit well it's 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 and what blue host wants you to do is sign up for Wordpress. Okay. So we ignored that and deleted that kind of template id stuff from the site and what you want is file manager and just kind of re create the folders and upload it manually. Other interesting parts about your host is under this advanced one. Okay, 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. And the other thing is your something called an ssl certificate will get created and applied to it later on at the moment. If we go to a deer restaurant dot 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 says, hey, this is a dodgy looking website, it's because the security hasn't been put on it yet and it's fine to 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 Blue host 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 C panel and file manager. Okay. And manually updating it now would be nice just to kind of be envious code and just kind of automatically send it. So let's do that now. And this video is epic, right? It's pretty long. Um Let's do it in the next video, kind of separated out. Alright. I'll see you in a sec.