A Beginner’s Guide to Pushing Codes from VS Code to GitHub using Git (Part 1)

Have you tried pushing your codes directly from VS Code to GitHub using Git, or are you used to uploading your projects on GitHub without using the Git command line? Not to worry, in this article, I will try to work you through the steps of pushing your project using the VS Code built-in terminal.

Daniel Vazquez (The Daddest Developer)

Let’s start by going over a few buzzwords:

What is Git and GitHub?

To start with, Git and GitHub are not the same. Git is a version control system that makes it easy for developers to create different versions and track changes made to a project. Communication is a very important skill when working with other developers, designers, and product managers. Git makes it easy for these categories of people to collaborate and work together on the same project.

GitHub on the other hand is a cloud-based hosting service that allows developers to manage Git repositories. This is where other developers can pull your codes and also see the changes made to a project.

Steps in pushing a project to GitHub using Git from VS Code Terminal

Step 1: Install Git

• Ensure that you have Git installed on your device. To download Git, visit Git — Downloads (git-scm.com) and select the version to download based on your operating system (macOS, Windows, Linux/Unix). Then install Git by following the instructions.
• To check if you have Git already installed on your device, open Command Prompt or Terminal and type git — version.

Step 2: Create an account on GitHub

• To create an account on GitHub, visit https://github.com/
• Click on Sign up and follow the process.

Step 3: Create a project folder in VS Code or open an existing project folder

In this case, I have created a new folder and added some sub-folders to it.

The above folder (Women Techsters) consists of 3 sub-folders: css folder (with a file named styles.css), html folder (with a file named index.html), and a js folder (with a file named index.js).

Step 4: Add Git to your project (Create a Git repository)

• To add Git to your project, open the VS Code built-in terminal by clicking on Terminal on the Menu Bar, then click on New Terminal.
• Make sure you are in the root folder.
• Initialize git by running the command: git init then press Enter.

This creates an empty Git repository and creates a hidden folder named .git that contains all the information Git stores about the repository including changes made, remote repository addresses, and more. However, at this point, no file in the project is being tracked yet.

If you try to run another git command without initializing git first, you will get this message:

fatal: not a git repository (or any of the parent directories): .git

Git States

Christophe Porteneuve

There are 3 different Git states.

• Local working directory: This is the area where the project is currently being worked on, and it is where the files reside.
• Staging Area: This area is where Git starts tracking and saving the changes that occur in the files as you progress in the project. Files in this area are tracked by Git and ready to be committed to the local repository.
• Local Repository: This area contains all the commits made to the files i.e. the Git repository that is stored on your local computer.

Now, based on these Git states, there are also different file states. There are 4 different file states. They include

• Untracked state: Whenever a new file is added to a working directory, it is considered an untracked file. This means that the file has not been added to the Git repository yet. Any file in the untracked state is present in the local working directory.
• Staged state: When a file is in the staged state, it means the file has been moved from the local working directory to the staging area and is ready to be committed to the local Git repository.
• Committed state: When a change is committed to a file, the file then moves from the staging area to the Git repository. Files that are in the local repository can then be pushed to a remote repository such as GitHub.
• Modified state: If changes are made to a file that is already been tracked (in the staging area), it moves away from the staging area back to the working directory. Such a file has to be added again and committed for it to move into the Git repository.

To check the status of your files, run the git status command in the Terminal.

This shows that the files in the sub-folders are not being tracked by Git.

• In order to begin tracking a file, you need to add those files by running the git add file command. In this case:

git add css/styles.css

git add html/index.html

git add js/index.js

To add multiple files at the same time, run git add . command.

I have added the files, now let's check the status of the files by running the git status command.

We can observe that the files have been added and moved to the staging area. The white arrows show “A”, which means that the files have been added and are ready to be committed.

Step 5: Commit the files

Before you commit, you need to make some changes to the project. I have decided to make some changes to my code by adding a few HTML contents and CSS styles.

I have added new content to the html and css files. Notice that the letters in front of the HTML and CSS files that were previously reflecting “A” have changed to “M”. This means that the files have been modified. The status of the JS file remains because no change was made to the file.

Now let’s check the status of the files.

Since I have made modifications to the file, I have to add them again so that the changes can be moved to the staging area where they will be tracked and recognized as a new version of the code.

The next step after adding the files is to commit the files to the local or Git repository. After adding the files, run the git commit command.

Note: When committing a file, it is recommended to add the -m option, followed by a comment. This serves as a summary of the updates or changes made to the code.

git commit -m “commit message”

Another thing to note is, there is an option to add and commit a file at the same time. The command for that is:

git commit -a -m “commit message”

When you commit, Git only stores a snapshot or summary of the changes made, rather than storing the entire copies of every changed file. This keeps things fast and stops a repository from getting unreasonably large.

I have successfully created my first commit, and this will be stored in the local Git repository.

Remember that anytime you make changes to your project, you need to commit those changes by first adding them to the staging area. This tells Git which changes you want to include.

Another thing to note is that you need to configure your email address and username in Git for you to commit changes to a project. This allows Git to track who is making those changes and creating versions. This feature is very useful when collaborating with other developers on a project.

You will get the error message above if you have not configured your username and email address. To config these, use the following commands:

git config — global user.email “youremail@yourdomain.com”

git config — global user.name “Your Name”

Note that the username and email address must correlate with the email address and username of your GitHub account.

Once you have done the configuration, you can confirm that the information has been set by using the git command:

git config — list

The output should look like this:

user.name=Your Name
user.email=youremail@yourdomain.com

So far we have covered how to initialize Git, stage changes for commit, and finally how to commit those changes to the local Git repository. In the second part of this article, I will be covering how to finally push your codes to GitHub.

Please note that this is beginner-friendly, and there may be other ways to achieve this.

Stay tuned.