Introduction to Git and version control

etwinworkshop
7 min readApr 13, 2021

Every programmer (or developer) needs to have a way to track changes in their code base.
This is even more useful if you are working on a project as a team.
In a team, it is always necessary to track contributions of different members to the code base.

We use a version control system to help us to record changes in our files.
A version control system contains a repository — a database of changes on the project, and a copy of all the files in the project.
There are different version control systems. You can read more about version control here

In this article, we shall focus on the distributed version control system.
Distributed version control is a form of version control in which the code base including its full history is mirrored on every developer’s computer.
A distributed version control system has multiple repositories and each user has their own repository and working copy of all files.
For changes to be visible to others users of a distributed version control system, a user has to commit and push their changes.
For other users to get changes that you made to your repository, they have to pull your repository from the central repository to their local repositories
The most popular version control system is Git.

“Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency”

Advantages of Git compared to other version control systems

- Git allows us to have multiple local branches that can be entirely independent of each other
- Git is fast, most git operations are performed locally
- Git is distributed, that is every user has a copy of the main repository and it is easy to replace the main repository(remote repository) in case it has any issues
- Git is free and open source
- Git has a staging area that enables you to format and review commits before completing the commit

Git has three working areas that is the working directory, staging area and the repository.
The working directory is the area where you are currently working. It contains your files.
The staging area is an intermediate area where commits can be formatted and reviewed before completing the commit.
The repository is everything in the .git/ folder. It contains all the commits that you have made in the repository.

Initially all files are in the working directory.
To add a file to the staging area, we use the git add command.
To add a file to the git repository, we commit it using the git commit command.

From working directory to repository

Enough talk, lets see Git in action.

To start tracking files in a folder, you have to first initialize git in that folder.
Git makes it super easy to do that with the git init command

We now have git initialized in our folder, and by default it creates a branch named master for us.
To start tracking with git, lets create two files(index.html and home.html) in our folder.
To list all files in our folder use the ls command(note that ls is not a git command)

Viewing files in a folder with ls

When we add the two new files, Git records the changes.
To view state of our repository with Git, we use the git status command.

Using git status

Git tells us that there are no commits yet, and it show that the two files that we just added are not tracked.
To start tracking files with git, we add the files to the staging area.
The staging area is an intermediate area where commits can be formatted and reviewed before completing the commit.
To add index.html file to the staging area, we use the git add index.html command as shown below.

Adding a file to the staging area

Git add command adds a file to the staging area. Files in the staging area are not yet committed.
To commit index.html to the repository.
We use the git commit -m “add index.html”command.

Committing a index.html file

We always add a message to our commits, in the above example, we used the -m option to tell git that we are adding a message.

Using git status to check the state of our repository.
We can see that the index.html file has been committed and the staging area is empty.
However, we can see that home.html is still not being tracked by git.

Using git status

Lets add the home.html file to the repository just like we did for the index.html file

Adding home.html file to the repository

To view information about previous commits that have occurred in the project, we use the git log command as shown below.
To get out of the git log screen, press q

Information about previous commits

If you make a mistake in your commit message, you can update it as shown below with the git commit command (with --amend and -m options) as shown below

Updating last commit message

Running git log command again shows an updated commit message

git log output

It is also possible to make a mistake while adding files to the staging area.
If you want to remove a file from the staging area, use git reset HEAD command as shown below.

Adding index.html to staging area
Removing index.html from staging area

In Git it is possible to have multiple branches that can be independent of each other. Branching in git means you diverge from the main line of development and continue to do work without messing with that main line.
For instance you can create a branch to track changes for a certain feature of your project that you can later merge with the master branch.

To view branches in your git repository, use git branch command. Below is an image of the output for the above command. Press q to go back to the working directory.

Result for git branch command

To create a user-interface branch.
We use the git branch user-interface command as shown below

Creating user-interface branch
git branch command shows two branches

As you can see, we now have two branches. But we are still working from the master branch(as marked by * before the name of the branch).
We use the git checkout user-interface command to switch to a user-interface branch as show below

Switching to user-interface branch

Lets make a few changes to the files. Note that index.html and home.html files are still visible in our new branch as shown below

Files in our working directory

Lets add some text to the home.html file.
I will use the echo command for that, you can edit the file anyway you want, just make sure you add something to the home.html file.

Add hello html to home.html file

git status shows that home.html file has been modified.
Add the file to the staging area and then commit it as shown below

Committing changes to home.html file to the repository

If switch back to the master branch. You will notice that the two branches are now different.
We use the git diff command to show the changes between commits, commit, branches, etc
For example to view the difference between master branch and user-interface branch, we use git diff master user-interface command.
The above command outputs the difference between the two branches as shown below

Difference between master and user-interface branches

To merge the two branches together.
We use git merge master user-interface command which gives the output shown below

Merging master with user-interface

To delete the user-interface branch, we use git branch -d user-interface

Thank you for reading this far.
Hope this helped you to understand how to use git to track files and to create branches.

--

--