Play Video

29: How to Easily Upload a Website | Learn HTML & CSS | HTML Tutorial | Upload a Website Tutorial

In this HTML tutorial I will teach you how to upload a website to the internet, which can be a bit tricky if you have never done it before. So in this tutorial I will both explain what is required and how to upload a website easily. For this tutorial we will be using the hosting service named HostGator, but any hosting services will do if you plan to use another service.

Link to HostGator: https://www.hostgator.com/
Link to FileZilla: https://filezilla-project.org/
Link to website validator: https://validator.w3.org/

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful 🙂

Material for this lesson: https://www.patreon.com/posts/lesson-material-42361704

how’s it going everyone welcome back to our next episode on how to upload a website to the Internet now what I’m going to do in this episode is I’m going to go ahead and explain what exactly is required in order to take a website that is on your computer and upload it to the Internet and then afterwards I’m gonna do it step by step so you can actually follow me in case you get stuck somewhere or if you can’t do it on your own so just if you
want to see it I’m gonna go and do it with you now the first thing I want to explain is there’s a couple of things that we need to have before we can actually upload a website to the Internet the first thing is of course you need to have a website the one that have in front of me here is the one that we’ve been building a couple of episodes back in this course and you don’t need to use this specific website you can just take your own website if
you want to there’s no specific requirement other than you just need to have a index that HTML page in order to get the website to work so if you just want to set something up really quickly that you can use for this episode you could also just create an index page and just fill in some text or something you don’t need to have a complete website in order to do with this now the next thing I want to explain is the fact that in the first episode in
this course I said that it is free to make a website and while that is true it does cost a small fee to actually upload a website to the Internet and this is something that might turn off some people it’s a bit more the first time you actually need to upload your website but then afterwards wanted to actually have a place to upload your website it doesn’t cost that much after that so what you’re going to need is what we call a domain and you’re
also going to need something called a server now a domain is if I were to go inside the browser here and go – mmm – Tom the name Amen – tom is the domain name now the place that we put the website where we actually need to upload the website to the place that contains the website on the Internet is called a server so what we need to do is we need to buy first of all a domain and we need to buy a server now the domain is a one-time purchase the
server is something that you need to pay for a small amount each month you know however long you want to have the web and it’s not a lot of money it’s just a small fee but it can be a bit overwhelming overwhelming for some people the first time you need to buy a website because you do need to pay some money for the domain now I just want to point out as well that I have seen people write on some of my videos in the comments that you know you can
go to this hosting company and get both a domain and the server for free or cheaply now I take it as a personal quest to go into my channel and remove these comments that advertise hosting companies because usually when hosting companies get advertised inside my comment area it’s not really the best hosting companies to get advertised it’s usually something that is really bad quality or something that might you know end up hurting you in the
future so what I want to do is well what I went ahead and did is to pick the hosting company that is really cheap but also one of the most popular hosting companies in the world called Hostgator now I do know that this website is very cartoony and I do know that the mascot is a alligator but don’t get confused by the fact of scared away by the fact that it looks like this because it is actually one of the most used hosting companies in the world
so go and go to hostgator.com or something else that might be equivalent to it I’m just saying that I’m going to be using Hostgator and we’re inside we don’t know what to do next then I can’t help you if you’re not using Hostgator I’m just going to point that out so inside Hostgator calm I’m just going to go and go to web hosting and inside web hosting we get a couple of options we can choose different plans now typically if you just have a small
business website it’s usually the cheapest one that you should choose as I’m just going to go ahead and choose the one we get a single domain 1-click installs a none mean of bandwidth this one is also T this one starts at 275 a month it might change in the future as I’m making this video but right now it’s it’s this price with this specific hosting company now just to point out what I want to do is I want to buy the domain called MN toots com and
as you can see right now there’s no website inside evantures comm I haven’t actually bought it yet and it is available because it’s active right before doing this tutorial that I could actually buy it so if you go to a hosting company and you say you want to sign up now it’s gonna take you to this page we can actually click in what domain you want to buy so who were to say mmm toots it will tell you if it’s available or not so right now it says
oh you can in fact buy mmm to come and there’s also these options if you want to buy more domains with this name so other people can buy a domain with a similar name to yours but with another dot something extension so just to point that out that other people can do that so what some companies do some big companies like Google those sort of companies they buy all the different versions of their specific website but because I’m a small person I
don’t have the money or the capacity to buy all of these I just sort of stick with one domain and as you can see I’m too studnet is actually purchased and unavailable because I already own that one so I’m gonna go ahead and choose MN twos calm and I’m just gonna go and go down to you know different options we have down here now I just want to point out that right now there’s some default settings that have been chosen to make my domain more
secure on my server more secure so hackers and that sort of thing can’t get access to it and ruin it so right now there’s something called domain privacy protection that is not the hacking thing what domain privacy protection does is that it just goes in and protects your personal information from the website because you can go to external websites and type in a domain and then see who owns it so what this does is that make sure that nobody can
see who owns this website now I’m just gonna go and check it off I don’t need to use this domain for anything I just needed to test out how to upload a website you guys needs to decide if you want to have this domain privacy protection turn on and pay a little bit and pay a little bit extra for it each month it’s up to you now if we were to go further down you can see we have a couple different options we have a hat sling packets type which is
the cheapest options I’m just gonna keep that one for now we also have billing cycle and more months you pay for the cheaper it gets now because I just need it for this specific tutorial and essentially don’t need to use this domain afterwards I’m just gonna go and buy one month I’m gonna set a username I’m just gonna choose something haven’t routes and a security pin number which I’m just gonna choose a random here and as you can see I’m
actually gonna go ahead and blur out this information because I don’t want you guys to see what my security is so I’m just gonna go ahead and blurt it out for now then afterward further down the page we need to add in our billing info so we can actually buy it I’m just gonna go ahead and fill in my info and just sort of blur everything out so you can’t see it because I want you guys to see a person information so just gonna tap done really
quickly okay so now I added in my personal information and I just scroll down to the next section where we need to choose what kind of additional services we want to add to our domain so right now you can see it did AXA twos a couple of different options as a default again these are optional but I just want to point out what exactly they do so you know if you should keep it or not because some of these are worth keeping if you want to make a site
more secure so the first one here is something called site lock monitoring which is a service they have that goes in and protects your website from hackers it actually describes is pretty well here so it’s highly recommended that you use the service now I’m not gonna use it because I’m not gonna be using this domain but for your sake if you want to actually use this website for anything personal or business wise then I do recommend that you use
it so you don’t have these sort of attacks happening to your site so I’m just gonna go and check it off but again I recommend that you don’t take it off if you want to use this website now the next one down here is something called backup your hard work which is also where they just automatically go in and make a backup of your domain in case you make changes to it from time to time so if you just have a static website that doesn’t really have
any changes to it I don’t see why I should have this but if you have a website that has a block on it or products are something that you need to keep track of and something suddenly happens and breaks the website then it’s a good thing to have so you can go back and what you call it go back to a previous state so you have all the files and everything again now I’m not gonna have this checked on because I don’t need it I’m just gonna check it off
and go down to the next point now there’s a coupon code that it added for me by itself which i think is pretty nice and then we can actually see the full price here so with all the different services turned off then you get twenty six point six four dollars now if it were to actually check on the security thing you can see we get thirty point thirty eight dollars it’s not really that big of a difference but still just because I’m not gonna use
this domain afterwards I’m not gonna worry too much about it so down here you can see and overview over what exactly you bought and this is the one time purchase that they need to make now each month after this is gonna cost you about eleven dollars to to keep the website running so it does cost additionally each month just who aware of it to have a website after this I’m just gonna go ahead and say I read and agree to the Terms of Service I
didn’t but I’m just gonna say I did and go to checkout and then I get taken to my PayPal because I decided to pay with PayPal now you guys if you paid with credit card are gonna be taken to a different page I’m just gonna go ahead and use my paypal here and blow out everything you see because I don’t want you to have access to it okay so get ready we’re setting up your accounts that’s good so the next thing I want to point out here is that after
we bought the domain and the server there is a software that we can use node to upload the website to our server it’s not something you have to have but if something makes it a lot easier in the future if you want to switch out file from your website so you don’t have to go and start the browse and lock into Hostgator comm each time and it’s this software called FileZilla now there is another one called cyberduck which solves a popular I like
using FileZilla I’m gonna go and leave links to FileZilla and cyberduck in the description of the video together with a link to hostgator so you can go ahead and download this specific client now the download link you want to click on is the one over here the left side this one over here is just a server you don’t need that what we want is a file transfer protocol clients which allow for us to you know transfer files using a protocol as in the
name to our online service that we do actually upload it to our domain if that makes sense so download this software whether or not you’re on Mac Windows or Linux and go ahead and install it because after you’ve done so and after they’re done building my hostgator accounts we’re gonna go ahead and upload the website to the internet now this a couple of things I want to point out before we upload the website to the Internet which is first of all
when you do actually upload a website to the Internet there’s a couple of things you need to check for in order to make sure that your website is ready to get uploaded so if you do actually have a finished website there’s a checklist that they need to go through in order to see if you’re actually ready to upload now the first thing is that you should always always proofread your website if there’s spelling mistakes or something that you missed
maybe some links are not working on your website once you upload the website people can see it so they will point out spelling mistakes or errors and that sort of thing if you do not have these things taken care of and as we can see we do actually have an account now I’m just going to go through the list really quickly now the next thing you need to make sure is that your website does have the necessary meta tags inside the head tag and we did
actually have an episode on that or I did a little episode on that I think the previous episode know an episode before the last one I showed you what kind of meta tags you should have inside a website the next thing you need to make sure is that your website works in all browsers Internet Explorer Chrome Firefox opere all these different browsers I’m gonna stand up here on opera you need to make sure the website works on all these different
browsers because it will be slightly different depending on the browser so go ahead and just test it out and make sure it works after you’ve done that you need to validate your website now there is a online validator called and I’m just gonna go and find it here valle de SOI doc or dot w3 dot work which is a place where you can validate your website to make sure that it is marked up correctly because if you were to take a page from your website
just gonna go and grab maybe the front page I haven’t tested it yet so I hope I made everything correctly when we did the tutorial on this just gonna drag it in oops we do actually need to go back one more would you need to go in to validate by file upload because you can if you have the website online if we were to take my mm2 scum copy it and just paste it inside here and then we’ll actually run the entire website and tell you if there’s
something wrong so what I’m going to do instead I’m just gonna file upload by going in here and then I’m gonna drag it in then I can run check and see if everything is like it should be now there is one error inside my code or inside my markup inside the front page we made together which is the fact that it doesn’t like that I use this long link to the fonts that I linked to inside Google’s own font website and I’m just gonna go and ignore this
error because it is the actual link that Google said it should use so it’s not an error I’m gonna take care of but as you can see there’s no other errors inside my website which is good so you should always validate all pages inside your website to make sure there’s no errors inside of it you can use this link that I’m going to put in the description of this video to actually make sure the website looks like it should the last thing we need to
make sure is that we keep a copy of our website offline before you upload it to the internet don’t upload the website and then delete it from your computer because you need to have a version of it in case something happens to your online domain and you need to re-upload the website so it’s very important to keep a copy of your website so our order is completed I’m just gonna go ahead and go into my accounts I am already logged in apparently and
I’m gonna go ahead and find a place where we can use our FileZilla program and access the server so we need some information no tax axes our online server so I’m gonna go ahead and go back inside Hostgator now again I’ve never used Hostgator before so I’m just going to show you how easy it is to to find what you need to find so just gonna go in to domains I guess because we need to pick the domain we bought and as you can see we do have a domain
right now it says the main pending payment has not yet been received and that’s probably because it takes a while for tax we processed the website okay so while my payment is going through and being processed I just want to show you that I did acts have received a couple emails inside my inbox inside my my email account and the first one was a billing for buying a domain and a server on Hostgator the second email is this one with all the
information that I need to lock into my dashboard inside Hostgator it’s very important that you don’t throw away this email if you didn’t receive one make sure to contact Hostgator and tell them that you didn’t receive an email I do want to point out sometimes it can take a little bit before he received the email so just go ahead and wait about half now to an hour to see if you still haven’t gotten the email yet if you haven’t gotten it by then
contact them and tell them you didn’t receive an email okay so I waited for about five to ten minutes and then I received an email from Hostgator saying I had to verify my email address so I went ahead and went to my inbox and clicked on the link and verified my email then I went back into Hostgator and I can see it says that I have my domain working so what I can do now is we can actually go ahead and visit our domain side and as you can see
this is what we have inside the website so far because we haven’t uploaded any kind of files to a website so what we need to do now is we need to access our server and delete the files that are existing inside the server because what we have here is the existing files from Hostgator because they have some default files inside our website that we need to take out and replace with our website files so what we’re going to do is we’re going to go
inside our Hostgator dashboard again I’m gonna go to hosting because it did have some time to look around while I was waiting for this to to go through and inside the hosting tab we’re gonna go ahead and go to files and folders then we get here we have two options we can either open file manager which is going to open up a window with all the files for our website now what we want to do here is we want to access the folder called public HTML if I
go into this folder you can see that we have a couple of different files and these are the default files to be right now can see inside the web site so need to delete these and replace them with our own website files now I’m not gonna use this window inside the browser so I’m actually gonna use FileZilla for this so what I’m going to do is I’m gonna go back inside my dashboard go to FTP accounts and inside the FTP accounts page you can see that
we need to create a new FTP account now I did have a small cut here because I realize we need to create an FTP account typically inside a hosting company you don’t need to create an FTP account it’s just set up for you so I was just sort of stumbled by the fact that we had to create one so just go ahead and say create and it’s gonna open up a creation window so I’m just gonna go and create an account I’m gonna say well right now you can actually
go ahead and set up an email account so we can say Daniel at Emma’s calm I’m gonna not set a directory name because we need to have it inside our main directory when we access the FTP to our server so we don’t want to set a directory name now I’m just gonna set it to an unlimited quota meaning we can upload until we run out of space on the server and I’m gonna go and create a password so I’m just gonna create something I can remember so you need
to create something as well and then I’m gonna go and create accounts after doing this we should have some information here that we need to use node to access our website using FileZilla so I’m just gonna go ahead and go to file site manager now the one that I have here already is my existing website so I’m not gonna access that one so I’m going to click new site I’m just gonna give the name as the web site that we have created called M Intuit’s
dot-com in your case is going to be something differently of course because you have a different website than I do gonna click enter then we need to fill out the information on the side here now I’m just gonna go ahead and drag the website out to the side here so we can access see the info and inside the host we need to add the server name so right now you can see it’s called gator four to seven four blah blah blah just gonna copy that paste it
in the port is always gonna be 21 when you use FTP or at least in most cases it’s gonna be 21 so we’re just gonna say that and inside the logon type we’re gonna say normal and then I’m gonna use the username which was Daniel at and when toots come and then I’m gonna change the password to whatever I wrote inside when we created the FTP account I’m gonna click connect just gonna abort what I had going on here it’s just gonna go and retrieve our
what you call the server and as you can see we now have a bunch of files and folders now the one we’re looking for was the one called public underscore HTML so I’m just gonna go and access it here open it up and as you can see we now have the same files as inside the dashboard inside the browser so what I’m going to do here is I’m just gonna go and delete these because we don’t need them and after doing so I’m just gonna open up my web site with
all the files in it that’s on my computer just gonna highlight everything drag it into FileZilla where we deleted all the files and it’s gonna start uploading them one by one as you can see in the bottom here says cute cute files if I could say that correctly which means how many is left and then we have successful transfers or if any files failed we’ll have them here in the middle so now we uploaded everything I can go to my website refresh and
now you can see we have a completely new website and it’s online because it’s on Emma – it’s calm up here so now we have a website uploaded to the internet now I just want to find a couple of things out before we end off the episode which is if you open FileZilla back covered one points the max it just closed it down and open it and I want to access my website right now you can see the website it’s not here anymore you might be thinking that well
should we type in the information each time we do this no you do not some people prefer writing everything inside up here we can see the host username password but because we went into site manager we have everything saved inside here so we just go ahead and click connect and then you can see we have the website again so I can just go to public HTML and then we have the website so each time I make changes to the website and I just want to
re-upload maybe the gallery page if I made a change to that one I can just drag and drop it into public HTML and replace the file so that’s how we do that and I think that was pretty much it I don’t think there’s anything I want to talk about inside hosts Gators dashboard because what we just talked about here is what you’re going to be touching inside – borno to get the upload working so there’s nothing else you need to to worry about now if you
do have issues with Hostgator you can go to the main site at the top of the website you can see – have a live chat function so if you have any kind of issues you can open it up right what kind of issue you have and then you’re going to get in contact with a person from Hostgator that can help you fix whatever issue you might have so I hope you guys enjoyed I’ll see you guys next time