How To Create An Index File For WebApp In GitBash And Push To GitHub

How To Create An Index File for WebApp In GitBash And Push To GitHub

Introduction

In order to create or make use of an index file, it is important to know what an index file is, and how it could be used to carry out any project without confusion or delay.

What is an Index file?

Briefly, an index file is a computer base file that helps carry out any project effectively and efficiently with the help of an easy random access to any file or record using the given file key.

Let me guide you through creating and mastering yourself in an index file.

In order to create an index file, it is mandatory to have your GitBash and GitHub downloaded already. Then open the GitBash platform and start by first (i) Type in git config –user.name (Username) then press enter to open the next space (ii) Type in git config –user.email (email) as seen in figure 1 below then press enter.

Fig 1.

After the process in the above platform has been carried out. You will need a folder or directory, So, to create a folder or directory continue by typing in cd ~ then press enter, in the next space that shows up (iii) Type in mkdir (username), and input the command cd (username) as seen below in figure 2.

Then press enter.

Fig 2.

After carrying out the above process (iv) Type in the command git init then press enter. The new repository will be initialised and ready to go, see figure 3 below.

Fig 3.

To create file and input code

Note that in this case i am using the file called index.html, in your case it might be another file to be used. So, in order to create a new empty file called index.html, (v) type in touch index.html and push enter.

See figure 4

Fig 4

After the empty file has been created code needs to be input. So, to input code (vi) Type in vi index.html and push enter.

See figure 5

Fig 5

After you push enter you will automatically be taken to a new blank page (vii) in that blank page type i and paste your copied code by right click and push paste.

See figure 6 below

Fig 6

After the code has been inserted, it will display it in the blank page seen above.

See figure 7 below.

Fig 7

To proceed with the command you must press ESC to make the platform available for you to type in then (viii) Type in :wq and press enter.

See figure 8

Fig 8

To view, analyse, and confirm your code (ix) Type in cat (File name) and push enter. Note that the file name I use may be different from the one you are going to use in your process.

See figure 9

Fig 9

At this stage you will need a repository to store or process your file or folder. If you are not in possession of a repository then, create one by going to the GitHub account and follow the process.

How To Create And Clone Repository

To create a new repository, If you have an account just log, but if do not have account register an account and log in to your git account, after login check on the upper left corner of your page find the + and click to select New Repository

See figure 10

Fig 10

After your repository has been opened, give it a name, after name has been given, make sure it is public, then make sure the readME access is ticked.

See figure 11, 12 and 13

Fig 11

Make your repository public and tick add a README file

Fig 12

Then click on create

Fig 13

After clicking on create repository it will open another page where you will be able to copy the required link, make sure the copy is HTTPS when click on the CODE to see the link to be copied and copy the link and go back to git bash for the next stage.

See figure 14

Fig 14

After the repository has been created and the HTTPS URL copied. Let us go back to Git Bash to continue the push to GitHub.

Push To GitHub

To be able to add a repository named origin with the copied link to Git repository. (x) Use git remote add origin then paste the copied url of the remote repository.

See figure 15

git remote add origin (remote repository url)

Fig 15

To add the file input (xi) Type in git add index.html and press enter

To double check if the file placed is been added, (xii) Type in git status and press enter.

After pushing enter, you can see from the outcome and the information that has been saved has been added and could be tracked as well.

See figure 16

Fig 16

(xiii) To be able to create a new commit in git repository with a commit message the command git commit -m (your message) in my own case i input ‘my first commit message’

See figure 17

Fig 17

(xiv)To check the status input the git status command then press enter.

(xv) Moving to the next stage, input git push origin master command and press enter.

The importance of this command is that it helps to push from the local master branch to the remote repository that is specified by the remote name called origin

See figure 18

Fig 18

After the above git command is executed, your local commits will be uploaded by git to the GitHub repository located in your master branch as shown in the command generated.

See figure 19

Fig 19

(xvi) In the above fig 19 we could see that git push was successfully executed. If you go back to your repository on GitHub page and click on code, you will see that the first branch you will see is main.

If you click on the dropdown of the branch, you will see master, and when click on it that will take you to the index.html file to view.

See figure 20

Fig 20

If you look at figure 21 below, you could clearly see that both index file and commit message were visible.

In order to view the content of the file, click on the index.html file.

Fig 21

If you click on the index.html file you will see the file content display, please see figure 22.

Fig 22

I believe this will help point you in the right direction in creating an index file on GitBash and Push it to GitHub.

Thank you