A tutorial: Git and GitHub

A simple tutorial for the most important tool of a developer

4. Using Git

4.1 Configuring Git and cloning your remote Repo

Disclaimer: For the purpose of this tutorial, I will use my GitHub account and Repo to demonstrate the process. The following instructions are for Windows.

After we have successfully installed our IDE and Git, we will now configure Git on VS Code using git config and clone our repo using git clone

Step 1: Open up VS Code. Press Ctrl + Shift + ` to open the terminal

Step 2: Type in: git config -l and press Enter to check if Git has been properly installed. If your terminal shows a list like below, Git is ready to go. To get out of the config, press Down until the end of the list, then press Q

Step 3: Next, type in git config --global user.name [your GitHub user name] and press Enter

Step 4: Then, type in git config --global user.email [your GitHub email] and press Enter If your terminal shows no error like below, your account config is now configured.

Step 5: Type in cd "C:\Users\[Your Windows Username]\Desktop" (with the brackets) and press Enter to set Desktop as your current directory

Step 6: Type in git clone https://github.com/[your GitHub user name]/[your repo] and press Enter to clone your remote Repo to your local machine. Note: If there is nothing in your Repo, the warning: “warning: You appear to have cloned an empty repository.” will appear. This is normal and is nothing to be worried about

Step 7: Click on the “File” tab at the upper-left corner then click on Open folder (you can also press Ctrl + K then immediately Ctrl + O). A window will open, navigate to the directory where you cloned your Repo to, in this case Desktop, and select the folder with the same name as your Repo, then click on “Select Folder”

After you have selected the folder with your repo name, a column on should appear on the left, with the repo folder on it.

4.2 Using basic git commands: add, commit, push

After having cloned our remote repo to the local machine, it's time we learn how to use Git to our advantage. First, we will learn how to use git add, git commit and git push. Below is a simple diagram that would help you understand how this works

Let's try to put this to practice:

Step 1: First, let’s create a file called FirstFile.txt. Click on the name of your repo on the column on the left and expand it, then click on the first icon next to the name to create a new file. Name the file FirstFile.txt

Step 2: Type in some content to the file as you wish, then press Ctrl + S to save the file. See that white dot next to the FirstFile.txt tab? That means the file isn't saved yet. After saving, the dot will disappear

Next, we will upload this file to the online GitHub repo:

Step 1: Open the terminal with Ctrl + Shift + `

Step 2: Type in git add . (This will add every single file in your folder) or git add “File Name” with the bracket (This will only add a single file) and press Enter

Step 3: Type in git commit -m “[Your comment]” with the bracket (This is to help you remember what changes” and press Enter

Step 4: Type in git push (This will upload your file(s) to the remote repo) and press Enter

Step 5: Since this is your first time pushing, a window will pop-up prompting you to “Sign in with your browser”. Click on the prompt.

Step 6: Once the website loads, click on Authorize “GitCredentialManager”

Step 7: Now if you go back to VS Code, you will see that your git push command has been successfully ran

And voila! The file is now uploaded to your repo. You can check by going to https://github.com/[your GitHub user name]/[your repo]

4.3 Resolving conflicts

When you are working with many collaborators, file conflicts might arise. These conflicts happen when the file version on the repo is different from the one you are having on your local machine. For example, let’s say on your Repo, there is already a file called “conflict.txt” uploaded by another collaborator.

At the same time, on your local machine, you also have a “conflict.txt” file with your local content on it.

If you try to push your local file, an error will occur like the image below

To resolve such conflicts, we have to review the content of both local and remote version to determine which version of the file to keep, by using git add, git commit, git pull and git push command

Step 1: Type in the console git add . and press Enter

Step 2: Type in the console git commit -m "[Your message]" and press Enter

Step 3: Type in the console git pull and press Enter. After you press Enter, the interface will change and show 4 options: “Accept Current Change”, “Accept Incoming Change”, “Accept Both Changes” and “Compare Changes”

If you want to use the local content:

Step 4: Click on Accept Current Change, and press Ctrl + S to save

Step 5: Repeat Step 1 and Step 2, then type in git push and press Enter. This will push the local file to the remote repo and replace the file on it

If you want to use the online content:

Step 4: Click on Accept Incoming Change, and press Ctrl + S to save the remote content to your local file

Step 5: Repeat Step 1 and Step 2, then type in the console git push and press Enter

If you want to accept both content (combined content):

Step 4: Click on Accept Both Changes, and press Ctrl + S to save the combined content to your local file

Step 5: Repeat Step 1 and Step 2, then type in git push and press Enter. This will push the combined file to the remote repo and replace the file on it

After having practised this more and more, you will be able to resolve conflicts like a pro!

4.4 Branching

Branching is a very useful utility on GitHub that allows users to expand upon their current projects (i.e. adding new feature) without tampering with the main source code. For example, if you already have a fully functional project on the main branch, but want to safely code and add a new feature to the project without touching the existing code, branching will be your saviour. In essence, branching will create a complete duplicate of everything from the main branch, which would allow you to work on the new feature completely isolated from the original code.

Branch creation

To create a new branch, type in git branch [branch name] and press Enter. A branch with all your files duplicated has been created. However, this branch is only created locally.

To push this branch to your remote repo, type in git push --set-upstream origin [branch name] and press Enter

Navigating through branches and working on the new branch:

If you need to navigate to another branch, or back to the main branch, you can use the command git checkout [destination branch]

For example: Before you can work on the new branch, you have to navigate to the branch you just created by typing in git checkout [branch name] and press Enter.

Once you are now on the [branch name] branch, and all of your work will only be done on this branch, keeping all your code from the main branch safe. Working on a branch is identical to working on the main branch, so if you need help, scroll up!

If you need to go back to the mainbranch, similarly, type in git checkout main and press Enter

Deleting branches

If you want to delete a branch, do the following steps:

Step 1: If you are on the branch you want to delete, go back to the main branch by typing in git checkout main and press Enter

Step 2: Type in git push origin --delete [branch name] and hit Enter (This will delete the branch from the remote repo)

Step 3: Type in git branch -D [branch name] and hit Enter (This will delete the branch locally)