So, let's say you've come up with a pretty nice site. I've got one right here. I'm going to click on my index.html file, and I've got some images in it. I have a special file called CSS that you might not be familiar with yet, but that's okay. But let's just see what my site looks like. Here we go, up. Here is just a little page I made about me with a little bit of formatting. But if you check and you kind of look in the upper corner, you can see that this site is not live. The fact that it says, file colon, so forward, I can't share it with other people live. I can email them my code, I could say to somebody," Oh look, I made a web page," and then I could send them this file and all the images and everything like that, but that's kind of a pain. So, let's try to make this site go live on my GitHub Pages account. So, go back here, to my GitHub account which if you haven't created yet, that's okay. I've got another video, Go create your account and come back here and meet up with us. But other than that, I'm going to make my first live account. Once again, I'm going to go up and do a plus for a new repository. Basically, consider a new folder full of code. Last time I needed to be very careful with my repository name, not this time. I'm just going to call this one, let's say sample, I try very hard to keep it to all lowercase. You can include the little like dash, but no special characters. So, I'm just going to leave it as sample. Very important, I'm going to click on," Initialize this repository with a Read Me, and I click on that, and I'm going to click on "Create repository." So, GitHub right now is creating a new site for me to upload my code. Now, people who use GitHub for, I'm going to say like real, are actually doing a lot of things from command lines and they have to memorize a lot of stuff. We're not doing that. We're just using GitHub Pages to host our code. So, let's click on "Upload files." Now, here's a tricky part, if I were to click on "Choose your files," I could do that and I could go through and pick, well, I need this file and that one, but it won't let me upload entire folders. See if I click on CSS and I click on open, it's like, "Oh, is this the file you want?", I don't want this, I want everything, not just files. So, I click on "Add". What I'm going to do is go over here, and I'm just going to go back up, one, and I'm just going to drag this whole folder over all at once, and this is going to let me upload as many files as I want. The next mistake I make all the time is that I forget to go all the way down to the bottom and say," Commit changes". So, this is the first step out of two steps of making your site go live. The first step is just to upload your files. Again, this may take a few minutes to complete. So, while that's going on, I'm going to go up, up there and then I'm going up. So, what I'm going to click on now is, I'm going to go up and click on "Settings." All right. Now, what I need to do is I need to say, "Hey, if somebody wants to see my site, I don't want them to see my code. I want them to see my actual page." So, I'm going to go back down here, and I'm going to scroll down, scroll down on this mouse, and what I'm looking for is a site that says, "GitHub pages." Go to none and choose master branch and save. All right. You never really know if it worked or not. So, I'm going to go back down again, click over here and go back down, and if I go down to GitHub pages, it will now tell me, "Hey, your code is now right here". So, I'm going to click on this, and it's not uncommon for to say, hey, you don't have anything yet or something like that. So, what I'm going to do is, I'm going to go back to my code and say, "Okay". What was the name of that folder I dragged up? Oh it was sampler, and what was the name of my file? Hopefully, it was index.html and it is, great. I'm going to go right here, and now when I click, I got a 404 error. Don't worry, that's going to happen a lot. First thing to check is, did you put in a typo? Yes I did, I wrote sample instead of sampler. So, let's put that r in there. Now, I'm going to hit enter and there's my site. All right. So, what you can do, the two steps for creating this GitHub account is to upload your file and then change that kind of link for GitHub Pages to turn it on. Once you do that, you can upload as many things as you want. I am going to do one more thing with you real quick though. I'm going to go back to my GitHub account and I'm going to do this one more time but slightly different. I want to go to github.com. I'm going to make one more repository. I'm going to call this one, sample two, and this time, I'm going to forget and I'm not going to click on this Read Me. We'll click on the repository. Oh! Well, now there's no place for me to click on that upload files, and you feel kind of stuck. If you forget, just scroll right up to the ReadMe link on the page, and you click on it and I'm actually creates the ReadMe. It going to go down. Just so you know, commit new file is the equivalent of save files for what we do in our desktop. So now, I can upload files. I'm going to do it one more time to show you another probably easier way. I'm going to go back here. Before I dragged the entire sampler folder, this time I'm just going to grab here. They're all uploading. I'm going to click on "Commit Changes." While this is happening, I want you to think," What was that second step? What was that next step she said I had to do?" That step is to go into settings and add the GitHub Pages. So, let's go up to settings. Up, it's going to, right here. Scroll down at Master branch and save, and then since I want to be a little lazy, I'm just going to scroll down here again, and be like" Oh great, here's the link to my site". I'm going to click on it. Again, when you get the 404 error, there's usually two reasons: either you spelled something wrong which isn't the case here because we clicked on it, we didn't type anything in. Or you need to give GitHub a few more minutes to upload everything or the third one is sometimes, I'm not exactly sure why, but sometimes, GitHub seems almost forget to look for index.html file. So, I'll hit "Enter," and there we go. So, GitHub Pages is a great free way for you to host your code and share it with everyone who you think will be impressed with your incredible work.
