Using GitHub to Host a Free Static Website
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
<!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.
Hosting on GitHub Pages
Congratulations you have hosted your first web page successfully for free.
Hosted Website