Experiment2: Initialize a Git repository and push a static web project to GitHub
Aim
To learn how to initialize a Git repository locally, connect it to a GitHub repository,
and push a static web project (containing HTML, CSS, and JS files) to GitHub.
Optionally, host the website using GitHub Pages.
Tools Required
Git (Installed from https://git-scm.com)
GitHub account (https://github.com)
Code Editor (e.g., VS Code, Sublime Text)
Basic static website files (index.html, style.css)
Internet connection
Folder Structure Example
personal_portfolio/
├── index.html
└── style.css
Procedure
Step 1: Create or Prepare Your Static Website: Create a folder called
personal_portfolio and add index.html and style.css.
Step 2: Initialize Git in Local Folder: Open Terminal / Git Bash / Command
Prompt and navigate to your project directory:
cd path/to/personal_portfolio
git init
Step 3: Configure Git (First-time only)
git config --global user.name "Your Name"
git config --global user.email "[email protected]"
Step 4: Add Files and Commit
git add .
git commit -m "Initial commit with static web files"
Step 5: Create a New Repository on GitHub
1) Go to https://github.com
2) Click ➕ → New repository
3) Name it personal_portfolio
4) Do not initialize with README, .gitignore, or license
5) Click Create repository
Step 6: Connect GitHub Remote Repository: Copy the GitHub repository link, then
in your terminal:
git remote add origin https://github.com/your-username/personal_portfolio.git
git branch -M main
git push -u origin main
Step 7: Verify Upload: Visit your repository on GitHub to see the files.
https://github.com/udayameister/personal_portfolio
Step 8: (Optional) Enable GitHub Pages Hosting
1. Go to the Settings tab of your repository
2. Click Pages (left sidebar)
3. Under "Source", choose:
o Branch: main
o Folder: / (root)
4. Click Save
Your site will be hosted at: https://udayameister.github.io/Udaya_portfolio/
Step 9: (Optional) Workflow to Reflect Code Updates Online (GitHub Pages)
If you make any changes locally (in your HTML, CSS, JS files), follow these steps to
update the online (GitHub Pages) version:
1) Edit your code locally (e.g., update index.html)
2) Stage and commit your changes:
git add .
git commit -m "Updated portfolio content"
3) Push changes to GitHub:
git push origin main
4) Wait 30–60 seconds, then refresh your GitHub Pages URL:
Your Updated site will be hosted at: https://udayameister.github.io/Udaya_portfolio/
Expected Output / Result:
6. Screenshots to Include in Report
Screenshot of the terminal showing git init, add, and commit
Screenshot of GitHub repository after pushing
Screenshot of the GitHub Pages URL showing the live website
Result
Successfully initialized a Git repository, added and committed files, pushed them to
GitHub, and optionally deployed the static site using GitHub Pages.
Viva Questions
1. What is Git and how does it differ from GitHub?
2. What is the purpose of git init?
3. What does git add . do?
4. What is a commit in Git?
5. How do you link a local Git repository to GitHub?
6. What is GitHub Pages?
Viva Questions and Answers: Git
& GitHub
1. What is Git and how does it differ from GitHub?
Git is a distributed version control system that helps developers track changes in source code during
software development. It allows multiple people to work on the same codebase without conflict.
GitHub is a cloud-based platform built on top of Git. It provides a web interface to host Git
repositories, collaborate with others, review code, manage projects, and deploy static websites via
GitHub Pages.
Git = Tool, GitHub = Platform using Git.
2. What is the purpose of git init?
The git init command is used to initialize a new Git repository in your project folder. It creates a
hidden .git/ directory that stores all the version control metadata.
It tells Git to start tracking changes in that folder.
3. What does git add . do?
The command git add . stages all modified and new files in the current directory (and subdirectories)
to be committed.
It prepares your files to be saved in the next commit.
4. What is a commit in Git?
A commit is a snapshot of your project at a specific point in time. It records changes you made to the
tracked files along with a message describing the change.
Think of a commit as a “save point” in your project history.
5. How do you link a local Git repository to GitHub?
To connect your local project to a remote GitHub repository:
git remote add origin https://github.com/your-username/repository-name.git
git branch -M main
git push -u origin main
remote add origin sets the URL of your GitHub repo.
push uploads your local commits to GitHub.
6. What is GitHub Pages?
GitHub Pages is a free web hosting feature offered by GitHub that allows you to host static websites
(HTML/CSS/JS) directly from a GitHub repository.
When enabled, it creates a public URL like:
https://your-username.github.io/repository-name/
It’s great for portfolios, documentation, and simple websites.
