How to Deploy a Static Website to GitHub Pages - Free Hosting Tutorial

hey there how's it going everybody in this video we're going to be learning how to deploy a static website to GitHub pages I mentioned in a community post a while back that I was going to be doing an upcoming tutorial on creating a portfolio website so that everyone can have their own web portfolio out there for potential employers and using something like GitHub Pages not only allows you to uh put this out there for free but also having uh your site on GitHub will show potential employers that you're at least familiar with the platform and know how to do those Basics like creating and updating a repository so it's a good look all around to have something like this for yourself now I'll also be showing how we can use a custom domain name for this GitHub Pages site so that it looks a bit more professional so with that said let's go ahead and get started and see how we can get a static site deployed to GitHub pages so first you're going to need a GitHub account I'm sure many of you already have one but if not just go over to GitHub and sign up and once we're on GitHub let's create a new repository you can either click on the button to create a new repository or you can get go to uh github. com slne and this new repository is going to serve as the project directory for our site so I'm going to create a new repository here and let me make this just a little bit larger so we can read now the naming of this new repository is going to be important it needs to be uh your account name. github. io uh so for mine it's going to be Corey M shaer do github. io that's going to tell GitHub that this is going to be a GitHub Pages repository uh now the defaults for everything else should be good but if you'd like to fill in a description or anything like that then feel free to do that I'm just going to use all the defaults here and go down to create repository now when you create a blank repository it's going to give you a lot of different options for how we can push our files uh we can use an existing project or create a new one but before doing that let me show you how just creating this repo with that naming convention has already given us the ability to go live with a website uh so for example it also gives us the option here uh just to create a new file within our repository directly here within the browser so if I click this and click on new file I'm just going to name this in index. html and within here let's just do a uh simple H1 tag and I will say uh my portfolio and I will close that out oops and it looks like that closed that off for me automatically okay so now I'm going to commit changes commit that and just by doing that if we navigate to the website that has the name of our repository uh then we should be able to see our site now this can sometimes take a bit before it's updated uh but let me navigate to this uh to see if this is live yet so if I go to Corum shaer github. io then right now this is uh still a 404 site but just give it like a minute or two and I will refresh this and we will uh see if this is live okay so let me refresh this again okay I'll refresh it again and now we can see that we have my portfolio there so now uh that is up and running so just by using that name convention and adding that index. html file and adding in just a little bit of HTML we have a static site available online so if you're familiar with how to push files up to GitHub and already have a static site that you've been wanting to uh push online without messing with more complicated hosting Solutions then at this point you're basically good to go and you can do all of this within the browser uh even without doing anything on your local machine now a lot of the people know about this feature but if you're working on a repository uh that you have the necessary permissions on which this is one that we do since we just created it then GitHub has an instance of vs code within their browser uh that we can open up and work on our repository so if I na navigate back to this index. html file here then I can open up an in browser editor uh just by pressing the dot key if I do that oh let me see here if okay so I actually don't use this in browser editor very often uh it looks like it's wanting me to uh sign in using GitHub here um I'm not going to do that right now I just wanted to show you that this was an option um basically anything up here that says github. com if you instead go to

to dodev then you can open up your files within the browser and edit those there it's a lot better than um going in here and trying to change them um with this limited functionality here now that github. com that allows you to run code but that's going to be outside the uh scope of this video I just wanted you to know that that's a possibility so that's one way that you could edit your new site um but most likely you're going to want to have a local repository that you can edit on your own machine and push up to this repo and I'll go ahead and show how this is done by pushing up my personal portfolio that I have saved on my local machine now when we first created our repository uh GitHub gave us some suggestions on how we can begin working on this repository on our local machine uh either by creating a new local repository or connecting uh an existing repository uh to the one that we created here uh since I created that index. html file I can't get back to that starting page without uh recreating it from scratch but I took a screenshot of the suggestions that they put up uh whenever you create a new repository and we can see here that um it shows us the commands to either create a new repository on our local machine or we can push an existing repository uh the steps are pretty similar so I'll go ahead and show how to create a new repository uh from an existing project and push that up so I have a project here on my desktop if I pull this up really quick if I print my current directory you can see that I'm just here on my desktop and I have a sample portfolio that I can upload so let me CD into this portfolio project and if I do an LS then we can see here that we have a lot more files that you might expect on a static website so we have some images some CSS uh I don't have any JavaScript uh for this project since it's a fairly simple portfolio but we could have some JavaScript in here as well um but I'm not currently uh tracking this project with Git so if I want to push this up to GitHub then I'll have to initialize a repository and then connect that to our GitHub repository that we just created and if you aren't very comfortable with uh git commands then feel free to just follow those commands um that they gave you step by step so I will put these side by side here together so what we're going to be doing is creating a new repository so first we need to do a get init and it initializes our repository and in the steps that they provide they add a readme markdown which is usually good to have but I'm going to skip that part uh you can add it if you want um so now we have a get repo but we haven't committed our files uh first I'll have to add the files that I want to track which in my case is going to be everything um I actually already have a get ignore file in this project uh which I add to every project so I'm not tracking useless files that don't need to be pushed up so to tell git that I want to track all of the files in my project I can just say git add and then Dash a for everything and if I do a get status then we can see that it is that all of these are changes that will be committed and now I can commit that just by saying get commit and I will put in a message of initial commit and now that commit was made now if you're not familiar with using git then I do have a video on getting started with Git as well uh if you'd like to learn more about how to use that in the command line so I'll be sure to leave a link to that video in the description section below but now that that's committed all that's left to do is push this up uh to the repository that we created so first I'll connect this local repository to the one on GitHub I'm just going to do that uh by copying pasting the command directly that GitHub gave me here and actually this screenshot is from when I created a uh different testing repository so this is testing. so let me fix this the repository that we created it had that naming Convention of Corey M shaer our account. github. io that was this is the repository here that we want to add as that remote repository so I'm going to run that now one last thing that we're going to want to do before we push this up is to rename our Master Branch to

