In this article, I will quickly introduce you to GitHub Pages, using which you can freely host your websites, straight from your repositories on GitHub. Isn't this fantastic? This article is a brief introduction to setting up your website using GitHub Pages, but it does not cover each and every detail about GitHub Pages.
Note
This article assumes you already know what GitHub is, you know how to work with GitHub, and you have a repository in GitHub having some web front-end. If not, please go to GitHub and get your hands dirty!
Ever wondered if it was possible to quickly setup a website and host it for free somewhere? Ever wondered if there was a way to just upload your code on a repository and directly show demos to your clients over the internet?
Think no more! With GitHub Pages (GH-Pages in short!), you can now host your website directly from your GitHub repository and that too for free!
Any of your repositories on GitHub which has a web front-end can be quickly converted to a running website in a matter of minutes using the feature called GitHub Pages brought to you by GitHub.
It has some following limitations too, but I don't think it will stop you from using GitHub Pages for your next client demo.
- Limit of 1 GB for source code repositories.
- 100 GB per month bandwidth limit
- 10 builds per hour
You can browse your website on GitHub Pages using the following URL.
http://username.github.io/repository
You need to replace your username and repository name before you fire a request in your browser. So, let's now quickly see how you can set up a GH-Pages website from your repository.
First of all, you should have an index.html file in your repository. If not, then quickly create a new index.html file and commit it.
Second, you need to do settings in your repository that from which branch your website should be rendered. For doing that, select your repository in GitHub. On the top right, you will see a "settings" link (just below the repository name).
Once the settings page is loaded, scroll down to the "GitHub Pages" section under the "Source" label, select the branch of your repository from which you want the website to be rendered. The default selection will be "none" - meaning your repository is not currently enabled for GitHub Pages.
![]()
Let's say you have selected "master" branch. After branch selection, a "Save" button will appear besides branch selection lookup. Click on "Save" to save your changes.
![]()
Once you click on "Save", immidiately GitHub creates a website of your repository from selected branch and it is readily available. Note down the url given by GitHub - you will use it to visit your website.
![]()
Simple, isn't it!
Now, go and browse your website at the URL given by GitHub!
Enjoy! Keep Learning!!!