How to Put a Website Online: Template, Coding, Domain, Hosting, and DNS

hi i'm beau carnes with free code camp in this course i'm going to show you how to get your own website onto the internet i'll show you how to create a website get a custom domain name which is the url people type in to get to your website host your website which is where the files for your website are stored configure dns settings and set up a custom email address if you are just interested in one of these topics check the description of this video for links to the individual sections let's get started you may already have files for your website that you want to put onto the internet in that case skip to this time shown on the screen right now or just go to the next section in the progress bar of this video in this section i'm going to go over how to create a website i assume you already know what your website is going to be about two common ways to create a website are to create it using html css and javascript or you can use a content management system like wordpress wordpress allows you to create a website without knowing how to code the simplest way to create a wordpress website is to get your hosting first so in the section of this video about hosting i'll show you how to install wordpress right now though i'll show you how to create a site using html css and javascript for this example i'm going to create a landing page for different programming courses i've developed this will be a simple site based on a template just to get you started if you want to learn how to make more complex sites check out the playlist linked to in the description html css and javascript are all just text stored in text files html describes the structure of your website and css describes the style and how it looks javascript adds additional interactivity and functionality while you can create these files in any text editor it's common to use a source code editor such as visual studio code this makes it easier to write html and css and even javascript or other programming languages so first let's download visual studio code so if we just go to the main website and download from mac or whatever operating system you have i won't show the whole installation process because well i already have installed and it's different for each operating system so let's go right over to visual studio code okay we have visual studio code and now we can create the website so this is what it looks like when you first start up visual studio code we could just click new file and create the new html file in the new css file but we're going to do something a little different if you're just starting out it can sometimes be helpful to start with a website template this just means starter code for your website that you can customize for your needs this can be an excellent way to learn you can see html and css that someone else has created and then you can start to understand how it works together there are a bunch of sites offering templates one of them is templated.co there are a bunch of templates to choose from i'm going to choose this one called full motion because it includes a responsive video gallery and my page is supposed to help people watch video courses i've created so i'll just click download here but you can download the other ones if one of the other ones meets your needs a little better so after it's downloaded and unzipped i can just go to visual studio code click open folder and then i'll navigate to the folder and click open and now we can see everything on the side here this is the file browser i can just close this welcome screen i don't need that anymore i'm going to open up the index.html now when you're creating a website the main file is almost always called index.html so that's the thing that you're going to want to edit we're going to be modifying the html file in css file you don't need to know everything to modify a template but you should know the basics of how html and css are structured i'm just going to give you a very brief overview if you want to learn more about html and css check the links in the description so you can see this is an example of a paragraph tag that's what the p stands for paragraph and every html tag is going to have an opening tag which is this section right here and a closing tag which is this final section right here and in between the tags in between the the opening paragraph tag and the closing paragraph tag is where text would normally be the text in here would be the paragraph and this opening tag and then closing tag designates the beginning of the paragraph and the ending of the paragraph and you can see in the opening tag there's an id this id is an attribute and the attribute of id is set to my id now the id is often used to identify a certain tag or a certain section of your website for use in the css and the javascript so inside an opening tag there can be all sorts of different attributes and you'll see some other examples when i go to the other code so let's look at this diagram this shows how an html page is structured you can see there's branching sections almost like a tree it's a tree structure so we have our overall document and then we have our root element which is the html element so you'll have an htm an opening html tag and a closing html tag and then everything will be inside that tag so you'll have a head section a opening head tag and a closing head tag and inside the head section there'll be a title with some text and then there'll be a body section with a opening body tag and a closing body tag and then within the body there's going to be the different components that are going to make up the body of the website everything nests inside other elements you'll see more of what i mean once we get to the code also you're going to need to know about css so css is used to style the html so in this case we have the body selector so this first board is the selector and this is going to style everything within the body html tag and in this case it's going to set the color to this hex value so css is always going to have a selector the most common things to select are tags like a body tag or an id or a class you can add a specific class any html tag and then you can style in the html section that has that class i'll show you some examples when we get to the actual code so let's go to the code so every html file is going to start with this this is just saying that this is an html file so here you can see the html tag and at the very end we have the closing html tag and you can see there's a line here that connects in everything is indented so within this html tag there is a head section you can see the opening head tag and the closing head tag and within the head section we have a title section and we have these metas and then we have a link here so you can see that within the heading of the page the main thing we have is the title right now it's called full motion so let's change that i'm going to change that to courses from beau carnes so this title will show up at the very top of the browser window often in the tabs if you have it open up to a specific tab that's where this title will show up so we have these meta tags which i'm just going to skip over for now because they're not super important to what i'm talking about now but this next line is important this is how the html file is linked to the css file so you can see that this is href the reference of the css file is this is this thing here assets css slash main.css so let's go over to this in the file browser under assets css and then main.css that's this file right here so this line is connecting our html file to the css file now let's look at this next section this body section oh yeah you can see some of this is grayed out that's because this is a comment so comments can be used to put something in your html file that's not going to appear on your final page or it's not going to be read by the browser so this section this whole next section you can see the body tag starts here and goes all the way down to here the rest of the page is basically the body or what's going to be shown in the browser when someone goes to your website it starts with this top section and this top section has an id of banner and this it says data dash video equals images banner these things can be both referenced from the css and from the javascript and it's going to use javascript to play a video in the top banner actually let's look at that right now let's go over to the website this is what the website looks like you can see it has the title the page here this is not the same title that we just changed the name of we're going to change that in a second you can see this video plays in the background and if you scroll down well you don't even need to scroll down if you click this button it scrolls down automatically and you can see these different boxes here and if we click watch it will open up and it will have a youtube video so we're going to update this so it goes to my youtube videos if we just scroll down we can see the rest of what the page started out as if you look at this text it's not english this is latin it's common to use latin text or lorem ipsum text as placeholder text on templates and any websites where you don't know what the text is going to be yet but we'll be updating that as we update the template so let's go back over here one very common tag in html is a div tag and that just means a divider or some special section that you're going to style in a specific way with the css you can see this has a class of inner and the css is going to be used to style anything that has a class of inner in a special way so let's go into this header section right here i'm going to change this to courses from beau carnes and this time if i save this and i go back to the page i'm going to refresh and i'll go to the top and you can see courses from beau carnes so this is what i'm talking about you can change a template and it's a lot easier than just writing everything from scratch let's go back to our code you can see this is an h1 tag that means heading one or the top heading there's also h2 h3 as4 there's just different levels of heading and here's a paragraph tag i'll close this so we can see more of it here and so this is the opening paragraph tag if we go over we can see the closing paragraph tag and i'm going to update this whole paragraph between the opening tag and the ending tag with an all new paragraph i'm just going to paste it in and so now it refers to what this new page is going to be about so i'll just save that and go back to the page and refresh and you can see it now has the new paragraph here okay let's go back to the code we can change this learn more or we can change it to something else now you can see this is an a tag or an anchor tag that's a link now you can use it to link to another page or you can link to another part of the same page so here you could add a link to another page like i could put free codecamp.org here and then when you clicked on it it would open up freecodcamp.org but since it says this half shine or pound sign main it's going to make it so it goes directly to the main section here which is right here it's going to a dividing section or a div that has an id of main so that's another way the ids are used so you can actually go to specific sections on your page so when you click learn more it's going to scroll down to this section here you can see that we have this div which divides this section of the page that's the main section that we scroll to and then we have another class called enter so this is probably something that's going to be used in the css file to style a specific section of the page and then we have another section called thumbnails so one thing that's kind of nice with visual studio code and with any code editor is these lines that come under a tag this will show where the ending tag is so this is the beginning tag if you click on it you can see this line is a little lighter so if we go all the way down it goes to here so here's the end of the tag here and so that's going to show this whole section this whole um this whole thumbnail section so the thumbnail section starts here and it goes to here where the closing div tag is so in this thumbnail section you can see there's a bunch of box sections so this is one whole box section right here but there's another box section here and then there's another box section here so there's a box for each thumbnail that's right in the page here so here this is what we're going to change one thing you can see here is that it's getting it's linking to a youtube video right here so the a href this is the anchor tag or what you're linking to and the link is surrounding an image so when it says img that's an image src is source and the source is this section right here the images slash pic01.jpg so if we actually go over to here in the file browser we should be able to find that oh here it is the pic001 so you can see that that's the same thing that you see right here so that's what we're going to have to recreate with my own videos you can also change the title so we see the h3 now h1 is a main heading h3 is like a level three heading so you can level one heading level two heading level three heading and we have a paragraph here so let's update this with one of my videos so i'm just gonna go and grab it from youtube here so just go to youtube.com and i'll actually go right to youtube.com freecodecamp i'm just going to get this javascript one this is the my most popular video that i've created so i'll do copy link address and i can go back over here and we'll paste this in here so now oh i just have to delete the time at the end and now we are going to get the image here now i could find the image and then put it right into this directory here and then then link to that image but i'm going to try a different method there's actually a url a direct url to each youtube thumbnail so i can put a actual file name here or i can put a url so i'm going to put a ur url here now it says there's actually a section to update with the video id so i just have to get the video id from right here i'm going to copy it and then i'm going to go over here and i will paste it now if i save this and then i go back to my website now i'm gonna refresh it okay so now we have the javascript in three hours here and if i click here hmm i was expecting the video to pop up so let's go back and troubleshoot because that's just a little black square okay i noticed that these ones have the short url and then i use the long url here so i'm just going to copy this little section and then put into here so we're using the short youtube url instead the long url so let me save that and i'm going to refresh okay and now the youtube video pops up and if i play yep it works so now i'm going to go back here and i have to update the rest of the stuff so this url i'm going to update for the button so this first link is just the image and now there's the button here so we need the link for the button and i can update the title javascript full javascript course and then here we can update this text learn how to program in javascript okay if i save that go back over looks good okay now i'm going to do the same thing for some of these other ones okay i just finished updating all these other boxes with other videos i've created here's the mernstep course i've got data structures and algorithms in javascript css full course basically i just went through and updated the url here and then copied and used the same url here and then over here i just uploaded updated the image link and then i just added this heading and the paragraph here so that's one great thing about using a template is that it just makes things go a lot quicker instead of writing everything from scratch you can just update things to meet your needs so if we just go over to the page you can see now it says courses from beau carnes always create many popular programming courses now you can access this top courses all in one place click this goes down and then if you click on any of these courses let's say the mern stack one click watch you can watch it right in the browser right here or you can just click this picture here to open the same thing so that's pretty cool let's see if there's anything else you want to change so your stuff down here and i'll go back over to the code so we have the footer here so that's what you see right here this whole section is the footer section so not only is there a tag called footer and then we have the closing tag down here we also have the id of footer so a lot of things in html just dividing up things into sections so we have the footer section and then a div can basically be any section so what we're dividing up into this intersection which we can style with the css so when you have a template you can either update the text to be what you want or if you don't want that section you just can delete it i'm just going to delete these two sections so if i go over here and refresh now it's just going to have the social media links at the end again i don't want all of the social media links you can see the social media links are in a list so ul means unordered list and it has the class of icons and so we have four list elements li the list elements in the list you can see there's the opening tag and then at the end there's going to be the closing tag here and same with the ul and the closing ul list and you see these are just a link that you click on and you can see the class of the fa twitter f8s facebook fa instagram this class here is how the is where the image is coming from this is something fa stands for font awesome and it's something that you can put into your website so you can use different classes to make a specific image pop up there and i'll show you when i go to talk about the css file how this is how this works how we get awesome into our website so it works so i'm going i only want to have the twitter and the email so i'm going to delete these two lines the facebook and the instagram one and then i have to make these links work right now see the href this is where the url that we're linking to and if it's just this pound sign here that means it's just a it links to itself so when you click the link it does nothing but i want it to do something so i'm just going to put hd best colon slash twitter.com and then i'll go into this one and do a mailto bow at free code camp.org so you can either put a full url to go to or if you put the word mail to colon and you put an email address it will open up if you click that link it will open up sending an email to that person so let's save it and go back over to the page and refresh so if i click the twitter icon yup it opens up my twitter and then if i click the mail icon it will open up sending a new email to me okay let's make some more changes by updating the css file but first i'll talk about these scripts so most of these are common javascript libraries which is just javascript code that someone else wrote that you can use on your page to add extra functionality so that we have jquery jquery.scrollingjquery.poptrox and that's going to add different functionality on the page and then the main the code the custom code is toward the end we have the util.js and the main.js and we can look at that right in the page here so here's our utility one and here's our main one and we're not going to talk a lot about the javascript in this video but basically the javascript helps make it work where when you click this it scrolls down like that that's javascript when you click this it pops up it fades in the background and pops up that window that's javascript doing that so javascript can just add some extra functionality to your page and that's what's happening here okay let's go to the css file the main.css file so you can import just like how in your html file you can import cs the css you're going to use in your html you can import other css to use in your css file so we can see import font awesome.min.css now it's getting that right from you can see right here in our assets awesome.min.css so that's what this is and it's importing that css so we can use that also and then it's also going to import and then it's this url so here it's importing a file but here it's actually just importing a url so this url that's being imported you can see it says fonts it says google this is google fonts google has made available a bunch of different fonts that people can easily use on their websites by importing the font through google fonts and you can see it's the font source stands pro at the weight 300 400 and then we have this passion one font at the weight 400. now i want to show you something here where it says awesome.min.css if you looked when it opened the awesome file this css file looks very different than the other main.css file we were looking at because this has been minimized basically it goes through a automated process when you minimize a file goes through an automated process to make it as small as possible and so it takes up less space when someone's trying to download that file it's not as easy to read but it's easier for users to download that file and it still works just like any other css file so if we go if we look at this basic css we're just going to like briefly cover this but it starts with a reset so this is something that people often will include in their css to make sure all different browsers look kind of similar so you know there's a lot of different browsers that people can be using to access your website there's certain uh css properties and code you can put in that's going to make all browsers look very similar and it's also going to just make things look a little nicer than the default css so that's what we have in this reset so it's just going to always apply this reset and then we're going to the basic this is the stuff that's being added specifically for this website so now we're to the other sections and these other sections are stuff that's specifically for this website to to make it look special to make it look how we want to look so you can see the basic um way that css works is that well let's look at let's look at this as an example so this is the selector this is the property in this the value so we're selecting the body tag we're changing the color to this white color so you can see rgba that's just one way to specify a white that's 0.75 opacity and the font family is going to be source sans pro which remember was imported from google fonts and if that's not available it will just use a sans serif font the font size is going to be 14 points font weighs to be 300 points and the line height is 1.65 now with css how it works is whatever is the most specific is what style applies to the element so for instance we see the body here if we go over to the html we can see the body is here so almost everything is inside this body but if we styled say the inner class and we had styles that specifically reference this inner class that's going to override anything that applies to the body so a lot of these styles here are never going to be used if there's something more specific so let's scroll down to some of the other things that are being styled okay let's look at this we have h1 8 h2h3h4h5h6 these are the headings so the color this is another white color there's a lot of ways to specify the color and this is one of them font weight line height and the margin so if we change this color to something different we'll probably be able to see it right on our page so instead of putting a hex value or something i'm just going to type in the word green that's another way you can specify colors in css now go right over here if i refresh we should see something turn to green and you can see these words have not now all turned to green so let's go back and make this white again so another thing i want to show you is this whole section right here where it says media and screen max width 1680 pixels median screen max with 1280 pixels and then you see 980 pixels 736 pixels 480 pixels this is how to make your web page responsive so the it's so this css is going to specify a different style depending on how wide the screen is okay to see how these media queries work let's look at this other code this is for the thumbnails and the box so in the css we're selecting the thumbnails class and then we're selecting the box class that's inside the thumbnails class so if we go back over here we have the thumbnails class classical thumbnails and then we have the box class that's inside the thumbnails class so this is going to impact everything that's inside the box class which is this code right here so this code is going to change and you can see it's going to change depending on the width of the screen it's going to either be the width of 30 percent 45 percent or 100 percent so if we go back over to our page and then if i change the size you can see these boxes that show the thumbnails they're changing depending on how wide my browser is so if it's really narrow it just shows one the column then it goes up to two then it goes up to three and that's all from these media queries they're changing them this is changing the width depending on the size of the screen okay well let's make this bigger again and let's look at the things we want to change so when you're changing something based on a template you want to just try to find something you want to change and then try to figure out how to change it so i want to change this dark color around here i want this to be a different color so i have to figure out which css is is selecting this dark element around here so one way you can do it is just through trial and error trying to figure out what you need to change to change this background color so if i go back to my code i'm going to just search i do command f or control f and i'm going to search for background and i can see that this looks very similar to that color so i'm going to try changing this to another one so with this i can type in the name of a color or a hex code or i can just use this color pick here here that's in visual studio code so i want to make more of a greener color and now i'm going to save this i'll go back to my page i'll refresh and now it worked so i chose the right thing you know i think i want that maybe to be a little more of a dark green well that's easy i can go back over here and then i can make this a little darker and save it and then i refresh okay oh that looks nice now since this is green i kind of want this text or maybe some green to appear right up here somewhere or how about this maybe this circle let's see if i can get this circle to be green so one way to try to figure out what you need to change is to right click on something and then go to inspect element so this is bringing up the element in the html just in the inspector on the browser and so it looks like this could be the the right one and i can actually test it by changing the css right in here so i'm actually going to try changing this right here to instead of white let's see if i change the screen if that will change anything and did so you can see right on the page as i change it in the inspector it changes it on here so i so now i know that i'm looking for something that's styling this banner more see how it says banner more this is the selector that i'm looking for in my css so if i go back over to here and i just had just copied it over in my browser i'm going to find and then paste banner more so now i can change this border if i want to change that circle well how about this i'm going to make this bigger and i'm going to change this to a green color so we'll kind of match the other green that i have going now since this is just an example i'm not going to be like super exact but i could try to make it the exact same green or i could look at a color wheel to try to figure out what's the complementary color to the the different colors but for now i'll just choose that green and i'll go back over if i refresh now circle well you know maybe i will try to get the exact green because i wonder if it would match how that would look so let me go back over here i'm going to go back up to my body where i did my initial green here we go and now i will do my search again to come back down to here and i'm going to just add this new color and then go back over if i refresh okay nice one thing is see when you hover over it it gets white i want it to be a maybe a lighter green so let me go back over here and let me try to find the hover section so here you can see um well let me so where it says banner more and we change it to the border to be green well here's banner more hover that's what the style is going to be when someone's hovering their mouse over it now like nor we'll just keep all the same style as the original one but it will add these changes so i'm gonna change this border well i want i still want to be a two pixel when you're hovering over and now i want to change the color i'm going to change this to a lighter green and maybe add some more blue into it and let's see what that looks like i'll save that go back over and that didn't seem to well i guess it did change it oh yeah now it gets lighter green that's kind of nice yeah i like that so now when i click this it goes down so we can do the same thing by changing different fonts different colors just trying to figure out which css needs to change to change something okay the final thing i want to do is change the text color here so i'm going to go to inspect element and we can see oh it's color white banner h1 now let's just check make sure this is the right one so if i change this if i just type in blue yeah it changes to blue so let's change this to a green color i'm going to just copy this here the the css selector and then i'll just search for the css selector here and here it is so now instead of being white i'm going to change this to a green color again but this is going to be a lighter green than before so let's see what that looks like okay you know what i want to be the exact color that this circle becomes when you hover over it to get that color i can either go back into the css file or i can just inspect this element again and let's see i can turn on the hover state by clicking the hover here now i can get the color from right here and it's just going to copy this color here and i'll go back over here okay so now i'm just going to paste in the color here and i'll save that i'll go back over i'll and i'll refresh okay that's going to be it for now i know this design could be a little better but i'm going to count this good for now because i want to get on to the next part of this course which is purchasing a domain name so let me make sure everything's saved yep all my files are saved because i'm going to copy these files over actually let me quickly delete these because i'm not going to need any of these pictures because i'm not using those same pictures but we'll i'll just keep everything else here and we're going to be copying these files over to our hosting provider once we get that but right now we're going to get a domain name so now you have the files for your website or you're going to install wordpress now i'll show you how to get a custom domain this is what people type into the address bar on their web browser to access your website some examples are youtube.com freecodcamp.org or ces.tech these are all custom domains the end of the website name such as dot com dot org or dot net is called the top level domain or sometimes people just call it the domain ending while dot com is by far the most popular domain ending there are actually hundreds of other endings take a look at all of these on the screen right now one ending that is increasingly popular for people in the tech industry is dot tech and this video was made possible through a grant by the company who runs the dot tech domain when you are deciding what you want your domain to be you also have to decide what domain ending you want here are a few reasons you may want to consider less common domain ending more availability the less common endings have not been around as long so there are way more of them still available it's very hard to find a dot-com name that has not already been taken unique these newer domain endings may help you stand out as being unique which can also help create more of a lasting impression seo using a new domain ending won't hurt your search presence or seo it's worth noting that in the eyes of google and other search engines all tlds or these domain endings are equal so if you get a highly searched for name in your url it can be helpful for seo there are a bunch of places where you can buy domain name and they all work almost exactly the same here are some options godaddy.com domains.google namecheap.com get.tech i'm going to demonstrate how to purchase a domain name on git dot tech since we're getting a dot tech domain but just know the process is similar no matter where you buy your domain name here it makes it really easy you just type in the domain you want so i'm going to try bow.tech okay bodetech is unavailable now most likely the first domain you try is going to be unavailable so it gives some other examples but the other examples are almost never what you're looking for so it's good to have the other options in mind since this website is all about teaching tech i'm going to try both teachers.tech okay it's available and i can buy for one year so i'll choose that i'm not going to show you the whole purchase process but i do want to point out that this privacy protection it says recommended and i would also recommend this if you don't have privacy protection on your domain name then the records of your name and address will be out there for anybody to see your name your address your email address so if you don't get privacy protection you're going to start getting spam because there's companies out there that are constantly checking for all new domains registered to see if there's any real addresses or email addresses and then they're gonna start sending you stuff to advertise because they think you'll be interested in buying things for your new domain so definitely get privacy protection okay i'm just gonna place this order now we're finished buying the domain and to edit the domain we'll just go into manage orders and then find the order that i did for bo teaches.tech and this is our control panel i'll get that a little bigger and then we can update things in this control panel to make our website work but before we can update anything in this control panel we have to get hosting so now that you have your domain name you have to store your file somewhere when you go to any website on the internet your browser has to download the files for that website from a physical location somewhere else in the world a company that stores website files so that they are always available when someone goes to the url is called a hosting provider there are many hosting providers out there that will host files for your website some places will even host your website for free in this section i'll mainly be talking about hosting a static website or a wordpress site if you have a dynamic web application that has to run server-side code before sending web pages to the client then the setup will be a little more complicated than what i described here first i'll talk about how to get things set up on most paid hosting providers and then i'll show you how you can host your website for free on github pages here are some of the common hosting providers for web pages bluehost hostgator hostinger godaddy dreamhost almost all hosting providers have something in common which is this users manage the hosting service through a web application called cpanel or something very similar to cpanel so if you learn the basics of cpanel then it will be simple to use any hosting provider so all the hosting providers are very similar so matter which one you sign up for the steps should be basically the same first of all i would recommend just picking the cheapest possible hosting plan whatever hosting provider you use just pick the cheapest plan you can always upgrade later if you need to often the cheapest plan will work and you can always upgrade later if you somehow need more space or need more bandwidth make sure you choose that you already own this domain because you we've already purchased the domain and the rest of this is pretty straightforward okay i got my hosting and now i'm just going to launch the cpanel the exact way to get into cpanel could be different depending on your hosting provider but it should all be pretty similar and again your hosting provider may not have cpanel but it will definitely have something similar there's no single look for the cpanel dashboard because there are many themes and styles that host can use but the functionality is similar so one of the things you're most likely going to be using is the file manager the two main ways of getting files into your hosting provider is the file manager or through an ftp account so let's look at the file manager so the files we see here are the files that the hosting provider just puts there by default we're going to go to the public html section and this is where we're going to add the files so that's one thing you're going to have to look into when you are trying to upload your files to your hosting provider you're going to have to make sure you upload them to the right directory it may not be the root directory it's probably going to be something like this the public html directory and so those are the files that will appear when people go to your website i'm going to delete everything in here because i don't actually need anything in this directory now i'll go to upload and i cannot upload directories but there is a trick to be able to upload everything at once which is to create a zip file so let me select all my files and then i'll just go to compress and it could be different on windows but it's gonna be pretty similar how you're gonna be able to find something to make them into a zip file so i'm just going to upload the zip file so this includes all the assets and all the images and even the background video so it could take a little bit to upload okay i'm going to go back here and i'm going to extract and this is just an extra directory that i can delete okay i have my website uploaded to the hosting provider we still have to connect the hosting provider to the domain name and we'll do that in a little bit for now i'm just going to close this and let's look at some of the other things you can do with cpanel so we could have uploaded the files through ftp here we can create an ftp account if you have an ftp client like filezilla you can ftp into this and you can easily upload files another thing we can do is create a subdomain let's say we create one called blog so now it's going to be blog.teachers.tech the way i get files into that subdomain is it should show up right in my file manager so if i go back into the file manager now you can see there's a new folder it's called blog.bowteaches.tech anything i put into this folder will now appear at the subdomain once i connect my hosting to the domain name so the two other things i want to show you are the email accounts and the wordpress installer there are a bunch of other things on here that you can mess around and continue learning but i'm just going to cover these other two for now so right here you can create an email account we can also create an email account on the dot tech admin page which i'll show you that in a second again later let's say we want bo at bowteaches.tech and we create a password and then create account okay i can set up the mail client now this is just going to give you different ways to set up the client depending on which method you want to use i'm not going to go through every one but depending on what you want to do you just set it up differently okay the final thing is the wordpress installer so i was saying it's very simple to install wordpress once you have your hosting just click on wordpress installer and then click on install now and then that's pretty much it once you install wordpress you can now use wordpress right on your site and you can watch any wordpress tutorial to learn how to use wordpress i'm not going to install wordpress right now because i'm going to use the other files that i already uploaded onto there so what i'm going to do now is just go back to the dashboard and now i'm going to connect the hosting provider to the domain name and to do that we're going to scroll down until you see the name servers now no matter what company you use to create your domain name and no matter what hosting provider you use you're almost always going to connect these two together with these name servers so i'm going to copy this name server and then go back over to the control panel for the dot tech domain and then you can see there's a name servers manage name servers that use this domain name so i'll click that and then i'm just going to paste in the first name server and then i'll get the second name server and then i'll paste in the second name server we'll put it here and you don't really need to have every name server filled in so i'm just going to go through and delete these other two and then update name servers now everything really should be set up for my website to work sometimes it can take up to 24 hours for everything to update so you may have to wait up to 24 hours before you can actually see your website live okay i waited some time and the name servers have been able to propagate throughout the internet and now the website works so i go to bowteachers.tech and it loads so you can see this if i click here it should open up yep it opens up a video to watch here okay everything's working i can now access my website at a custom domain once you know how it's actually pretty simple to set up a website to host for free at github pages the first step is to create a github account and log into your account and then you just need to create a new repository the name of the repository is very important so for the name of the repository you have to type in your username your github account name and then you just type in github.io bo fcc.github.io this is going to create a repository that will be a special type of repository that will be able to host our website on github pages okay now i'm just going to create a repository okay now that we create the repository we can you can either upload your files using the command line or you can do it right through the web interface so i'll just click upload an existing file and i'm just going to drag and drop the files so let me grab these files here and just bring it over here now it's just going to upload all the files for our website okay all the files are uploaded and i'll just do commit changes after the files are done processing i can go to this url just copy it right here and i'll open up a new tab i'll paste in the url and that did not work okay it takes a few minutes for the updates to show up so if we just wait a little bit and then try refreshing it should work it can take up to 20 minutes for the changes you create on github to show up on the github pages but it's now loading you can see in the address bar bofcc.github and we can see our page now we just need to make this show up at bowteachers.tech before i make this show up at our custom url let me show you how easy it is to make changes to the page on github so you can always change it on your local computer and then upload it again or use the github interface or you can change it right on this github interface you can change the html right on here so in order to edit this i'm going to click the pencil icon for edit this file and then i'm just going to update the title here instead of courses from beau carnes i'm going to call this programming courses from beau carnes and then i can just scroll down to the bottom and you can put a commit message you can put a commit message but i'll just leave this as the default for now and just click commit changes now again it's going to take possibly up to 15 minutes to show up on here but while we're waiting i will show you how to make this work with your custom url and then if we do this right we'll be able to know that we're not getting it from our hosting provider because this will change so here's bo teaches.tech currently and you can see it says courses from beau carnes and this is coming right from our hosting provider that we set up before but now we're switching it to use github pages for the hosting provider so after we update this this will say programming courses from beau carnes to reflect the change that was just made on github so the first step is to go back into github and i'm going to click on settings if i scroll all the way toward the bottom of the settings i can put in a custom domain custom domains allow you to serve your site from a domain other than both fcc.github.io so i'll put bo teaches dot tech and then i'll save it so now that we updated the github settings i'm gonna have to go back to our domain dashboard so this is at the tech control panel or dashboard and to make this work with github pages i'm going to have to go to dns management no matter what company you purchase your domain from there's going to be some way to update the dns settings of your domain so i'm going to manage dns here and i'm going to update some things the first thing i'm going to update is the cname record so the cname is like an alias or it's a way to forward to a different domain so i'm going to add a cname record and for the host name i'll put www so when you go to www.bowties.tech we're going to forward to bofcc.github.io and then i'll just add this record so so now www.bow.teaches.tech will go there i also want to set it up so just bo teaches.tech without the www will also go to the github pages page so to make that work i'm going to add an a record so i will put nothing here and then for this destination address i'm going to put an ip address that comes right from github so it's going to be 185.199.108.15 three and then i can click add record okay that should be all set so i'm gonna close this for now so before i updated the name servers to work with the hosting provider but now that i'm using github pages and i updated the dns settings i don't need the name servers i used previously so to make these new dns settings work i'm going to have to default the name servers back to what they were it says right here required to use our dns management service with your domain name so it says we need i need to go back to the default name servers so i'm going to copy this i'll go up to the top here and then i'm going to change this to venus because that was the second one and as long as you have two that should work so i'm going to update the name servers and now anytime you update the name servers you could have to wait up to 24 hours so i'm going to have to wait and then i'll i will check the website to see if it updates to use the page github pages instead of the hosting provider we had before so it's been over 24 hours and and check this out i'm at bo teaches.tech and it says programming courses from beau carnes so i'm now loading the page right from github pages and now whenever i want to update the page i just update the files on the github repo and then within 15 minutes or so the changes will reflect right on the actual domain right on the page both teachers.tech so now you know how to set up a website with github pages so now you've learned how to create a simple website get a custom domain and host the website through various methods thanks for watching

Channel: freeCodeCamp.org

Views: 580,409

Rating: 4.9445858 out of 5

Keywords: website hosting, publish website, get website online, web hosting, get a domain, get a custom domain, get a url, upload your website to the internet, put website online, put your website online

Id: NQP89ish9t8

Length: 59min 25sec (3565 seconds)

Published: Wed Nov 11 2020