Maine GitHub uses the name Maine for their Master Branch so we're going to follow that convention mine is already named main here uh since that's how I have it set up as the default on my machine but if you needed to change that then you could just say uh get Branch with a-m and then say main there if you run it again it's not going to hurt anything and then we can see here that it says that the last step is to a do a git push uh- U origin main so let's do that get push dasu origin Main and if I run this now I'm going to get an error here and the reason is because I've already created that index. html file uh in the browser to show you an example of that so if you were doing that from scratch then you might not get this error here um so basically it doesn't know how to handle uh how I want to handle having two files with conflicting content so typically if you run into something like this then you'd want to carefully merge the files but in this case I know that I want the version that's on my local machine so I'm just going to uh force that push up to GitHub and it'll overwrite my git history with what's on my local machine so I can do that just by adding Force option here and if I run that then it should push that up to our remote repository now there's a lot of different ways for cred Cal and authorization with GitHub um if you try to do this it might ask you to enter some credentials or authorize uh so that you can push up those changes I've got those saved on my local machine I use the uh get credentials manager but you might need to authorize that if you run into any issues pushing that up there okay so now that we've pushed that up if I go back to my GitHub repository here then we can see that this has been updated with the files from my local machine and if I open up the actual uh location where this should be so if I reload this page here so then after a minute or two this should update uh with what it is that we pushed up um so this is using a portfolio template that I put together and I'll be showing how I created this in the next video so be sure you're subscribed for that basically what this does is it takes all of my resumé data from a Json file and generates the HTML using a template so it makes it easy to you know simply update our resume with new data and regenerate different HTML files that we need okay so now you have a way of pushing up your static HTML uh to GitHub pages and so far everything has been 100% free so if you wanted you could use this GitHub Pages URL as your portfolio to send to potential employers and you'd be good to go so for example ex Le this one here for me is Corum shaer github. io if I sent that URL to anybody then they would see my portfolio here at this website it's all 100% free but if you wanted a slightly more professional look then you can also use a custom domain with GitHub pages so you could run your website doing exactly what we've done here but if I wanted this website to be displayed instead as like Corey ms. com or something like that uh then we can set that up as well so let's go ahead and go over how to do this so that we can see exactly how it's done it's pretty simple to set up so first you need to purchase a domain name and there are tons of websites that you can use to purchase domains I use name cheep uh this isn't a sponsor video or anything like that um that's just the service that I've used for my domains for the last 10 years and I've found them pretty simple or pretty easy to use so let me go back to my repository here now the domain that I'm going to use for this tutorial is going to be my awesom app. com that's just a domain that I bought uh a while back just to reuse on different tutorials um so to set this up let's first go to the settings of this GitHub repository now these are the specific settings for our repository and not our Global GitHub settings so for our repository settings which is going to be right here at the top right I'm going to click on settings so we're going to get a lot of different uh settings here for our repository um now in the sidebar here since this is a Pages uh that we use GitHub Pages then we should have a Pages tab here in the sidebar so I can see that we have a Pages tab here so I'm going to click on that and then if I scroll down here a bit then we can see that we can enter our custom domain so the one that I'm going to use is my awesom

