Hosting your website using Github Pages

4 min readDec 4, 2017

Quick and simple static site hosting on Github Pages

Hi guys! In this tutorial, I’m going to give a quick overview of how to use Github Pages as free host for a static website.
Github Pages is a great and reliable service to help anyone with a Github account to have a presence on the web. It’s an easy way to get a personal website or portfolio up for others to see.
By the end of the tutorial, we will have a website running at https://{Your-Github-Username}.github.io/
For example, my personal website can be found at https://faizanv.github.io/

Prerequisites

To complete this tutorial, you first need some familiarity with

HTML/CSS
Using Git and Github

For this tutorial, I will be using a Unix command line and the Git CLI for interfacing with Git and Github. This can also be done using the Github Desktop Client.

Getting Started

Create A Github Repository

To get started, we need to go to Github and create a new repository for our website.The repository will be named with the format {Your-Github-Username}.github.io
So for example, my username is faizanv so my repository would be titled faizanv.github.io

Screenshot of the Github create repository page

Once the repository is created, we will go ahead and clone the repository to our computer. For this tutorial, I will be doing so using the Git CLI.

To clone the repository, I copy the repository URL from new repository page on Github and then I run the following

git clone https://github.com/faizanv/faizanv.github.io.git
Once the repository is cloned, I change my current directory to the repository directory

cd faizanv.github.io

The Content

Before we can host a website on Github Pages, we need to create one! We can start with this simple website that displays a “Hello World” header.
Our project will have the following directory structure.

index.html
stylesheets/
   style.css

To create these files you can use any sort of text editors such as Vim, Atom, or Visual Studio Code.
Our HTML will look something like this

index.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <link rel="stylesheet" href="stylesheets/style.css" />
</head>
<body>
  <h1>Hello World</h1>
</body>

And we can create a stylesheet to add a little color like this

body {
  text-align: center;
  background-color: black;
  color: white;
}

To see if everything was created correctly, you can open index.html in a web browser by pasting the path to the file in the address bar. For example, I the path to my website is at /Users/faizanv/dev/faizanv.github.io/index.html

Deployment

Now for the magic sauce, we can deploy our newly created website to Github Pages for the world to see!. To do this, all we have to do is deploy the code we wrote so far to the Github repository we created earlier.
To do this using the Git CLI we use these simple steps:

git add .
git commit -m "Initial Commit"
git push origin master

Once you’ve pushed your code to your Github repository, you should be able to view your newly hosted website at http://{Your-Github-Username}.github.io/

It sometimes takes a minute or so for the results to appear so keep refreshing!

Voilà! Now you have a website hosted online for the world to see!

Moving Forward

Now a Hello World website is cool and all, but you are probably going to want to customize your website more to your liking. Maybe you want to display your projects or have a way for people to see your resume; you can do that! You add images, some cool links, and maybe even some Javascript to make the page more interactive!

To make updates to your website, make the necessary changes to your code locally like we did earlier and then follow the same steps to deploy a new commit to your Github repository. Every time you push, the changes should be updated on your website automatically.

And that’s all there is to it! Leave a comment below if you have any questions!