Creating an Index File in Git Bash and Push it to GitHub
Tags: git, repo, indexfile, javascript
Published: 2024-03-22 12:11:40

In this blog, i will take you on a step-by-step journey to master the art of creating index files using a command-line interface on Git Bash. I will also take you through the process of pushing your codes to GitHub

**Prerequisite**
Ensure you have installed Git Bash on your
Ensure you have created a GitHub account

So lets get started.
First thing we do is to configure your environment, that is to ensure you are logged into your GitHub account. 
Open your Git Bash and input these commands, remember always to press ENTER after every command line.

git config --global user.name <username>
git config --global user.email <your email>



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w94zmqpr8rcaf9w8pivf.PNG)
Now we have to create our Folder/Directory. To do this, input the command mkdir, leave a space and give it a name. mkdir means make a directory. "mkdir basefaculty"
Input the command "cd (your directory)" and press enter to open your directory

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4pqtmae5jr92tmip6pr.PNG)
Input the command "git init" and press enter

This command creates a new Git repository in the current working directory.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giio22xu2pnlufgaub34.PNG)
You are good to go.
Now we have to create our file and input our code. we are going to create a new empty Text file named index.html.

Input the command "touch index.html" and press enter.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jli0dps04d4029qz6uxn.PNG)
To input code in the empty file, input the command vi <file name>

A blank space will appear, Click on the letter "i" on your keyboard to edit the file. Right-click and click on paste, to input your code. Let us use this code below as test. Copy this code from the comment section of this blog, and paste this in the blank page.
<!DOCTYPE html>
<html>
    <head>
        <title>My web page</title>
    </head>
    <body>
        <h1>Hello, world!</h1>
        <p>This is my first web page.</p>
        <p>It contains a 
             <strong>main heading</strong> and <em> paragraph </em>.
        </p>
    </body>
</html>  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ljej9hmkeffurpswx4b.png)
To continue, press the esc button on your PC, input :wq and press enter to close the index.html file 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bftqp0b10q8cyf6o64h.PNG)
To view your code, input the command cat <file name>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44a86bj2y0subqm119fj.PNG)
Now we will need a repository to house this folder and file, let's quickly create one by going to our GitHub account. To create our repository, login to your GitHub account.
On the upper-left corner of your account, click on the + sign and select "New repository"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogno1mm1r9e63mesd4xx.PNG)
Give your repo a name, ensure its public, and tick the "Add a ReadME file" box

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkqrxm5l0w5zfl9o9xnh.PNG)
Click create to finalize.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4so2gam72zo2l68bl9s1.PNG)
On your repository page, click on "Code", copy the url on the HTTPs section, and go back to your Git Bash
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhq33xr9vmme5xpm6e1p.PNG)
We are done creating our repository, now lets go back to our Git Bash and push.
To add a remote repository named "origin" with a specified link to your Git repository, you can use the "git remote add origin" command followed by the remote name ("origin") and the URL of the remote repository.

git remote add origin <remote_repository_url>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snrf1cog8nj95glvendv.PNG)

To add the file input "git add index.html" and enter


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5yi2jkglyh0e79r68m3.PNG)
You can confirm if the file has been added by inputting this command.
git status
you should get this feedback
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgqfl3gyqeoopaqt05ei.PNG)
Input this command to create a new commit in your Git repository with a commit message
git commit -m <'the message'>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux69vufr4rd49v37f7ql.PNG)
You can check the status by inputting the "git status" command

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpdxosjshc64a9iwyyui.PNG)

Now input the command 'git push origin master' and press enter. This command pushes the commits from your local "master" branch to the remote repository specified by the remote name "origin". After executing the push command, Git will upload your local commits to the GitHub repository in your master branch as shown in the generated command.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po8r7c6e3lrzy8kd6qc0.PNG)
On your repository, on the code section, you would notice the default branch is main. To view your index.html file, click on branch and select the master branch.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mrf04u7vk1ijgdmicr8.PNG)
From the capture below, you can see that our index file and our commit message reflect here.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2i1phv5khy1uwcze29v.PNG)
Click on the text index to see the code we deployed

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8brcra5k57ht1grtn1b.PNG)

There you have it, Hopefully this helps.