Host website on Github pages

Today I will be going through how you can host your website on github pages for free. For that you should have a website written in HTML, CSS and JavaScript. Now this would require prior knowledge of some git code, github repository and HTML5 stack (HTML, CSS and Javascript). If you would like to have a look at a basic tutorial of git and github. Click here. I assume that you have knowledge of those and you have a front-end project ready to push. However I will try to explain them here in this post, so that you can have something to show for at the end of this post. Please follow along. And do comment if you do not understand anything here.

Okay first thing’s first, what is Github Pages, Github Pages is a static site hosting service. What that means is it will allow front end markup language and scripting but will not allow back-end scripting of any sort. So web projects based on PHP will not show up on your github pages.
You may ask: “Why would I want to host your web project on Github pages?” , because it’s free(I love free stuffs) and because you will have a website to show for in your resume or your profile, bio or anything like that.

So how do you setup github pages?

1. Create a Github account.
2. Develop a web project in your computer. (Something simple would be a nice idea to begin)
3. Push you codes to a github repository on your account.
4. Enable github pages on your repository’s Settings option.

Now let me walk you through each process mentioned above.

Create a Githbub account, here. If you code, even just a little, you would want to have a Github account. It is used for working on group projects, version control and code storage among many other things.
Next create a repository in your github by clicking the plus sign and then New Repository:

 Github New Repo

Name your Repository and click Create Repository. And your repository is now created, where you can push codes from your local machine. You will see something like this:

 Github Remote Repository

Now that your repository is all set up, you can push your local website to the repository itself. Now Github requires your computer to have Git installed on your machine. What? Git? Github?

Well, Git is the distributed version control system while Github is a service that provides git repository hosting. There are other popular services too, like Gitlab and Bitbucket.

So setup Git on your machine by going to their page.

After Git is setup on your machine, navigate to the folder where you have your website’s code and right click there holding the shift key. Click Open Command Window Here or open Terminal if you are on Linux.

This will open the command prompt on that folder then type in the following commands:

`git init`

`git commit -m “first commit”`

`git remote add origin https://github.com/(your_github_username)/(repository_name).git`

`git push origin master`

and that will push all your website’s code into the github repository. If you want to know more on what these commands mean, read our article here. The only thing left now is to enable “github pages” on your repository’s settings.

Github Repository Settings

Scroll down on the settings page to find Github pages option. I believe it’s second last on the list, just above “Danger Zone”.

On the “Source” select master branch option. You will then see a message confirming that your site is published at

https://(your_github_profile_name).github.io/(your_repository_name)/

To show you that it works just fine, here is what I did with it. Haha, I am not a good web developer as of now. But I have seen people do some really cool stuff with it.

I hope that this post helped you land your website on the web. In addition to the advantages I mentioned earlier, you can now update your code from within the github itself or update the code locally and commit and push them and your site is updated.

If there is anything that I can help you with, do comment.