Use Github Pages to host your website for free

GitHub is an amazing platform for saving code projects and collaborating with colleagues. But did you know they also provide a free hosting solution called Github Pages?

This feature is useful for deploying static websites (HTML, CSS, and JavaScript) such as a portfolio, project documentation, or anything else you want! It even lets you set up a custom domain name (though we'll only cover hosting in this tutorial).

However, due to the fact that it is a static service, it does not support server-side scripts (PHP, Python, etc.)

Let's get started!

How to do that?

If you already have a repository, you may go to step 6.

Create/sign in into your github account

Create a new GitHub repository

Set up a new GitHub repository. Navigate to your dashboard and look for the "New Repository" button. Click it to create a new repository and name it whatever you want, for example, "hosted-repo" and in the description, you can provide information about your repository.

Clone the repository on your computer

You will be redirected to the repository's page once it has been created. There, you can copy/paste the HTTPS or SSH link and clone the repository on your computer.


git clone https://github.com/loha-dev/hosted-repo.git

Create a static website

Now navigate to the newly created folde. Let's start with a simple webpage and host it on Github.
Make a file called index.html and name it "Hello World, this is my first web page." similar to 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>Hosted repo</title>
</head>
<body>
    <h1>Hello World! this is loha.dev first web page.</h1>
</body>
</html>

Push your code to GitHub


git add -A
git commit -a -m “init”
git push origin master

Now that the webpage has been pushed to Github, you can see the index.html file in your repository; your repository now contains two files (readme.md and index.html), and we are ready to host our webpage.

You can see the index.html file in your repository now that the webpage has been pushed to Github; your repository now contains two files (readme.md and index.html), and we are ready to host our webpage.

Open your repository settings

Let's launch your website and make it available to the rest of the world! 🌐
You have a menu at the top of your repository page. Click on the last option, "Settings," then "Pages" in the sidebar.

Deploy

Let's keep things simple and choose "main" as your deployment branch and "/ (root)" as your deployment folder.

When you click the "Save" button, the page reloads. Wait for a few minutes before refreshing if the link doesn’t appear.

Congratulations 🎉🎉, you have successfully hosted your first web page for free.

Wrapping up

You can now use GitHub to test your HTML5 and CSS3 projects and show them off to the world on a genuine and gorgeous website!
So that's how GitHub pages operate, it's incredibly simple! You can create an infinite number of repository sites.