app. com and I will save that and now if I go down here then it's going to start a DNS check and this might take a few minutes so let me fast forward until this is done oh and even before I stopped talking uh we can see that it failed now I don't have my domain configured correctly on purpose because if you're doing this from scratch then you most likely don't have it configured either uh so I'm going to show you how to fix this so with whatever service we use to buy our domain there's going to be an option somewhere to set the DNS records for that domain we need to set these to the IP addresses for GitHub pages so over in my name Che account I have this pulled up here in my tab these are all of my settings for this specific domain name uh on name chep now whatever service you use for your domains you're going to have something similar to this now on name chep to set d DS records uh this is here over here after I click on my domain it's in this Advanced DNS settings here so I'm going to create some DNS records that use GitHub Pages IPS now I looked this up beforehand uh but these records are in their documentation and I'll be sure to link the documentation in the description section below as well but we want to create uh four different a records and use their IP addresses so the way I'm going to do this here is I'm just going to add a new record this is going to be an a record and for the host I'm just going to put an at symbol there this is a shorthand that represents the Apex root domain and then for the IP address here uh I'm going to do 1851 99181 153 now like I said all of this is in the documentation that I'll link below I didn't know any of this stuff off the top of my head um I had to look it all up using their docs okay so now there are three more IPS that I need to go ahead and add in here um just so you don't have to see me type all these in I'm going to skip forward a bit until I have added all these in okay so I've added in these additional three records here they're all pretty similar just incremented uh by one here with these IPS now if we want the www version to work with our doain as well then we'll add a cname record uh for that and set the value to our GitHub URL and GitHub will handle that redirect for us so to do that I can add a record here okay so I wanted a oh I was overlooking it it's a cname record here for the host this is going to be www and then we are just going to let uh GitHub handle this redirect so we are just going to um uh type in that GitHub Pages URL there um again this is all stuff that I found from the documentation now I know that some of this is a bit esoteric and I'm not explaining a lot of that with these records but I'm mainly going through the records that the documentation specifies to get up and running here now if we were to dive deeper into exactly what these records are and how they work then I'd probably need to do a completely separate video on that topic alone but for this video I mainly just wanted to show uh the overview to get you all up and running here um okay so now that we have those set on the service where we bought our domain let's go back to our GitHub settings now so I have all of these saved here in my DNS settings and if this hasn't checked the DNS again already then we can recheck to make sure that things look good so I'm going to click on check again here and hopefully this all looks good okay so we can see that the DNS check was successful and this will also set you up with a TLS certificate which is what allows us to use the https instead of just HTTP which we'll definitely want um so we enforce https there as well okay so I think everything looks good so far um now this can take up to 15 to 30 minutes but for my experience it's usually faster than that um and it won't allow us to actually check this enforce https button until that's complete it looks like mine is already complete so like I said it says 15 to 30 minutes but sometimes it's automatic so if it's not allowing you to check this then just give it some time and if the DNS check looks good um then it'll assign that certificate for you and allow you to enforce um the https so all of this is looking good so far um so first before we check out our live

site um let me go back to our repository here and show you something really quick so I'm going to go to our repository here and we can see that everything else was updated 21 minutes ago uh but this C name here was updated 11 minutes ago so it added this C name to our repo and if I open this then the contents of this is just the uh on line and it's the domain name that we set up so we need to leave this cname file in your repository and not change it uh some people might not understand where that came from or what it's doing and they might remove it uh but that would mess with the redirecting to our URL so be sure that that's there and do not delete it or overwrite it okay so now if I go uh back to our site if I run this uh I just reloaded the page there and we can see that it redirects us to my awesome app. com so now we have our portfolio live and using our custom domain so now at this point I have a portfolio site that's connected to a project on my local machine and all I need to do in order to update this website is to push and pull changes from this remote repository so it's super useful if you're someone who has always wanted a website of your own but you don't want to have to deal with using a hosting service and a plan and dealing with your own uh virtual private server all that might be Overkill if all you want is a static site uh for reasons like this and um you can do all of that free right here on GitHub now like I mentioned earlier the portfolio that I'm using here is one that I created uh using a custom template um so I have all of my resume and portfolio data in a Json file and to update this all I would need to do is update my Json file with new information and regenerate the static HTML uh using python um so there's no need to go in and change to HTML or css manually each time I update my information and that also makes it really easy to create a lot of different versions of a portfolio or resume for different reasons so you could have it generate several versions using that same data so maybe one would be more appropriate for a website portfol folio um but then you could also have it generate a more traditional resume um that you could send to a potential employer uh where you would remove your picture and social media links and things like that so I'll be showing how I created this portfolio in the next tutorial it uses Python and Ginger 2 for templating we'll take a look at the code learn how it works and see exactly how you could build something like this yourself if you're interested uh so be sure to subscribe so that you don't miss that video if that's something that you're interested in but with that said I think that's going to do it for this video hopefully now you have a pretty good idea for how you can upload your own static site to GitHub Pages for free and easily manage this yourself but if anyone does have any questions about what be covered in this video then feel free to ask in the comment section below and I'll do my best to answer those and if you enjoy these tutorials and would like to support them then there are several ways you can do that the easiest way is to Simply like the video and give it a thumbs up also it's a huge help to share these videos with anyone who you think would find them useful and if you have the means you can contribute through patreon or YouTube and there are links to those pages in the description section below be sure to subscribe for future videos and thank you all for watching