How to host a Website with Github Pages
26 February, 2016


Do you want to host your static website for free. You can do that with the help of Github Pages. Though we have restriction to host only HTML, CSS and JavaScript codes for your website, but it is quite useful when you want your static content to be hosted like your portfolio website, or your own blog etc. without paying a dime. Github Pages is an easier solution rather than going for dull process of setting up a hosting package if your content is static. For using Github Pages you need to have an account in Github[Its free]. If you do not have one, Sign up for an account in Github before following the steps to host your website. Also you need the github client in your PC.(We'll use terminal or git bash for our process).

Steps: (Windows)

  • Login to your Github account and Create a new repository named username.github.io where username is your github username.
  • Go to the folder in your PC from where you want to manage your site and open git bash there(Right Click). Now type
    git clone https://github.com/username/username.github.io and press Enter.
  • Wait for some time to have your repository cloned locally. After completion you will see a folder named username.github.io where you opened your git bash.
  • Go inside the folder and create a file named index.html. It is important that the file name should be index.html which would serve as your home page.
  • Open the index.html page and write your content. lets say you write Hello World! inside h2 tags for test purpose. Save the file.
  • Open git bash inside this folder(inside username.github.io) and and run the following commands in following order.
    1. git add *
    2. git commit -m "Initial commit"
    3. git push -u origin master
  • You will be prompted to enter username and password for your github account. Enter them and you are done.
  • Open up your browser and type username.github.io and Press Enter and voila you see your site live.
  • Now to complete your website go inside your username.github.io folder in your PC work on your HTML,CSS and Javascript codes and when you are satisfied or want to see some of the changes live all you have to do is repeat add,commit and push steps in order and see the changes live. The message in commit step(above we have "Initial commit") can be any message of your choice like "Added blog page to the website".
Here is the official documentation with Pictures
If you want to learn about Git and Github, check out here