Host your Website using GitHub in 5 Steps

Saikiran Kopparthi
8 min readNov 10, 2020
Photo by Christopher Gower on Unsplash

Greetings Everyone,

I am going to demonstrate how we can Host a Website using GitHub. Initially, first of all we need to know what is GitHub and the reason behind Why the Developer Community across the Globe are preferring GitHub.

What is GitHub ?

Photo by Luke Chesser on Unsplash

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. It is a Version-Control Software where we can track our Changes. While Git is a command line tool, GitHub provides a Web-based graphical interface. It also provides access control and several collaboration features, such as a wikis and basic task management tools for every project. The word we come across many times while using GitHub is repository. GitHub compromises of code repositories, written by various Developers. Repository is of two types:

  1. Local Repository — which resides in our Local System either Desktop/Laptop
  2. Remote Repository — which resides in our GitHub Profile.

Within a few minutes, you will get a full clarity on the word Repository.

To Get Started you need to have some Prerequisites

GitHub Account: Sign up for a free account at GitHub if you if you have don’t have an Account earlier.

Git Software: You need to have Git Software installed in your Local System. If you don’t have installed, Download it from here:

Note: Choose the Compatible Operating System before Downloading while it leads to disfunction of the Software.

Let’s get Started, We are ready with the all the requirements

Step 1: Building your first Website

GitHub provides hosting only for Static Websites i.e., Sites developed using HTML, CSS, and Java script. It also provides hosting for sites developed by Java script frameworks like React JS, Angular JS, etc. So we are not going to talk about Languages supported by GitHub, since the main objective of this Blog is to explain Hosting a Website using GitHub.

Open a Notepad file or any Text Editor, and Type or Paste the following code, if you have a Static Website ready get ready with the index.html file.

<!-- Save the file with index.html --><!DOCTYPE html>
<html>
<head>
<title>Hello World !</title>
</head>
<body>
<h1>Hello World !!!</h1></body>
</html>

Now run the index.html, in your Browser simply by clicking the icon. Now you can see your Hello World !!! in your Browser. That’s it, you have your Site ready to Host. I attached the preview of the file in the Browser.

Hello World Screenshot after running index.html file

Step 2: Creating a Repository

Now log on to your GitHub profile, and navigate to the Top Right where you can see the ‘ + ‘ Button to right of your Profile picture.

→ Click on the + icon and you can see a dropdown showing some options like Create a New Repository. You can see the preview here.

Now, Click on New Repository and at Repository Name Field , give a Name for your Repo and make sure you get a Green Tick mark, that determines that the Repo name which you have specified is valid and accepted by GitHub. Coming to Description, it is Optional where you can tell users, what the repo is about and Project description so they get a clear idea what does the repo contain.

→ After entering the Repository Name, leave all the other options by default you need to get the Window like this and finally Click on green Colored Create Repository Button.

Click on Create Repository Button

→ That’s it, we are halfway through, Now we are ready with our Remote Repository the one created just now in our GitHub profile, it’s like a Remote folder where we are going to store our Whole Code.

→ Now after clicking on the Create Repository Button a New Page will open showing some steps and a Link for the repository will be shown like this.

GitHub Repository Link

→ Copy the link, or Click on the Copy Button at the Right End. You can also paste the link in Sticky Notes or Notepad.

→ My Repository Link is https://github.com/saikiran1224/Sample_Repo.git

Step 3: Authorizing Git Bash

Now open the folder or the path where you saved your index.html file earlier. Then right click anywhere and if you successfully installed Git Software, then you can see two options in the Panel opened like this as shown in the image.

Click on the Git Bash Here option which will open a Terminal. Now you need to authorize the Terminal i.e., you need to connect Git Software with your GitHub account which you have created earlier. By entering the following commands in the Git bash terminal makes you connect your account.

Enter the following command to set the username of your GitHub account. Mine is saikiran1224 which is shown in your GitHub profile.

git config --global user.name "Your Username here"

Now, you are done with your Username next is you need to set up your email Address. So to set you need to enter the following command

git config --global user.email "email@example.com"

All Set! Ready to clone your Repository and push the Code to the Remote Repository.

Step 4: Clone the Repository and Pushing Code

Now you have your Git bash ready and everything set. The next step you are going to perform is to Clone your Repository

Clone: To get an exact Copy of your Remote Repository to your Local System.

Now, we are going to clone the Remote Repository using the Link given by GitHub earlier in Step 2. No Problem if you lost the link, just navigate to your Profile and you can find the link there under the Code Button.

Open your Git Bash terminal and enter the following command to clone the Repository to your local system and click Enter

git clone https://github.com/saikiran1224/Sample_Repo.git
Git Bash Window

Kindly ignore the Warning since no files are present in the Repository it gives a Warning. Now follow the coming steps very carefully.

You can see a folder gets automatically generated in the path specified with the Folder name as Sample_Repo (This will be your Repository Name). This is the Local Repository cloned to our system. Now we need to have our index.html file in Local Repository. Just copy and paste it in the folder which got generated. If you have multiple files, then do Ctrl + A and copy all the files at once and paste them in the Local Repository.

Now, the next important step is open the Local Repository and open the Git bash here by Right clicking anywhere. After getting your terminal ready, enter the following command.

git add .

The above command will add all the files and if successfully executes it asks for an new empty prompt. Then enter the following command.

git commit -m "Initial Commit"

The above command will create a Commit and in between the double quotes is the commit message written. We can write our Own message which helps in future we can track our Project Version. Now the final and last command we need to enter is

git push origin master

The above command will push the code to the Remote Repository from our Local System to master Branch. Upon successful execution it will show you a message like shown in the image below.

After pushing the code to Remote Repository

Congratulations! You successfully pushed the code to the Remote Repository. Now you check whether the code is successfully pushed or not. Navigate to your GitHub profile and click on the Repository, then you can see the files you just pushed.

Step 5: Publishing Site to GitHub Pages

All Set! We are ready to Host our Website. Navigate to the Settings Option on the top Navigation bar click on Settings Button and a new Page will open.

Settings Button on the Top

Here, you can see the whole settings for your Repository.

You can customize some features or change the Name for your Repository along with adding and deleting your Branches. The meaning of Branch in brief is when more than one person is working on the same project by creating branches, we can overcome the conflicts caused when Code gets pushed.

Now Scroll down until you see the GitHub Pages, like the image shown

GitHub pages Window

Now change the Branch name to master, and leave all the options by Default. Click on Save Button and wait for few seconds until page gets reloaded.

That’s all! Scroll down again and you can see the Success message at GitHub pages Section like the following.

Your site is ready to be published at https://saikiran1224.github.io/Sample_Repo/

Hurray! Now you have your Site published in the URL given above. Share this link to anyone, they can see your Website anywhere in this World.

If you push again to the Repository, automatically it gets changed in the Website no need to enable GitHub pages every time.

Thank you for spending your Valuable Time and reading this Blog till the end.

Hope you have a Good Day !!!

For any assistance you can contact me through knvrssaikiran@gmail.com.

GitHub profile Link:

--

--

Saikiran Kopparthi

Self taught Android Developer, Backend PHP Developer. Experienced in Developing Apps using Firebase and REST API. Looking forward to learn new Technologies