Introduction

A website is an essential part of every business or individual. A business can attract users through the website. Let's assume you have created a portfolio website using some Html, CSS, or JavaScript. The website is running on the localhost which means it is only accessible on your computer/laptop. Now you want your website public and accessible to everyone. Many web hosting platforms provide hosting services to host your website all over the world and make it available to everybody. Famous web hosting providers are Hostinger, Godaddy, DigitalOccean But these services are not free they cost you to use their hosting services. For a beginner, if you want to publish your website without paying any penny, and make your Static Website (Html, CSS, and JavaScript-based website) accessible to everyone then GitHub is for you.

Prerequisites

Following are the things you have to know before publishing the website.

• You should have your website ready
• Git
• GitHub Account

If you are unfamiliar with Git and GitHub let me explain to you shortly. Git is a version control system that tracks and stores the history of your code locally. We need Git to push our code to GitHub. GitHub is an online software development platform that is used for storing, tracing, and collaborating with people on different projects all over the world. You can follow this blog about Git and GitHub for a better understanding Introduction to Git and Github

Implementation

Following is my Facebook Web application (template) which I will host on the internet using GitHub pages. You can access the code from this link

Before starting make sure you have Git installed and have an GitHub account.

Step1: Creating a GitHub Repository

First thing first, sign into a GitHub account and create a repository. The repository name must contain github.io. In my case, my repo name is fb-page.github.io. You can select Private or Public mode based on your requirements. If you want your code accessible and open to all then you select Public and if you want it private then select private.

Step2: Pushing your Code to GitHub In the previous step, we created our repository, now I show you how to push website code to GitHub using Git. First I show the project directory structure. You must have to follow this project directory. The Website's main file which is index.html should be the root file, which mean it must be outside of the folders.

When you created the repository this page appears, all commands we use will be from this page.

Next, open the Command Prompt where the website is located and follow these commands.

Note: Now in my Project directory there is an index.html file and css folder. Other folders which you see above are not required for the demonstration.

• git init

F:\myApp>git init Initialized empty Git repository in F:/myapp/.git/
F:\myApp>

• git add .
git status (to see files are added into the staging area)

F:\myApp>git init 
Initialized empty Git repository in F:/myApp/.git/ F:\myApp>git add .
F:\myApp>git status
On branch master

No commits yet
Changes to be committed: 
       (use "git rm --cached ..." to unstage)
                 new file: C55/ . _custom-animation.css 
                 new file: css/ . _responsive.css 
                 new file: css/ . _style.css 
                 new file: C55/custom-animation.css 
                 new file: css/responsive.css 
                 new file: css/style.css new file: index.html
F:\myApp>

• git commit -m "added my files"

F:\myApp>git init 
Initialized empty Git repository in F:/myApp/.git/ F:\myApp>git add .
F:\myApp>git status
On branch master

No commits yet
Changes to be committed: 
       (use "git rm --cached ..." to unstage)
                 new file: C55/ . _custom-animation.css 
                 new file: css/ . _responsive.css 
                 new file: css/ . _style.css 
                 new file: C55/custom-animation.css 
                 new file: css/responsive.css 
                 new file: css/style.css new file: index.html

F:\myApp>git commit -m "added my files" 
[master (root-commit) 009a1fc] first commit 
  7 files changed, 10946 insertions (+) 
  create mode 100644 css/_custom-animation.css 
  create mode 100644 css/ . _responsive.css 
  create mode 100644 css/. _style.css 
  create mode 100644 css/custom-animation.css 
  create mode 100644 css/responsive.css 
  create mode 100644 css/style.css 
  create mode 100644 index.html
F:\myApp>

• git branch -M main
git push -u origin main

F:\myApp>git branch -M main
F:\myApp>git remote add origin https://github.com/mudassirHayat/fb-page.github.io.git
F:\myApp>git push-u origin main 
Enumerating objects: 8, done. 
Counting objects: 100% (8/8), done. 
Delta compression using up to 4 threads 
Compressing objects: 100% (8/8), 
done. Writing objects: 100% (8/8), _59.16 KiB | 1.91 MiB/s, done. 
Total 8 (delta 0), reused © (delta o), pack-reused 
To https://github.com/mudassirHayat/fb-page.github.io.git
        * [new branch]          main -> main 
Branch 'main' set up to track remote branch 'main' from 'origin'.
F:\myApp>

Finally, refresh the repository, you found all your local files successfully uploaded to the GitHub repository

• Click on the Setting button

• In General tab click on Pages

• Set the branch to main and save it

• Open the URL

• Oops! Don't worry, the website will be online within a minute.

• Congratulations!! Website is up and running

Conclusion

Thanks for staying with me. In this short time, we learned how to publish our HTML website using GitHub pages for free of cost. Now it's your time to show the world about your work. If I miss any step or if you have any queries feel free to ask in the comment section. I will see you in my next article until then Happy Coding..