How to Deploy Frontend Project on Github

Over 70% of web developers use GitHub Pages or GitHub repositories to showcase their portfolios, host static sites, or collaborate on front-end projects. It’s free, requires no server setup, and integrates directly with your codebase. In just a few simple steps, you can turn your local HTML/CSS and JS project into a publicly accessible website!

Git Installation and Set-Up

Git is an important part of GitHub. So first of all, we need to install Git and download the latest version of Git. Follow the step-by-step instructions for your operating system.

Step 1: Initilaize a Git Repository in a Frontend Project

Navigate to your frontend project folder in the terminal and initialize a local Git Repository

git init

This command will create a .git folder where the details of the repository like remote and username and email are stored.

Step 2: Configure Git username and password

Set your identity for locally for this specific project.

git config user.name "Your Name"
git config user.email "[email protected]"

To configure globally for your future repositories:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

This step ensures that every commit is linked to your identity.

Step 3: Create a New Repository on Github

• Click the "+" icon on the top-right corner. Select "New repository".

Fill in the repository name (e.g., MyProject), add an optional description, choose Public or Private, and click Create repository.

Note: Once created, GitHub shows you a few lines of code — copy the one with https://github.com/dummyname/MyProject

Step 4: Now Add, Commit and push your Frontend Code

In your terminal(inside your project folder)

git add .
git commit -m " added frontend file"
git remote add origin https://github.com/your-username/your-repo-name
git branch -M master
git push -u origin main

This will push your HTML, CSS, and JavaScript files to the GitHub repository.

Step 6 Now Setup Github Pages to Deploy your Site.

Now go to settings and select Pages

Now You will see Github Pages Select source , branch and then save all changes.

Now After few seconds when you refresh you website it will be deployed .

Now ,click on that link and visit you site and you can see your project has been successfully deployed.