Host your website for free on GitHub Pages

Key Takeaways

Hey folks. In this video, I'm going to show you how you can host your website for free on GitHub pages. Now, this video is geared toward beginners, so even if you haven't used GitHub before, I'll show you step-by-step how you can get your site up and running. And toward the end, I'll show you how you can update your site once it's already been published, as well as how to fix some common issues that you're more than likely going to run into. Now, one quick disclaimer. GitHub pages is only for hosting static websites. This means websites built with just HTML, CSS, and JavaScript. So, if your website is built with a server-side language like Python, Ruby, or PHP, then you will not be able to host on GitHub pages. Now, to start, you are going to need a GitHub account. If you don't have one yet, you can go to github.com and then click on the sign up button to set up a free account. Now, once you're all set up and logged in, when you go to github.com, you're now going to see your user dashboard. Every user account gets one free user site on GitHub pages at the domain username.github.io. Now, to create this user site, we first need to create a new repository, or repo for short, and we can do that by going up to the plus sign up here and clicking create new repository. You can think of repositories on GitHub as basically projects. Now, for context, GitHub the website is built around Git, an open-source software that you can use to track your code changes. So, GitHub and Git are two separate things. GitHub is a place where you can host your Git repositories on the internet along with some added features like GitHub pages. So, in our new repository settings, we just want to first make sure that we are the owner, which is a default. And then we want to give our repository a name. And this needs to be done correctly. So, for GitHub Pages, we need to name the repository your username.github.io. So, in my case, my username is the coder coder and then .github.io. It has to match your username exactly and everything has to be lowercase, otherwise this will not work correctly. And then below that you can add an optional description. I'm going to write this is my super cool GitHub Pages site. Exclamation point. Then if we go down to configuration, you can make the repo public or private. I'm just going to make this public cuz I'm not putting any sensitive data in here. And then below that we can add a readme file. Um this is something that GitHub Pages is going to look at along with looking for an index.html file in order to load your website. So, we're going to keep this as just a default. And then I don't need to get ignore file unless you explicitly have some files that you want to ignore, you can just leave this as no and you can always add it later. Then for the license, I'm going to select MIT license for open source. So, once we have all this set, we can click create repository and we will create our repository. And this might take a few seconds, but when the repository is created, it's going to load on the page and we can see it here with the name the coder coder.github.io. And then below is the readme file that we created and it's showing the content of that readme file. So, we have our repository created for our GitHub Pages. Now, we need to get this repository to actually load as a website in GitHub Pages, and to do that in our repository, we want to click on the settings button up here. And then in the left sidebar, you want to go down to pages. All right, so now we have our GitHub Pages settings page displayed here, and it's saying that my site is live already at the coder-coder.github.io. And if we go down to build and deployment, these are some settings we can configure. So, by default, it's going to deploy from a branch. Now, branches in Git are different versions of your code, and by default, you just have one main version or branch. You can see that it is loading already from our main branch. And this is the default behavior that you want. And also by default, you want to load from the root folder of your repository. And then if we go down a little bit more, you have the option of loading a custom domain um for your site, which you do need to purchase separately. We're just going to use the default, you know, github.io domain. Now, in case your site is not loading correctly, you can basically turn it off and on again, and you can do that by going to the branch here, and from main, you can select none, and then hit save. And then you can see that now it's not deploying, so we can turn it back on to main, and then save again. And then a lot of times, if your GitHub page is not loading for whatever reason, this will sort of fix it and make it load. So, once you save your settings, it's going to start building our site, which you can see it's saying this here. It's currently being built from the main branch, and you can check on the progress of your build and deployment by going to the actions tab, which is up here. So, if we go here, we have the list of different workflows, and this is the most recent one up at the top, and it does look like it's done. So, we click into that, we can see some details, and then it does give us the actual link of our GitHub Pages site here. So, let's go to the coder coder.github.io. And you can see that it is indeed loading. And it's just loading the readme markdown file that we kind of had it automatically generate. So, this is the text from that. So, it's loading. So, now we know that our website does actually work. All right. So, our GitHub Pages site is working, but you know, I do want to make this load a real website. So, on my computer, I actually have some website files that I pre-made. We have an index.html file, and then a style.css file. But, we need to get these files that are currently just on my local computer up to GitHub, which is hosting our GitHub Pages site. And how do we do that? Well, I'm going to show you two ways that you can do this. The first way is kind of an easier, quick and dirty approach, where if you haven't set up GitHub on your local computer yet, this is kind of the fastest way to get your website up and running. But, then I will show you the second, sort of more best practice approach, and that does involve setting up your repository locally on your computer, and then just connecting it to your GitHub account. So, first for the easy way, what we're going to do is go back to our repository page, and you can do this by clicking on the code tab. And then again, just making sure you're in the correct repository up here, the .github.io. And we can, next to the green code button, click this plus button, and then select upload files. So, now we can drag files here to add them to your repository. So, let's do that. So, here's my file explorer on my computer. I'm going to select both the HTML and CSS files, and I will drag them up here. So, you can see that we have the files added here. However, we're not done yet. We need to make a commit. This is a record of code changes in a Git repository, which is why any change you make in your code, you have to make a commit to kind of make it more permanent. So, in our commit, which it kind of has automatically started creating for you, it pre-filled the commit message. This is the description of what these changes that you made. And I'm just going to keep this default uh commit message. We have an optional description. I'm just going to leave it blank. And then, you just want to make sure that you are committing on the right branch, and we are. We're committing to the main branch. And everything looks good. So, we're going to click the commit changes button. So, now it's processing, and we can check out the deployment by going again up to the actions tab. And we can see that our deployment is currently in progress. So, click on that. And it might just take a few seconds to finish our build and deployment. Okay, so when everything is done, all of these will turn into green check mark circles, and we can go back to our GitHub pages site, and reload. And now we have our website. All right, so this was the first way of getting your files up onto GitHub. And again, using this sort of first drag and drop way, if you want to make changes in the future to your site once it's been published, what you can do is go back to your code, and you can again follow the same steps of clicking the plus icon, uploading files, and you can upload, let's say, we made a new version of our index.html file, we could just drag and drop that file to here and it will redeploy everything and then update your site. Now, let me show you the second way of updating your GitHub Pages site using the more best practice method. So, what we're going to do is we want to install software called GitHub Desktop onto our computer. And to get it, the easiest way is to open a new search. I'm using DuckDuckGo, search for GitHub Desktop. And we probably want the first result, which should say download GitHub Desktop on the github.com domain. And then just download for whatever your operating system is. I have Windows, but they also have a Mac version. So, once the installer is downloaded, click and run to install it. And then once the installation is complete, GitHub Desktop should automatically open and you should see a screen kind of like this. So, the first thing we want to do in GitHub Desktop is to connect it to our github.com account. So, to do that, we want to go up to file, options, and then in the accounts tab, we want to click the sign in to github.com button. And then click continue with browser. Now, since we're already signed in to github.com, it is going to ask us to authorize GitHub Desktop. And we want to use this current account, so I'll click continue. And then we are going to authorize it by clicking that authorize desktop button. All right, so once you're authorized, you should be automatically back into GitHub Desktop and now we can see all the repositories that I have under my username cuz I do have a lot. And we want to find that new repository that we just created. So, you can search for it in here. Or if you don't see the screen, you can just go up to file and then clone repository. So, cloning means creating a copy of the remote repository that we already have on GitHub and then cloning or copying it down to your local computer. So, we'll click clone repository and then we want to type in the name of the repository. I'll just start typing github.io and here it is here. If you don't see it for whatever reason, maybe because you just created the repository, you can click this reload button and it'll kind of refresh everything you have on GitHub. So, again, once you have this, just select it and then we want to um clone the repository and they have a local path. So, this is where on your computer files the repository is going to be created. And I'm just going to go with this default location. So, we'll click clone and it might take a few seconds. And now we are in our the coder coder.github.io repository. Now, if you've never used GitHub Desktop before, everything that you see here might be a little bit overwhelming. So, let me just show you what the different parts are. Now, in a nutshell, GitHub Desktop and github.com, the website they're all using that open source software Git to track changes in our code. And usually Git is run on the command line, meaning you type in text commands on a terminal or command line program on your computer to do things in Git. Now, GitHub Desktop is the program that runs all those Git commands, but instead of on the command line and typing stuff in, you have a graphical user interface or GUI and you can just, you know, click on things and it's a little bit easier for beginners, a little less intimidating in my opinion, which is why I'm using it here in this video. So, I am going to show you the exact steps that you can follow to make changes on your site using GitHub Desktop. But, if you think you might be doing this more often, I do recommend learning the basics of what Git and GitHub are. I do have a video on my channel about that and I have that linked below, so you can watch that after you finish watching this one. Now, in GitHub Desktop, it tells you that you are currently in the the coder coder.github.io repository or whatever yours is named. And then, next is a button telling you that you're on the main branch, which is what we want. And then, the last button thing, I guess you could say, is it says fetch origin. The origin is the remote repository on GitHub. So, if you click this, you can push changes that you've made locally up to GitHub on the internet, or you can also pull changes from GitHub down to your local computer. So, we will be using that later. Now, below that top row of buttons, we have this area here on the left, and we are currently in the changes tab. And it tells us that we haven't made any changes to the code files at the moment. It says zero changed files, and this makes sense cuz, you know, we just cloned the repository. Next to that, we have a history tab, and this tells us our commit history, meaning the changes that we've made so far. You can see here that we have the commits that we've made so far, with the newest one at the top and the oldest ones at the bottom. So, the initial commit was the one that was automatically generated by GitHub when we created this repository, and in here, we have two files that were added, the license file and the readme file, which again were generated by GitHub. Then, if we go to the most recent commit on the top, this is the add files via upload, which we used to update our site by dragging and dropping those files. And this is where we added the index.html file and the style.css file. You can tell they've been added because they have this green plus sign at the end of them. And then, we can see the actual lines of code that were added here. And there's also a different sort of icon when you modify an existing file. It's going to have this orange or yellow square with a dot inside to indicate that the file has been modified. So, we'll see a little bit of that later on. Now, let's say we want to make some changes to our website. We are going to need a code editor for that. And my editor of choice is VS Code. If you don't have it installed, you can again go to your browser, search for VS Code download, and then download it for your operating system. And I will be showing you all the steps that we're going to be following in VS Code, but if you've never used it before, I do recommend checking out my other video that I have, VS Code for beginners, on my channel before, you know, going through these steps if you feel like you're getting really lost. Okay, once you have VS Code installed, you want to run it and it's going to open. And we want to open that folder um containing the repository files that we cloned. So, we can do this by going to file, open folder, and we want to go to the where the repository files are. So, for me it's documents, GitHub, and then here's the folder, the coder-coder.github.io, and then with that folder selected, you can click select folder. Now, if you are opening this for the first time, you might see a pop-up saying, "Do you trust the authors or files?" And just click that trust button. Um yes, I trust the authors. And you might see a pop-up here saying, "Git not found. Install it or configure it using the Git path setting." This just means that we haven't installed the open source Git command line interface on our computer. So, installing GitHub Desktop doesn't install the original Git software, but since we're using GitHub Desktop, we don't need to install Git itself. So, you can just click out of this pop-up, and you can install Git later on if you want to use the command line tool. So, in VS Code, when you open a folder, you can see in the left sidebar here all the files in our folder. So, if I double-click the index.html file, it's going to open in our editor panel on the right. And if we scroll down, we can see the content of the website. So, I'm just going to make a text change here. So, under the H1 tag, I'm going to make a paragraph. And then in here, I'm going to type "Welcome to my website." And then save. So, we have made a change to our file, we've saved it. And now I want to, you know, push this change up to GitHub. So, what we can do now is go back to GitHub Desktop. All right. So, now back in GitHub Desktop, we can see in the changes tab it says one changed file, the index.html file. And on the right, we can see that line of code that we added. Now, usually down here, this should have your profile picture from GitHub, and it's not loading. And that might be because we have to go back to file, options, and then accounts. We are signed in. Um let's click save, and then there we go. So, now we have the profile picture, which means that, you know, your GitHub account has sort of fully been connected and it is working. So, now we can create our commit to push this code change up to GitHub. So, I'm just going to leave the default update index.html commit message, and I'm going to click this button at the bottom, commit one file to main. And then now, the button here on the right says push origin, and it's there's a little label here saying one and then an arrow going up, meaning you have one change to push up to GitHub, which is the origin. So, if we click that, now you can see everything got pushed up. So, let's go back to our repository and check out in the actions tab. We can see our build and deployment is indeed running. So, again, this might take a few seconds. All righty, so now everything has been updated. So, let's go back to our GitHub pages site and I'm going to reload the page. And now we have our paragraph text that we added. All right, so that's how you can set up and update the user level GitHub pages site at your username.github.io. However, GitHub also allows you to load any repository and publish it on your GitHub pages site. For example, I have this other repository called Bento Dogs and I want to publish this on GitHub pages also. Now, any other repo that you publish as a GitHub pages site is going to get published at your username.github.io/the repository name. So, in this case, it's going to be published at So, let's publish this on GitHub pages and see how it looks. So, again, I'm going to go to settings. Then we'll scroll down and go to pages. And then in our deployment, we want to again deploy from a branch and select main and then hit the save button. And now we can check out the progress of our build and deployment on actions. And we can see it is in current progress. So, we'll just kind of leave this open while it deploys. All right, so everything is done. So, now let's click on this link to load our website. So, this website is loading at the coder-coder.github.io/bentodogs. Now, this is actually not what this website is supposed to look like. And you can compare this with I have the site also running locally, and this is what the finished site is supposed to look like. And one weird thing that you might have noticed is that the background looks a lot similar to the background that I have on my main GitHub Pages site. So, you know, what is going on here? So, if we go back to the Bento Dogs page, I'm going to right-click and select inspect. This lets you look at the website code and kind of see what is happening. And I do have to reload the page to load some errors that are indeed happening. So, if I scoot this up, we can kind of take a look here. So, we have some errors here, and the errors are loading dog web P file, as well as cat and bird. So, these three images are not loading. We also don't have a favicon image, and that was just something that I deliberately didn't include. So, we can just kind of ignore that, but the dog, cat, and bird images, which we have on the local site, for some reason are not loading. So, you know, what's going on here? Now, if we look more closely at the URL for these images, it looks like the site is trying to load the images from the coder-coder.github.io/image /dog. And you might notice that there is no Bento Dogs in these image paths, even though we do have Bento Dogs in our page URL. So, this is kind of a big clue as to why it's not loading. So, you know, why has the Bento Dogs path been removed from the code in the website? So, to make it easier, let's go to VS Code, and I have the Bento Dogs repository open on my computer. and in the index.html file, we can kind of check out and see what's going on in our image paths. So, you can see that the images are loading from a path of forward slash and then image because we have the images in this image folder here, as you can see. And then it's loading the file name. So, when you start a path with a forward slash, what that's going to do on the website is it's going to go down to your root domain. So, in a regular site where, you know, all these files are in the root, like our local site, it's not going to be a problem. And that's why, you know, the site is loading correctly on our local site. And it's not on our GitHub Pages site because it doesn't have that bento-dogs path name. And, you know, we could fix this by adding bento-dogs, but that would make it not work locally because, you know, we don't have this folder in existence in our local files. So, what we want to do is we want to load all these image files from the current directory. So, we can do this by And we also need to do this for the style.css file because that's why it has that purple background cuz it's loading the CSS file from the github.io repository. So, we can either remove that forward slash entirely, so it'll load from the current directory. You can also explicitly denote current directory level by doing a dot slash in your file path. Like that. So, this way works for both local and on GitHub Pages. Okay, so we have our changes made in our local files. Let's just double-check the local site. I'm going to reload it to make sure nothing breaks. That all looks pretty good. So now we can go to GitHub Desktop and push those changes we just made up to GitHub. So in GitHub Desktop, I do have the Bento Dogs repository open. And in the changes tab, we have our changes that we made in index.html. You can see we've removed the old line and replaced it with the new line of code for all of our paths. So that looks good to me. So let's write a description. I'm going to say update file paths. And then click commit to main and push to origin. All right. So back in the Bento Dogs repository, we go to the actions tab. We have a build that just finished deploying. So let's check out our GitHub pages again. And now it is loading correctly, has the correct background color, and all the image files are loading. All right. So, you know, if you're ever creating a repository-level GitHub page, just keep in mind that file path issue and make sure you're using the correct path in your files. Now, one other caveat when you're using GitHub Pages is that it's really only intended for personal sites. So you can't use it for commercial business purposes, you know, having any payment transactions or sensitive information like logins and passwords. Um you're also limited to 1 GB of storage as well as 100 GB of bandwidth per month. And if you don't follow any of these limits, you might get an email warning from GitHub or you might just get your site shut down. So just make sure that you follow the rules here. And if you want to learn more about getting GitHub, I do have another video on my channel, so you can check it out here.