How to put an HTML website online (on the Internet)

In this lesson we're going to learn howto put an html website onto the internetso that other people can view ourwebsite. We're also going to learn how toset up a domain name for our websitelike mywebsite.comTo follow along you just need to knowthe basics of html and css. If you needhelp with that I have a full course inthe description. With that said let's getstarted.Usually when we create a website wecreate some html and css files like this.Now one way to view this website is toopen the html file in our browser.The problem with this is that otherpeople can't view this website becauseit's only on our computer. In order forother people to view this website, weneed to put it on the Internet so how dowe do that?There's actually many ways to put awebsite on the internet but the best wayfor beginners is to use a service calledgithub pages github pages is a freeservice that we can use to put websiteson the internet it's really easy to useand it helps us follow best practiceswhen setting up our website so whatwe'll do is we're first going to usegithub pages to put a website on theinternet and then we'll learn in moredetail about how this process works solet's go to our computer and we're goingto learn how to use github pagestogetherand also don't worry about taking notesi created a reference of everything thatwe learned in this video that you canfind in the descriptionwe're going to start off on our computerand we're going to open our web browserand then we're going to goto github.comto use github pages we're going to needa github account if you already have onemake sure you log in if you don't youcan go through their signup process andcreate a new account and once youcreated a new account make sure you loginto your github accountso once we've logged into github we'regoing to go to the top right corner herei'm going to click our iconand we're going to click yourrepositoriesnow a repository is basically like afolder and this is where we're going toupload our html and css files for ourwebsiteso let's create a new repository so wecreate a new websiteand now we're going to fill in thedetails for our new repositoryso we're going to add a repository namenow this name doesn't really matter it'sjust for you to identify whichrepository this is so i'm just going tocall itsupersimpledashwebsite and feel free to call thissomething else if you'd likethe other option that we have to checkis we want to make sure our repositoryis publicgita pages is only free if you have apublic repository if you choose aprivate repository you're going to haveto pay a fee to use the serviceand finally we can leave all of theseother options to the default and we canclick create repository at the bottomall right after we created ourrepository the next step is to uploadall of our website's code into thisrepositorybut first we'll need a website topractice with if you have your ownwebsite that you want to use feel freeto use that otherwise i've linked asample website in the video descriptionthis is actually the youtube clone thatwe built in the html and css full courseso if we want to use a sample website wecan open this linkclick this code drop downand then click download zipnow once that's done we can unzip itand that will give us the code that wecan practice withthe next step is to upload all of ourcode to our github repository so let'sgo back to our github repositoryand we're going to click this upload anexisting file link if you don't see thisyou can also add a slash upload at theend of the url at the top herenow all we have to do is drag and dropall of the code for our website downhere so if you're using your own projectmake sure to use thatfor me i'm going to use the project thati downloaded earlierso there's one thing we have to becareful of hereso if i go backall of my code is in this folder nowwhat i don't want to do is to drag anddrop this folder down herethis will create an unnecessary extrafolder in our github repository what weactually want to do is to open thisfolder and then select all of our codeand then drag all of the code into hereso that'll take a few moments for all ofour code to uploadso once all of our code has finisheduploading you should be able to see allof your files down hereso we're going to scroll down to thevery bottomand we're going to click commit changesso now all of our website's code hasbeen uploaded to github and we're readyto put this on the internet to do thatwe're going to use github pages so toaccess that we're going to go to thesettings of our repository here and thenwe're going to go down to this pages tabnow to set up github pages we're goingto go to this drop downand we're going to click main you mightsee a different word here like masterjust pick the option that's not none soi'm going to click mainfor the second drop down i can leave itas the default and then i can click saveso once i do that getup pages is goingto take all of our code and then publishthem onto the internet now this processmight take a couple minutes so we justhave to wait for github to finish doingits thingso after a few minutes we should be ableto refresh the page hereand now we should say that our site ispublished at this url so that means thewebsite that we had has now beenpublished to the internet and now anyonecan access it by going to this url intheir browser if you don't see this hereyou can also access it using your githubusernamedot github.io slash your repository namenow we're going to open this in ourbrowser so i have the link here and i'mgoing to right clickand then open link in new taband now if i open that tab you'll seethat we have a 404 page so don't worrythis is normal and we'll figure out howto fix this in just a bitwhat we actually want to do is we'regoing to go into the url hereand we're going to type an html filethat we want to openso if i go back to my repositoryand i look at my codei have a few html files here the mainhtml file for the website is calledyoutube.htmlso i'm going to type that in and openthat in the browserif you're using your own website makesure you type in the html file thatyou're usingso go back to my website hereand then i'm going to type inyoutube.htmland press enterand that's it we successfully took awebsite that we created with html andcss and put it on the internet now we'regoing to learn a little bit more abouthow this process worksso let's go back to our githubrepositoryand we're going to take a look at thehtml code in this project so i'm goingto scroll down here i'm going to clickyoutube.htmland i'm going to look at this code hereso in this code we're loading some cssfiles so here we're loading a filecalled stylesgeneral.cssso if this was on our computer we wouldexpect there to be a styles folderbeside this html file and then insidethere will be a general.css filenow if we go back to our repository soif i click up hereyou'll also notice that we have a stylesfolder and inside we have a file calledgeneral.cssso this means that our github repositoryworks the exact same way as our computerwe load css files the same way we alsoload images the same way and pretty mucheverything else works the same as ifit's on our computerso because everything works the samehere is all we have to do to publish ourwebsite onto the internetfirst we write our html and css code onour computer as normal and then whenwe're done we just upload that code to agithub repository and github will takecare of the rest and put that website onthe internetnow the last thing we're going to coverin this section is if we go back to ourwebsiteso remember that if we didn't have afile at the end here so if i remove thishtml fileand press enterwe get a 404 page i'm going to explainwhat this means and how we can fix itso when we type a file at the end ofthis url like youtube.htmlwe're telling github pages to load thisyoutube.html filehowever if we don't specify any filethis actually looks for a file calledindex.htmlso this url is actually a shortcut forslashindex.htmland if we go back to our repositoryand i click hereyou'll notice that we actually don'thave an index.html file so that's whyit's showing a 404 page telling us thefile is not foundso to fix this all we have to do is toadd an index.ht file into our repositoryso for this example i actually want myyoutube.html to be the home page so thatif i don't type this in here it willstill load youtube.htmlso all we have to do is go back into ourrepository and rename youtube.html toindex.htmlso i'm going to go in hereand then i'm going to clickedit this fileand then up here i'm going to change thenametoindex.htmland now i'm going to scroll downand press commit changes to save thesechangesso again it's going to take a coupleminutes for github to publish thesechanges onto the internet so we justhave to wait for it to finishafter a few moments this should befinished so we're going to go to ourwebsiteand we're going to click refreshand now we should be loading our youtubehomepage without having to specifyyoutube.html in the urlso in this lesson we learned how to takea website that we created with html andcss code and then put that on theinternet using github pagesfor now here are some exercises you cando on your own to practice using githubpagesin this section we're going to learn howto set up a domain name for our websitelikemywebsite.com this is going to make it alot easier for people to access ourwebsite because they can type in thedomain name into the browser instead ofthat url that github pages gives usso there are two steps to this processthe first step is to get a domain nameand the second step is to link ourdomain name to github pageslet's start with getting a domain namenow if you already have one that youwant to use feel free to skip to thistime in the videootherwise we're going to learn how toget a new domain name to get a newdomain name we need to buy one from acompany called a domain registrar sothese are companies that are certifiedto sell domain names now domain namesare not free but they're also notexpensive for example a domain ending indot com usually costs about 10 to 15 ayear and once you register a domain namethat name is now taken so other peoplecan't register it that's why we can'ttake youtube.com anymoreso now that we understand domainregistrars which one should we usethe domain registrar that i recommendthe most is a company called namecheapthis is actually what i use for all ofmy websites i find that they have thebest prices and their website is theeasiest to use so that's why i recommendthemto go to namecheap you can click thislink in the video description to betransparent this is my affiliate linkthis means if you buy your first domainname through this link it won't cost youanything extra but namecheap will giveme about two to three dollars so this isa great way to support this channelwithout any extra cost to you thanks somuchso now we're gonna go into namecheap andwe're gonna learn together how topurchase a domain nameto go to namecheap you can click thislink in the descriptionnow once we're on the home page we'regoing to go into this section calleddomains and we're going to click up hereand then in this text box herewe can search for a domain name that welike so keep in mind that we can't takea domain name that has already beenregisteredfor example if i search in here foryoutube.comand i searchobviously youtube.com has already beenregistered and it's going to tell methat i can't take this domainso we're going to have to come up withsomething that hasn't been taken beforeyou want to pick something that'srelated to what your website is aboutnow if you're not really sure what thatis yet one suggestion that i have is totake your first name lastname.comthis is really useful if you want tohave a personal website when you'relooking for jobs for exampleso for me i'm going to search for myfirst name which is simon and my lastname bao.comnow depending on what your name is thismay or may not be taken if it has notbeen taken you can go ahead and add itto your cartotherwise if it has been taken like yousee here we have a couple optionsthe first option is to change the dotcom to something else so another popularone is dot netand if i search for that you'll see thatwe can add this to the cartnow if you want to stick with dot comyou're gonna have to change something inthe front here so for example i'm goingto add the word dev because i'm adeveloperso once i add that you can see thatsimon boudev is availableand i'm going to add this to my cartso take a few moments to come up with adomain name that you like and then addit to your cart and then we'll continueso once you've picked a domain name thatyou like we can go to our cart up hereand we're going to click view cartand we can usually leave all theseoptions as the default just make surethat you have domain privacy enabledotherwise you're going to get spammedso after we checked everything here andit looks good we're going to confirm ourorderso at this point you're going to have tocreate a namecheap account we need thisaccount because later on we're going tomanage our domain name and link it togithub pages so make sure you go throughthe signup process and create anamecheap account and then login to youraccountso once you've created a namecheapaccount and you've logged in we can goback to our cart here we're going toclick view cartand then confirm our orderand then here we're going to have thecheckout pageso just make sure that everything looksokayand click pay now to register your newdomainand that's it we successfully registeredour domain namenow to view our domain name we can goback to the home page hereand we're going to go into our accountand we're going to go into the dashboardand now if we look inside our dashboardyou should see the new domain name thatwe just purchasedso now that we have a domain name we'reready to move on to the next step whichis to link our domain name to our githubpages now before we can learn how to dothat we actually need to learn a littlebit about how the internet workswhen we open our browser and we visitour github page's website how exactlydoes this workso first of all on github side they'rerunning a web servera web server is just a piece of softwarethat we run on our computeryou probably use a web server before ifyou use the code editor vs code the vscode extension live server basicallyruns a web server on our own computerbut in this case github is running a webserver on their computersso what exactly does a web server dothe main thing is that it cancommunicate with a browser by typing ina url in the browser we can ask the webserver for a certain file for example ifi type inyoutube.htmlthe web server will give us back thathtml fileif i type in styles header.css the webserver will give us back that css fileand that's pretty much it our browsercan ask the web server for files if wehappen to get back an html file it willdisplay the website instead of givingback the text of the filehowever web servers are just softwarewhich means they need a computer to runon so on github side they have acomputer that runs their web serverthis computer that's running the webserver is called a host if you've heardof a web hosting company this companybasically provides you with computers torun your web servernow the next concept we have tounderstand is ip addressesevery device that connects to theinternet whether it's your computer oryour phone or github's computeris given an ip addressan ip address is basically a phonenumber except it's for the internetso just like how you can contact someoneelse using their phone number yourdevice can contact another device acrossthe internet using an ip address and ipaddresses are uniqueso an ip address looks something likethis or something like thisthis is ip version 4 and this is ipversion 6. we have version 6 becausewe're sort of running out of ipaddresses for version 4. it's kind oflike how we run out of phone numbersnow the final piece to this puzzle ofhow a browser is able to contact githubis that we need to link our domain nameto github's ip addresswe can set up a link between a domainname and an ip address inside our domainregistrar or where we bought our domainname fromafter we set this up we can type in thedomain name into our browser and now ourbrowser is going to contact the ipaddress that is linked to that domain sobasically our computer is going to becontacting github's host and as wellgithub's web server and that's how weget our files from github pagesso basically in order to make all ofthis work we just need to set up thislink between our domain name and githubpage's ip addressthis link is called a dns record or adomain name system record so now we'regoing to learn together how to set up adns record inside our domain registrarthe first step is to go to our domainregistrar and log inso i'm using namecheap but make sure togo to the domain registrar that you'reusingas a reminder your domain registrar isthe website where you bought your domainname from and don't worry if you'reusing another domain registrar theprocess is very similar and you shouldbe able to follow along with this videojust in case i have left instructionsfor other domain registrars in thedescriptionso on namecheap i'm going to go up hereand click accountand i'm going to log inonce we've logged in we're going to gointo the settings for our domain namefor namecheap we can go to the domainlist hereand then scroll down and find the domainname that we want to useand then click manageand finally we're going to go to theadvanced dns tab hereand we're going to scroll down and we'regoing to look for a table that lookslike thisif you're not using namecheap don'tworry the process is very similar youjust need to go to the settings for yourdomain name and then look for a tablethat looks like thisif you need help you can search ingooglemanage dns records and then your domainregistrar i also have a link in thedescription with instructions for otherdomain registrarsso this table allows us to create dnsrecords for our domain name so as areminder we're going to create a dnsrecord to link our domain name to an ipaddressso first i'm going to click add newrecord hereand now we're going to fill in thevalues for our dns record don't worry ifthis looks different for you dns recordstake the same four basic valuesthe first value we're going to fill outis the typeso dns records can link different typesof information to a domainto link an ip address we're going to usean a recordnext we're going to set the ttlso ttl stands for time to live thisbasically says that if we change our dnsrecords how long does it take to updateacross the interneta short ttl means the dns changes willbe updated very quickly a long tdl meansthat it will be updated more slowlylong ttls are a little bit moreefficient but for this example we'regoing to select 5 minutesnow if your domain registrar doesn'thave a drop down like this you're goingto enter the value 300 which is 300seconds or 5 minutesand now we have two values remainingwe're going to start with the first oneherethis is called the sub domain a subdomain is basically the part of a url infront of a domain namethis is useful if you want to havemultiple websites under the same basedomain namefor exampleyoutube.com is used for watching videosand thenstudio.youtube.com is a separate websitefor managing your channelin our example we don't really want asubdomain so we're going to leave thisas blankon namecheap to leave it as blank wehave to type atbut for other domain registrars you canprobably leave it as blanknow the last value that we have to giveit is the ip address that we want tolink to this domain namerecall that we want to link our domainname to the ip address of github pagesso first of all how do we find githubpage's ip addressto do that we're going to go to a newtaband we're going to search fordnslookupand then we're going to scroll down andgo to this websiteso this tool allows us to search for adomain name and see which ip addressesare currently linked to it so over herewe're going to type in our githubusername so for me that's supersimpledev1 and then we're going to typegithubdot ioso if you recall this is the domain thatgithub pages gives us by default for ourwebsiteso now i'm going to click here for dnslookupand it's going to show me the ipaddresses that are associated withgithub pagesso what we need to do is to take theseip addresses and create a dns record foreach of themso let's go through the first onetogether i'm going to click this ipaddressand then i'm going to copy itand i'm going to paste it in this dnsrecords tablejust paste it here and then i'm going toclick doneand now our first dns record has beencreated don't worry if the other recordsdisappear those are just the defaultsthat namecheap gives us if we don't haveany other records so finally we're goingto create dns records for the otherthree ip addresses that we see here sofeel free to pause the video and do ityourself for practice otherwise i'mgoing to fast forward and we can move onto the next steponce we're finished we should have somedns a records that link to the ipaddresses of github pagesthe last thing we need to do here is toset up a particular sub-domain calledwwwnow technically this is not actuallynecessary and what we have here willstill work but this is recommended bygithub pagesthere are also some technical reasonsfor setting up the www subdomain butthey're too advanced for this video soi'll leave a link in the description ifyou want to read moreto set up the www subdomain we're goingto go and create a new recordand this time instead of selecting an arecord we're going to scroll down andselect the cname recordso what is the cname recordan a record basically links a domainname to an ip address while a cnamerecord links a domain name to anotherdomain nameso this makes it a little easier to linkto github pages without having to knowtheir ip addressesso for this dns record this value isgoing to be our subdomain so we're goingto set upwwwand here we're going to type in thedomain name that we want to link toso we're going to type in our githubusername for me that'ssuper simple devtester1 and then dot githubdot ioand finally for the ttl herewe're still going to pick 5 minutesor 300 depending on your domainregistrarand now we can save these changesand that will finish our setupso that is all the dns records that weneednow you might be wondering why up herewe didn't just use a cname record that'sbecause we can't use a cname record withthe base domain name we can only usecname records with a subdomain like wwwso don't worry this is something thatyou just get used to as you work withdns records moreanother thing you might notice is thatwe only set up records for the ipv4addressesit's a good idea to also set up the ipversion 6 addresses because we're movingtowards that in the future but for nowit's not mandatory so i'll leave settingup ipv6 as an exercisenow that we've finished setting up ourdns records the final step we have to dois to go back to our github repositoryand tell github pages which domain namewe want to useso let's go to a new tab hereand we're going to go back togithub.comand make sure you log inand then we're gonna click the top righthereand go to your repositoriesand then open the repository for ourwebsite which is this oneand then we're gonna go into thesettingsand then we're going to go to the pagestab hereand finally we're going to scroll downand we're going to tell github pageswhich domain name we want to use sohere's where we enter the domain namethat we set up earlierso for me it'ssimonbowdev.comand finally we click saveand that's it our domain name should nowbe set up correctlykeep in mind that depending on yourdomain registrar it could take about 24to 48 hours for your dns records toupdateso if it doesn't work you just have tobe patient and then try it again laternow if you see this link here you canright click it and then open link in newtabotherwise you can type your domain namein the url at the top hereso now you can see that our domain nameis properly set up for our github pageswebsitethe final thing we had to do is noticethat it says not secure here so we haveto set up something called httpshttps is a security measure thatencrypts all data flowing between ourbrowser and the website so this preventsan attacker from reading our data andpotentially our passwordsto set up https and github pages it'sreally easy we're going to go back togithub pagesand then we're going to scroll downand we just need to check this checkboxnow there is a process that github pageshas to do behind the scenes to set thisup so we just need to wait for thisprocess to finish and then refresh thepageand now this checkbox should be enabledso we can check itand that will enable https on ourwebsitenow let's go to our websitewe're going to go to the top hereand at the front we're going to typehttpscolonslashand press enter and now you should see alock icon here indicating that https isenabledand that's pretty much it in thissection we learned how to get a domainname from a domain registrar and welearned how to link our domain name toour github page's website using dnsrecords specifically the a record andthe cname recordhere are some exercises to help youpractice working with domain names anddns recordsthanks for watching we learned how totake a website that we created on ourcomputer using html and css code and putthat on the internet we also learned howto get and set up a domain name for ourwebsite if you're interested in morelessons you can check out my html andcss full course or if you finish thatyou can check out my javascript coursemy name is simon from super simple.dev iwant to make a tech career possible foranyone if you have any questions orcomments please leave them down belowand i'll see you in the next video