So you've created your cool new website in your code editor, yay! Perhaps it's your portfolio website that you want potential employers to see...perhaps it's a fun web app...or perhaps it's a website about your cat 😺. Either way, you are ready to share it with the world, but how are you gonna do that❓
There are many different websites online that will host your website for a reasonable fee, but did you know that you can actually host your site on Github Pages for free?
Before I begin there are multiple ways of carrying out what I am about tell you, so these are not definitive instructions. But from one newbie to another, I'm going to share what I've learned from my own experience, in the most straightforward way I can. However, I am assuming that you have a tiny bit of knowledge about using a terminal and code editor already.
If you haven't heard of Github before, it is a web-based platform used for version control. If you are new to Github, The Coding Train has a really great series of videos on Youtube explaining what Github is and how it works.
Cool, so what is Github pages?
Github Pages allows you to host your project (aka your website) directly from your Github respository. It means you can make your website live for the world to see!
What you will need next:
- Your computer's terminal or a code editor with a terminal (my preferred code editor is VS Code so this is what I will be referring to in this tutorial)
- A Github account
- A custom domain (optional)
Create your repository:
Log in to Github and create a new repository. This is where you will upload your project to.
Add a name and description. Your repository name needs to be: username.github.io, where username is whatever your username is on Github.
You don't need to initialise a README right now. To keep things simple, we can add that later.
Once you've pressed the green 'create repository' button, you'll notice you are given a screen with some instructions which will make sense in the next section...
Pushing your project to your Git repository:
The following will all be done in the terminal. I tend to use the terminal in VS Code as I will have created my project there:
- Make sure you are in your website folder in the terminal. Type the following command:
git init
This will initialise your project ready for the next step.
- Then you need to add the origin (the repository address where you are uploading your website to). You will need to use the link given to you after you submitted your repository, but it looks like this:
git remote add origin https://github.com/your-username/my-cool-website.git
- Make sure you add all the files that you want to upload. You can add them individually, but to make sure I've not missed anything, I tend to just do:
git add --all
- Include a commit message. Type whatever you want in the speech marks, but as it's my first commit, I will do something like:
git commit -m "initial commit"
- Finally push your project to your master branch:
git push -u origin master
Now refresh your Github and you will see all the files in your repository! Yay!
Adding a README (optional) - A README enables other people (or you!) to understand what your respository is all about. You don't have to add one, but if you intend to show your repository to other people, then I would advise you to add one. You can either add your README on Github by clicking that green add a README button, or you could add one in your code editor later and push the changes to your master branch again.
IMPORTANT - If you make any changes on Github directly, your local machine won't recognise this. One way to rectify this is to pull your respository to your local machine to sync it back up. For this reason, I personally prefer to make all changes in my code editor and then just push the changes to Github.
Publishing on Github Pages
Now because you named your repository username.github.io, it should automatically be published as your main Github pages site. Put https://username.github.io in your browser to check that you can see it!
If for some reason this doesn't work, click on your respository and then click on settings in the top right corner. If you scroll down, you will see a section for Github pages. Select master branch as the source and you should then see a message:
Your site is published at https://username.github.io
Custom Domains - You will also see a box here for custom domain. If you have already purchased a custom domain, then this is where to put it! There is some help here on Github pages if you are not sure how to configure it. You make also need to check with your domain provider if you are not sure how to set up the correct DNS records.
Enforce HTTPS - I would recommend ticking that box that says Enforce HTTPS as it adds a layer of security and makes your site look more trustworthy, as you get that little padlock in the browser. Without this, people might be wary about visiting your site. Here is an example from my blog: 
You can learn more about HTTPS here.
What if I want to publish more than one Github pages site?
Github pages allows you to host one site per GitHub account and organization,
but unlimited project sites.This means that if you want to host another site or webpage with Gihub Pages, it will be classed as a project. When naming respositories for further projects, you can call them whatever you want, like "blog", "my-cool-app", "website-for-my-cat" etc.
For example, if my website that I've already hosted on Github pages is https://username.github.io, then if I upload a blog that I've made and publish that to Github pages, the address for it would be https://username.github.io/blog.
Similarly, if I used a custom url which made my Github Pages site https://joebloggs.com, then the address for my blog hosted on Github Pages would be https://joebloggs.com/blog.
If you need to host a second site on GitHub Pages with it's own unique url, you would need to use another Github Account.
Top comments (14)
This is an awesome feature, I'm surprised more don't take advantage of it. I run a little geek/retro site on it with a static website generator (Pelican). You have to be willing to keep the repo public, but that's usually not a big deal.
You can keep it private too
Good to know!
I've always kept it public in case someone wants to contribute... No one ever has, lol!
❤
If you are slightly lazy (like me) you can use github desktop. I init the repo using the terminal then use desktop to publish the repo to github and do the committing/pulling through the terminal. That way you don't have to set up the remote or log into github though the terminal. Because github desktop doesn't have
git stashorgit commit --amend😯. And the terminal is just faster.Interesting! I've never tried GitHub desktop since I was trained to do it all on the terminal
I think this is such a little known feature, but so useful. I used this to host a personal bio/cv/portfolio website for years. It allows you to use many different static site generators as well. I think from memory I used hugo and jekyll at different points.
Well done for bringing this to more peoples attention :)
Pretty sure files can also be uploaded from your PC while on github too
I think so yes, there are definitely multiple ways of doing it!
this was such a great article thanks!
Thank you for the such a great article, I've had a hard time learning how to use github pages but your insights were really helpful.
Yes! This!
This should somehow be much more obvious on GitHub's UI. It's such a great, simple feature that everyone I've ever talked to absolutely loves. My own site is also GitHub pages! :)
Great post
I use and appreciate GITHUB IO (I have lots of IO sites, but only one public), but I'm one of those wierdos that actually likes PHP and you can't use PHP there. 😢 No other real complaints though.
This is really helpful thanks!