Creating and Pushing an Index File to GitHub Using Git Bash

Hey guys, welcome back! 😊

Today, I'll show you how to create an index file in Git Bash and push it to GitHub step by step. If you're new to Git, don't worry I'll keep it simple!

Git Bash is a command-line tool that helps you track changes in your project and upload files to GitHub. The index.html file is usually the starting point for web projects, and pushing it to GitHub allows you to store, share, and collaborate easily.

Before we begin, make sure you’ve installed Git Bash on your desktop and created a GitHub account. If you’ve got that ready, you’re all set!

Now, let’s dive in and get started. 🚀

STEP 1: Configure Your Local Environment

Before pushing your files, let’s make sure Git knows who you are by linking it to your GitHub account.

a) Type git config --global user.name "<your username>", then hit Enter.
b) Next, type git config --global user.email "<your email>", then press Enter again.

And that’s it! Now Git is set up and ready to go. ✅

STEP 2: Create Your Folder/Directory

Now, let’s set up a new directory where your project will live.

a) Type mkdir <your-folder-name> and hit Enter. This command (mkdir = make directory) creates a new folder. For example: mkdir bunmiswebsite.
b) Next, navigate into your new folder by typing cd <your-folder-name>, then press Enter.

Boom! You’re now inside your project folder. 🎉

c) Now that you’re inside your project folder, let’s turn it into a Git repository.

✅ Type git init and hit Enter.

This command initializes Git in your folder, creating a hidden .git directory that tracks your changes. Now, your project is officially under version control! 🚀

STEP 3: Create Your File and Input Your Code

Now, let’s create your index.html file and add some code to it.

a) Type touch index.html and hit Enter. This creates an empty file.

b) To open the file for editing, type vi index.html and press Enter.

c) A blank screen will appear—press "i" on your keyboard to enter edit mode. Then, right-click and select paste to add your code.

d) Once done, press Esc to exit edit mode.
e) Type :wq and hit Enter to save and close the file.

f) To view your code, type cat index.html and press Enter.

Now, if you don’t have a GitHub repository to store this file, let’s quickly create one! 🚀

STEP 4: Create and Clone Your Repository

Now, let’s set up a GitHub repository to store your project.

a) Log in to your GitHub account, click the “+” sign in the upper-left corner, and select “New repository”.

b) Give your repo a name, set it to public, and tick the “Add a README file” box.

c) Click “Create repository” to finalize it.

d) On your repository page, click “Code”, ensure the link is set to HTTPS, then click the copy icon to copy the repo link.

e) Now that we’ve created the repo and copied the URL, let’s switch back to Git Bash to continue. 🚀

STEP 5: Push to GitHub

Now, let’s upload your project to GitHub so it’s stored online.

a) Add your GitHub repository as a remote origin by running:

git remote add origin <remote_repository_url>

(Replace <remote_repository_url> with the HTTPS link you copied earlier.)

b) Add your file to Git:

git add index.html

c) Check if the file has been added by typing:

git status

This will show that index.html is now staged for commit.

d) Commit your file with a message:

git commit -m "Added index.html file"

e) Verify the commit by running:

git status

f) Push your changes to GitHub:

git push origin master

This uploads your local project to your GitHub repository. 🚀

g) Once the push is complete, your file will appear in the master branch on GitHub.

h) Head back to your GitHub repository and notice that the default branch is main.

i) To view your file, click on "Branches" and select "master".

j) Add a short description for your project.

k) You should now see your index.html file and commit message reflected on GitHub.

l) Click on index.html to view its content.

🎉 That’s it! You’ve successfully created, committed, and pushed an index.html file to GitHub using Git Bash. Hope this guide helped—thanks for following along! ✌