Using GitHub to Host a Free Static Website

Last Updated : 15 May, 2024

Having a personal or project website is important for showcasing your work. Fortunately, GitHub Pages offers a simple and free solution for hosting static websites directly from your GitHub repositories. In this article, we’ll walk you through the process of creating and hosting a static website using GitHub Pages.

Prerequisites

What are GitHub Pages?

GitHub Pages is a feature of GitHub that allows users to host static websites directly from their GitHub repositories. Whether you’re a developer, designer, or hobbyist, GitHub Pages provides an easy and convenient way to share your projects, portfolios, documentation, or personal blogs with the world.

Steps to Host Website on GitHub

Step 1: Create/ Sign into your GitHub account.

Step 2 Create a new GitHub Repository

Go into your dashboard and find a “New Repository” button. Click on it to create a new repository and name it whatever you want and in description you can give some information about your repository.

Creating a repo

Step 3: Now we have to clone this repo on our local system, so for that click on the code and copy the url of this repository.

Clone Repo

Step 4: Now open git bash or any terminal in system, make sure that git is already installed and configured properly. Now write the command for cloning the repository this will create a folder on your local system with the same name as of your Github Repository.

git clone "url of repo that you have copied"

Cloning a Git repo

Now go inside this folder, here you have to create your webpage or a whole website, lets make a simple webpage here and host it on Github.

Make a index.html file and write “Hello World this is my first web page.” like this

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GFG</title>
</head>
<body>
    <h1>Hello World this is my first web page.</h1>
</body>
</html>

Basic Static Website

Step 5: Now run some basic commands and push this file to Github.

git add -A
git commit -a -m "first commit"
git push origin master

Push files to GitHub

Now the webpage is pushed to Github you can see this index.html file in your repository, now we are good to go to host our webpage.

Files of repository

Step 6: Now just follow these steps carefully.

Go to setting and scroll down to Github pages
Click on “check it out here”
Click on the dropdown currently showing none and select your branch in our case it is master.
Click on save, you can see a url on the top of it in the format of https://<username>.github.io/<repo name>. This is url of your hosted webpage.