Github

Create Your Website using Github Pages

Today I am going show you who to create a websites using Github-Pages. Well before going though the steps to host your website, you should make yourself familiar with Git and Github. If you don’t know what Git is click here for my previous article.

Lets start from scratch:

Github has two types of pages namely “user pages” and “project pages“.

(i) User pages: Used as the index page or the HOME page for your website. The URL will look something like this:

http://yourusername.github.io/

(ii) Project pages: Used for the sub-directories. The URL will look something like this:

http://yourusername.github.io/project_page/

Create an “user page” first:

Create a repository:

Create a repository named username.github.io;

Note: Username must be your github username as shown above.

Clone your repository to your local hard drive:

$ git clone https://github.com/username/username.github.io.git

$ cd username.github.io

Move all your CSS, HTML and JAVA SCRIPT files into it and rename the index file as “index.html” as shown above. This will be used as your homepage. Finally then push your changes.

$ git add .

$ git commit -m "website created"

$ git push origin master

Refresh your github repository username/username.github.io to check. Here is mine:

Now visit http://username.github.io and..congrats! you have successfully hosted your website on Github. My page looks like this:

Now lets start with “project page”:

Create a new repository with the project name:

Create new repository. See the following image for reference.

Clone your repository again to your local hard drive:

$ git clone https://github.com/username/projectname.github.io.git

$ cd projectname

Move all your CSS, HTML and JAVA SCRIPT files into it and rename the index file as “index.html” which will be used as your projectpage and push.

$ git checkout -b gh-pages

$ git add .

$ git commit -m "project created"

$ git push origin gh-pages

Refresh your github repository username/projectname.github.io to check.

Finally visit http://username.github.io/projectpage/

You can create all your projects under your website with same method as shown above. Give it a try.

Automatic page generator:

If you still find it difficult, then there is an easiest of all method .i.e. “automatic page generator” for github pages. Just follow the steps,

User-page:

Project-page:

Create a new repository i.e.”user page” or “project page”:

go to settings, scroll down and click on “automatic page generator”.

Give your project name, tagline and write the body part.

Continue layout.

Select your layout and publish.

Congrats. your repository is created with an index.html and you can edit it now as per your taste.

visit: http://username.github.io

or

http://username.github.io/projectname

Note: If you have your own domain such as example.com/org/in, and you want it to be hosted. Then just add a file namely “CNAME” and write your domain name. Now go to you “domain control pannel” and setup your DNS .i.e. you should use an A record pointing to a valid IP address.

Thank you.

Advertisements

One comment

  1. daenglinuxer · March 4, 2014

    thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s