Free Hosting With GitHub Pages: Push Your Site Live

hey welcome back to the bootcamp series so did you finish your homework remember i wanted you to create a simple website with at least two pages maybe more where you link back and forth and i wanted you to use css to make things look nice well hopefully you created a basic website because by the end of this video we're going to learn how to push it up onto the web so you can share it with anyone in the world now usually it costs a bit of money to host a website live up on the web but we're going to leverage the amazing and free forever service offered by github called github pages without further ado let's jump into the technical action okay so you have your files right you have your project folder with your different html pages your css your images and let's imagine now that you're happy with your website and you want to share it with the world well as of right now because the files only live on your personal computer you're the only one that can view the site so if we want this website to be publicly available we need to move or push or copy these files up to a server or host somewhere and this is where github comes into play now really quick before we move forward i definitely want to distinguish between github and just get itself so git is a version control system and this just means that it helps us manage and keep track of the way our files change over time now git as a technology doesn't inherently have anything to do with github github is just the most popular place on the web to host your git projects or git repositories right hence the name it's a central hub for git projects now if you pursue a career in this industry you'll absolutely need to learn the basics of get itself there's no avoiding it however our goal in this lesson is not to learn git in this lesson we're just going to learn the easiest and simplest way to get our files onto the github servers so big picture eventually you will want to learn git itself but now is not that time you can circle back to it later and actually this is a good time to point out that this entire bootcamp series is sponsored by me so i actually have a 15 hour premium video course about git well it includes a lot of other topics as well but it's called get a web developer job mastering the modern workflow in this course we learn about the git technology itself and also some of the workflow tools that help us keep our css and other code super organized throughout the course we create a modern responsive website together step by step and if you're interested in checking it out there's a heavily discounted coupon code in the description of this video that will let you join this course for the price of maybe a couple coffees at a cafe okay one last note before we get back to the task at hand i have another premium video course titled web design for beginners and if you're looking for a guided experience to sort of walk you through the different element types in html and just a lot of guided practice on html and css then you might also be interested in this course again there's a discounted link to join in the description of this youtube video okay now at this point let's get back to the actual task and topic at hand so you don't need to learn about git at this exact moment right now we just need to learn the easiest and simplest way to be able to push our files up on to the github servers so let's go ahead and get started as you might have guessed the very first step is to sign up for a completely free github account so in a new tab in your browser go ahead and visit the github website it's just github.com and then sign up for a free account you won't need to enter a credit card or any type of payment info it's completely free you can go ahead and pause this video while you sign up and then once you have successfully signed up for an account come back and resume the video okay once you have a github account the next step is to download the github desktop application you can find this by either googling for github desktop or just visiting desktop.github.com so when you come to this page you'll see that there's a download available for either windows or mac just go ahead and download it and install it so you can pause the video while the download and installation is going on and then come back and resume this video once you've installed and opened the program okay when you first open the program it will look something like this and let's just go ahead and use this button to sign into our github.com account when you click this button one of two things might happen if it opens the browser that you've already just created an account with it might log you in automatically which is great or it might open a different web browser on your computer for example the difference between chrome firefox internet explorer safari so on and so forth so if it opens in a different browser that's okay just go ahead and log in with the github username and password you just chose a couple of minutes ago when you created your account next you'll likely see a screen that looks something like this and this is just github asking us if we want to give the official github desktop application permission to access our account so we absolutely do trust the application it's created by the official github team so down at the bottom you can just click the authorize desktop or just the authorize button okay and then it might ask you if you want to jump back to github desktop go ahead and allow that okay now back in the github desktop application just make sure you're happy with the name and email fields and then click continue personally i don't like sharing any extra information so i'm going to uncheck this yes submit periodic usage stats and then click finish okay now at this point we're interested in creating a new project now in the world of git we refer to a project as a repository so let's click this button that says create a new repository on your hard drive okay now we need to fill out a few form values for the name of the repo or repository let's just call it my dash example dash site you could call it anything you want that's just what i'm going with we can leave the description blank now the local path is super important i want you to pay attention to where it's pointing towards because that's where it's going to create a new empty folder and then we need to move our website files into that folder so for example on a mac it's going to create a new folder in my documents folder named github it might be slightly different on windows but the point is is i just want you to pay attention to where this is pointing towards because we're going to reference this in just a moment anyways all of these other options look okay so let's go ahead and click this create repository button okay at this point we've created our first project or our first repository now we just want to add our actual website files into this project so for example i have this simple three-page website so i want to add the html the css files the image files i want to add all of those files into my git repo now before we can move the files into our repository we first need to be aware of where they are on our computer in the first place so in my case i have a folder on my desktop with the example three page website but big picture here's what we're going to do here is my computer's documents folder and here's that github folder that github created for me now if i dig into this github folder here we see my example site so the idea is you can have 10 20 30 different websites or different projects and each one will have its own folder so this particular project let's jump into my example site and now this is where you would move all of your html files and your css files and your image files if you're having trouble navigating to this folder you can always close it and in the github desktop program in the top menu you can click on repository and then click either show in finder or show in windows explorer or something along those lines that should take you to the exact same folder so just dig into it and again this is where we would add our website files so in my case i'm just going to open up this folder on my desktop right so this has the three html files for the three pages it has my custom css and it has my different images and photographs so i'm just going to select everything in this folder and i'm just going to move it into that folder that github desktop created for our project now as soon as we do that and then jump back into the github desktop program you'll notice all sorts of changes appear this is because git is tracking that folder it's watching it for file changes now by default it's going to include all the files we added but if there were a few files you didn't want in your project you can just uncheck the checkbox so for example the mac operating system creates these random little files named ds store i don't actually need that for my website so i could uncheck that checkbox for that file and now it will not be tracked or added to my repo anyways with all of the other actually important files checked or added we just need to add a summary of our changes so in this summary field i'm just going to say my first commit you could say anything this isn't super important but be aware that by default your git repo is public so don't include any super secret or sensitive information in this message okay and then let's go ahead and click this button that says commit to master or in the future it might say commit to main either way we're just trying to commit our changes so let's click that button okay cool so now all of those important files are no longer showing up in this changes or changed area at this point we just want to push our repo up to the github servers so up towards the top of this menu right about here we see this publish repository let's go ahead and push that i don't want this to be a private repo because i want this to be a publicly viewable website so i'm going to uncheck this keep this code private checkbox and then let's click this publish repository button okay cool we just successfully sent our files to the github servers so now back in your browser where you're logged in with your github.com account we just need to find our repo so up in the top right corner of github.com you can click on your profile avatar and then click your repositories okay you should see the new repo we created just a moment ago right my example site go ahead and click on that okay now this is the overview screen for your project or repository and because we chose to make it not private that means the whole world can see this page however this is just a listing of our files this isn't the actual three-page example website so there's just one more step we need to go into settings so right about here let's click on settings and then on this settings screen if we scroll about two-thirds of the way down the page we're looking for this section named github pages so this is the feature we want to enable so that github will actually host our files as a website so we see this source option and by default it's set to none so we just want to click on this little drop down box here for source and then choose our master branch in the future this might read main branch instead but either way we're just interested in master or main go ahead and click on that okay you can see the page reloaded github page's source was saved and now if you scroll back down to that area that was called github pages you will see a link right it says your site is ready to be published at and then it gives you a url so i'm just going to open that link in a new tab and there we have it this website at this address so this is a real domain so it's going to be your github username.github.io and then the name of this specific project or repo this url is available to the entire planet so you can copy and paste this url send it to your friends family colleagues whoever and they will be able to view your website before we bring this lesson to a close i do want to show you how you can update your website once it's up on github so for example imagine i wanted to add an exclamation mark at the end of this header of my cool website so first of all you'd want to make sure that you edit the correct file so i'm not going to edit the file that was on my desktop instead i want to edit the file in the github folder so from github desktop you can always click repository and then show in finder right so this is that github folder within my documents folder and then my specific project or repo i would just open this in vs code so you can just drag this entire project folder onto a vs code window okay and then let's imagine in the animals.html file maybe around line number 11 i want this my cool website heading to have an exclamation point at the end so i can save that and now back in the github desktop program you can see that shows up as a change in this changes area and if you click on it you can see it even shows you the exact line that you changed pretty cool so i'm going to leave that file checked but i don't necessarily want to add my random mac os ds store files so i can uncheck those leave the html file checked and then add a summary changed headline on animal page and then i realize it's falling off the bottom of the screen but down at the very bottom left corner there will be a commit button so then go ahead and click the commit button okay once you've committed we just want to push or publish so that's this button right here we want to push to origin in this case origin means the github servers let's click that that could take maybe 10 seconds okay but once it's done back in our web browser if i refresh it might not show up right away it might take 30 seconds through the magic of video editing i can fast forward a bit but if you wait just a little while and then refresh perfect so at this point not only do you know enough about html and css to create a website but now you know how to actually publish it and share it with the world this is great however these basic types of websites are basically just brochures right they just sit there and they don't actually do anything and your visitors can't actually interact with the site at all so in order for our websites to be more than just a digital brochure we need to learn about programming which is the second chapter in this boot camp series however i don't want to immediately jump into the next chapter first i want to give you a bit of closure on this design chapter because not all of you are in a hurry to move on to programming some of you will be super interested in design and you'll want to know what you can do next to continue growing in that area so in our very next video we're going to cover several sort of next steps when it comes to design big picture don't worry the programming chapter will be coming soon enough and it's going to be a really fun change of pace i hope you're enjoying this boot camp series so far i appreciate everyone who's working through this with me thank you for watching the videos take care and i'll catch you in the next [Music] one you

Channel: LearnWebCode

Views: 36,927

Rating: 4.8939395 out of 5

Keywords:

Id: JeUMb0OgUGg

Length: 17min 8sec (1028 seconds)

Published: Fri Aug 21 2020