DEV Community

Cover image for How To Host Your Website For Free on Github Pages
Tia Eastwood
Tia Eastwood

Posted on

How To Host Your Website For Free on Github Pages

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.


Github Logo

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:

  1. Log in to Github and create a new repository. This is where you will upload your project to.
    create new repository

  2. 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:

  1. Make sure you are in your website folder in the terminal. Type the following command:
git init 
Enter fullscreen mode Exit fullscreen mode

This will initialise your project ready for the next step.

  1. 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
Enter fullscreen mode Exit fullscreen mode
  1. 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
Enter fullscreen mode Exit fullscreen mode
  1. 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"
Enter fullscreen mode Exit fullscreen mode
  1. Finally push your project to your master branch:
git push -u origin master
Enter fullscreen mode Exit fullscreen mode
  1. Now refresh your Github and you will see all the files in your repository! Yay!

  2. 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.

add a README

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

repository settings screenshot

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: secure padlock screenshot

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.


I hope this article has helped you to get started using Github Pages! For help with related topics, there are lots of in-depth guides in Github's help section too 👍

Top comments (14)

Collapse
 
mrrcollins profile image
Ryan Collins

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.

Collapse
 
sharadcodes profile image
Sharad Raj (He/Him)

You can keep it private too

Collapse
 
mrrcollins profile image
Ryan Collins

Good to know!

I've always kept it public in case someone wants to contribute... No one ever has, lol!

Collapse
 
sl4rtyb4rtf4st profile image
Andrew Millar • Edited


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 stash or git commit --amend😯. And the terminal is just faster.

Collapse
 
tiaeastwood profile image
Tia Eastwood

Interesting! I've never tried GitHub desktop since I was trained to do it all on the terminal

Collapse
 
daveparr profile image
Dave Parr

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 :)

Collapse
 
robertsam2000 profile image
ROBERTSAM2000

Pretty sure files can also be uploaded from your PC while on github too

Collapse
 
tiaeastwood profile image
Tia Eastwood

I think so yes, there are definitely multiple ways of doing it!

Collapse
 
dianaramirez16 profile image
Diana Ramirez

this was such a great article thanks!

Collapse
 
mozayntwali profile image
Ntwari Moise

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.

Collapse
 
redcaptom profile image
Red Cap Tom

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! :)

Collapse
 
ben profile image
Ben Halpern

Great post

Collapse
 
thefluxapex profile image
Ian Pride

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.

Collapse
 
noveen112 profile image
eatyourvegetablesHYI

This is really helpful thanks!