HOW TO CREATE A HTML FILE AND PUSH IT TO GITHUB USING GITBASH
Published: 2023-06-23 18:54:07

**This blog is a beginner's guide on how to create an index.html file using Git bash and push it to a repository in GitHub for future use and deployment.**

**Tools to be used**
1. Download and install Git bash
2. GitHub account

Here is how it's done!

**STEP 1: CONFIGURE YOUR LOCAL ENVIRONMENT**

- 
Open your Git Bash and wait for the **shell prompt** to display.

- Type the following commands:

`git config --global user.name **your username**`
`git config --global user.email **your email**`

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

**STEP 2: CREATE A DIRECTORY AND INITIALIZE IT**

- Type the following commands:

`mkdir **directory name**`

`cd **directory name**`

`git init`

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

**STEP 3: CREATE A FILE**

- Type the following command to create a file with name **index.html**:

`touch index.html`

- Type this command to go into the file and write your content.

`vi index.html`

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

Inside the file, hit the **i** button on your keyboard to start writing your content.

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

- When you are done writing, press the **esc** button on your keyboard then type the following **:wq** hit enter. This will take you back to your line of codes. 

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

**STEP 4: CREATE A REPOSITORY ON GITHUB**

- Login to GitHub, click on **Repository** and select **New repository**

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

**Create a new repository** page will open.

- Type in the name you wish to call your repository.

- Make sure you select the option to make it public

- Check the **add a README file** box

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

- Click the **Create repository** button. 

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

- Click on the **Code** button and copy the HTTPS URL under **Clone** which is under **Local**.

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

**STEP 5: CLONING A REPOSITORY**

- Go back to your Git Bash and type the command:
`git remote add origin **paste the url from GitHub here**` and hit the enter key.

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

**STEP 6: STAGING AND COMMITING THE FILE**

- Type the following command to stage your **index.html** file:
`git add index.html` and hit enter.

- To commit the file, type the following command:
`git commit -m **"your commit message"**` and hit enter. Your **commit message** can be just anything you wish.

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

**STEP 7: PUSH YOUR FILE TO GITHUB**

- To push the **index.html** file you created, type the following command and hit enter.
`git push origin master`

**Master** is the repository branch you are pushing into.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll9cra1q4ms5s8ityimh.PNG)
With this final command and the consequent notification, you can see that we have been able to push our file successfully to GitHub, where it can be used for deployment, as a resource material for other users and for future use.

**View the file content in GitHub**

- Go to GitHub, click on the **Compare and pull request** button that will pop-up to extract the file content.

- Click on the **Master** the **index.html** which is the file name to view the code.

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