Github.io | Getting Started

Suppose you built a complete project for your website and upload it on Github. Now you want others to see what you built. With Github.io you can show the whole world what you made. Just follow this article and know how to show your website to the outside world in minutes!

What is Github.io?

When you create a repository (or a project) on GitHub, it lets you deploy that project into elegant websites whether it is your school project, portfolio, documents or any other thing that you wanna share with the world. All of this is possible with the help of Github.io. These are also known as GitHub pages. You don’t even have to know HTML for doing this, its that simple.

Now you want to know how to setup your own github.io webpage, just follow these few simple steps below and you are ready to go!

Getting Started with Github.io

Step 1- Create an account on Github

If you don’t have a GitHub profile visit GitHub.com and create a new profile on it otherwise login with an existing one.

Step 2- Create a new repository

Click on the “+” on the top right on your GitHub website and then click on New Repository. Name it as username.github.io, where username is your username on GitHub.

note: If the first part of the repository doesn’t exactly match your username, it won’t work

Step 3- Clone your repository

For Terminal

1. Go to the folder where you want to store your project, and clone the new repository:

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

2. Go into the project folder and add an index.html file: (for the time being we are just going to create Hello World text)

~$ cd username.github.io
~$ echo "Hello World" > index.html

3. Add, commit and push:

~$ git add --all
~$ git commit -m "your commit message"
~$ git push -u origin master

your terminal should look something like this

Step 4- Open your github.io

Open your link now i.e username.github.io and you will see your webpage.

screenshot of github.io webpage

Though this looks empty but its just an example to give you an idea. Now you can deploy your own project and let your imagination run!

Now if you don’t want to create your github.io page with your own username there is an another alternative

Note: In this case the format of your github.io page will be username.github.io/RepositoryName

Step 1- Create New Repository

Follow the same step for creating repository but now you can give it any name of your choice.

Step 2- Enable GitHub pages

Click the ‘Settings’ button on the repository home page. Then scroll down to the bottom where you see ‘GitHub Pages’ section and choose the master branch for the source.

Step 3- Import or create your website

Now you need to add the thing you want to display on webpage, you can either import or make one from scratch by clicking on “create new file” and making an index.html

Step 4- Visit your webpage

Wait for 5–10 min and then check your webpage. All of your content would be there. Now you can share your Github.io URL with the world and show your data to anyone!

Here is a little design I did for you guys to show github.io page

Github.io for OpenMRS

You can follow any of these 2 methods and deploy your project with the world now. If you have any doubt, Here is a video that I would suggest to watch

Reference from pages.github.io

But there are some other features with which you can make your Github.io more attractive.

When you visited “Github Pages” section of your repository setthing you would have found an option for “Theme Chooser”. This helps you choose cool themes to make your page look cool!

These are called jekyll theme using which you can blog using beautiful Markdown syntax, and without having to deal with any databases.

1. Just click on Theme Chooser in the repository settings in the Github Pages section
2. Then choose a theme according to your requirement and then click on select theme.

3. After that you are done an then you can add your code using that theme.

With themes you can easily release your github.io webpage with up and running in no time. You will still need to delete index.html file to see the changes of your theme though.

Now you know all the basics things to get your webpage online, but to make use of it to the full potential you need to learn about HTML,CSS & JavaScipt. With GitHub Pages, almost anything is possible with endless possibilities so start building your website this instant!

References:

Github pages

Github.io DEV Article

Youtube tutorial Github.io