Analytics Vidhya
Published in

Analytics Vidhya

Hosting a website for free on github pages.

Greetings my fellow developers!

Here we’re gonna go over the procedures we need to follow in order to host a site on github pages for free! The term “procedure” might seem a bit far fetched here because the things we need to do in order to complete this task are actually pretty simple and straightforward. Now let’s cut straight to the chase and get started!

Step 1: Making a Github Account

This step is a given, you need to make your github account. If you already have an account skip this step and move over to step 2. To make an account go to https://github.com/ and then register and login using your account.

Step 2: Creating a new Repository

Click on the “+” icon at the top and then click new Repository.

Step 3: Naming your Repository

Give an appropriate and relevant name to your repository and make sure that it’s set to Public in the description. And then lastly hit “create Repository“ button at the bottom of the screen.

Step 4: Pushing files to the Repository

This step simply includes pushing your website code to the repository. I’ll suggest using git bash for this purpose. Just open up git bash in the directory of your code and then execute the following commands first:

git init
git add .
git commit -m "Initial upload"

Now bring in your repository link, and execute the following command:

git remote add origin https://github.com/faiza993/bg-color-changer.git

Here the term “https://github.com/faiza993/bg-color-changer.git” refers to our github repository link.

Now execute this:

git push -u origin main

Now this is finally upload your codes to the remote repository.

Step 5: Enabling Github pages:

i) Firstly, go to settings on your repository in the following way

Repository settings

ii) Secondly, scroll down to the “github pages” section

iii)Thirdly, Change “None” to “main/master”

iv) Hit save.

Step 6 Moment of truth: Opening up your page

Finally when you’ve hit save in the previous step the github pages section will show you something like this:

Open up the new url that has been generated and see your hosted site on github for yourself!

This works perfectly for static websites built with html, css, js and they can also be used for hosting websites built on frameworks and libraries like React, Angular. The steps are a little bit different and gh-pages can be used for that purpose.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store