How to commit and push your changes to your GitHub repository in VScode
In this article I will walk you through the proper steps that will demonstrate to you how to commit and push your changes to your remote repository on GitHub using your VScode in few easy steps.
In this article we will assume that you have an active GitHub account. If you currently do not have an account with GitHub you can easily create one by going here: GitHub
Additionally, we will assume that you have a remote repository on GitHub that you have cloned locally on you machine/computer.
To learn how to create a remote repository on GitHub as well as clone it locally you can view this article for a quick step-by-step demonstrating how to do so.
How to create a repository on GitHub and clone it locally using VScode
This article will walk you through step-by-step showing you how to create a remote repository on GitHub and then clone…
1 — Open repository in VScode
I have a remote repository on GitHub “githubrepotutorial” and I have already cloned it locally. The repository is simple and only has two files, helloworld.js and a README.md.
In the screen shot below you will see the repository opened in VScode. If you look at the lower left hand side of the screen shot where the red arrow is pointing will notice that is says “master”. This is the branch that you are currently in. Any changes that you are going to make will belong to that repository.
For this article we will make a change to the helloworld.js file, commit it to our local repository and finally push it to our remote repository.
2 — Quick background about Git
Git is a very powerful tool and by far it is the most popular/used version control system. Git is a distributed version-control system for tracking changes in source code during software development.
Each developer can clone the remote repository locally which mean each developer will have a full version of the repository on his/her machine. Developer can work offline and all commits will be done to the local repository. Once the developer is ready to push his/her changes to the remote repository, the developer will perform a push request.
3 — Stage a change
In VScode, locate the helloworld.js file, open it and modify the content of the file. In my case, I have added code inside the existing “helloworld” function inside the js file.
As soon as you save your change to the file you will notice a badge appear on the source control tab in VScode with the number of files that have been modified by you. In this case, we have only made a change to one file and the number in the badge is 1 (as shown in the screenshot below).
Click on the Source Control tab to switch over to the source control view. In the screen shot below you will notice the helloworld.js file under the CHANGES section. This section will display all the files that you have made changes to.
If you look to the right of the helloworld.js you will see 4 icons. The first icon from the left will open the file if you click on it.
The second icon from the left will revert the changes to the file if you clicked on it.
The third icon from the left “+” will stage the changes. You will not be able to commit to you local repository without staging your changes.
The fourth icon from the left will indicate the type of change to the file. M is an indication that the file has been modified. If we add a new file, then an A will be displayed for add.
If you attempt to commit your changes by clicking on the “✓” checkmark icon located at the top by the SOURCE CONTROL title you will get the “There are no staged changes to commit” warning message as shown in the screen shot below.
Click on the “+” icon to stage your changes and get them ready for a local commit. Once you clock on the “+” you will notice that the file you have modified has been moved to the “STAGED CHANGES” section.
4 — Commit your staged change to the local repository
Before committing your changes to you local repository it is a good practice to compare your changes to ensure that you are committing precisely what you have changed.
If you decide to not commit this change you can easily unstage by clicking on the “ — ” icon next to the file you are wanting to unstage and the file will be moved back under the CHANGES section.
To compare the changes inside the helloworld.js file, simply click on the file under the “STAGED CHANGES” section and the compare window will appear to the right hand side as shown in the screen shot below.
The compare tool in the screen shot below shows what was changed in the file. In our case, we have added a new alert(‘Hello world!’) function inside an existing function.
To continue with the local commit (remember when we commit code, we are actually committing it to our locally cloned repository. We will then have to push the commit to the remote repository) you can click on the “✓” icon.
Before you do that, I highly recommend that you add a message before your commit. This message can be brief which will explain at a high level what your commit is about. This is very helpful in the future when you look back at you commits.
Once you add your comment click on the “✓” icon. Immediately after, the STAGED CHANGES section will no longer appear because the staged changes have not been committed locally.
5 — Push your commits to the remote repository on GitHub
If you look at the screen shot below where the arrow is pointing, you will see an arrow pointing down with a zero next to it. This is an indication that there are no code on the remote repository that need to be downloaded locally.
The other arrow pointing up with a 1 next to it is an indication that we currently have 1 commit that has not yet been pushed to the remote repository.
Alright! Now we want to update our remote repository with our changes. To do that locate the “…” icon and click on it. A menu will pop up with multiple options. What we need in this case to push the commit to the remote repository. Click on the “Push” button to send our changes to the remote repository.
Once the commit has been successfully pushed to the server you will notice that up and down arrows have now disappeared from the bottom of VScode. This is an indication that the commit has been successful.
6 — Confirm your commit on GitHub
To confirm that your commit has made it to the remote repository on GitHub you will need to login to GitHub and open the repository where you have pushed your commit to.
Below is a screen shot of repository page and if you noticed the section marked in red you will see that there are three commits. To view all commits you can simply click on it.
Once you click on the commits you will be redirected to the page where all commits are shown. In the screen shot below you will see our commit marked in red.
If you clock on the commit, GitHub will show you all of the changes that were made and were part of the commits as shown in the screen shot below.
And voila this is how you can commit changes locally and push them to your remote repository on GitHub.