Quick Guide to Walk Through Using Github Pages

If you are learning to code, or are already into it, and want your project to be hosted easily and for free then the answer is Github Pages. It helps you not only in hosting HTML, CSS and JavaScript files but yeah helps in learning the important and tricky tool GIT. In this article I will be helping you with how to publish your project from a local repository to Github Pages.

First of all we need to understand the following two types of Github Pages:

  • User Pages
  • Project Pages

User Pages

User pages come in handy if you want to host your personal website or the index of any project. You may note that there is only one userpage per account. The URL for userpage is http://title.github.io/

Project Pages

Project pages are used when you want to host a project, of which you have many. We can have multiple project pages per Github account. The URL for project pages are http://title.github.io/projectpage/

Create First Repository

First let's go to this page https://github.com/new after we sign up on Github.

Create First Repository

  1. Enter repo name
  2. Make the repo public, you can make it private as well, but that is a paid service. Remember keeping repo public isn't any harm. There people can see your code and can request pulls, but they won't be able to merge, only you can.
  3. Check “Initialize this repository with a README” this is optional but it will make the next step easier.
  4. Then click Create repository.

And you are done with repository creation.

Project Page Creation

Now let's create create a “Hello World” page and push it to Github. To see how Github Pages look and work, before you take a clone of the repository we created, you may need to add .ssh keys and do some installation, If you have already done that then you can skip it and move forward. If not please follow this link.

Clone of Repository

On the project repository just copy the ssh URL and paste in a terminal in your specified path and hit Enter.

Clone the repo.

Clone of Repository

Cloning of Repository

Command that you will get from Github will be like this:

[email protected]:junaidmasoodi/junaidmasoodi.git

Add GIT clone as a prefix to the preceding to start cloning.

git clone [email protected]:junaidmasoodi/junaidmasoodi.git

And for now our cloned repo will only have a readme.md.

Note: If you are familiar with GIT and have installed it on your machine, then and then you only will be able to take a clone.

Otherwise there are two other options in the same place, Clone in desktop and Download as Zip; you can use these options as well to clone or simply download a repository.

In another article I will create one page of say “Thank You” and push to the same repo and will also show how the custom domain redirects to the same page.


Similar Articles