Introduction

Hey what is up everyone and welcome to this blog post. Today we are going to learn Git, probably one of the most amazing tools you will ever learn as a developer and something I would recommend learning as soon as possible.

My advise for getting the most out of this blog post is to try these commands out as they are cover in you own little project. This will help solidify the commands and how they work much quicker. Now let's dive in!

NOTE THIS TUTORIAL EXPECT YOU HAVE GIT SETUP ALREADY if you don't checkout my blog post on setting up Git and Github.

What is Git

Git is an open source version controlling software that allows users to track changes to files. It was created by the creator of the Linux kernel Linus Torvalds. It is the most used and popular version controlling software and it is essential for any developer to have and know how to use.

List of all basics commands

• git init
• git status
• git add
• git commit
• git log

Walkthrough of all basic commands

So to do this walkthrough I am going to ask you to start a basic little project on the side to just test out all of these commands as we do cover each one.

So open up you terminal and lets get started! First we need to create a project:

NOTE FOR THIS I WOULD SUGGEST USING GIT BASH OR ANY UNIX BASED TERMINAL

cd Desktop
mkdir git-basics
cd git-basics

Now we have a folder called git-basics and we can start working with the git commands.

So the first thing we always need to do when working with git is create something called a git repo (short for repository).

This is basically just us telling git to start tracking files and changes inside of a project folder structure. We can do this by using the first git command as follow.

git init

git init

Initialized empty Git repository in C:/Users/User-Pc/Desktop/git-basics/.git/

This created a .git file which is a hidden file. But this is a very important file and basically tells git we have a git repo for this project.

Don't ever delete this file or you will lose the repo and all the versioning that happened inside of the project. This is why it is a hidden file to protect us from not deleting it.

So now that we have our git repo setup let's start by adding in 2 new files to our project.

touch index.html styles.css

This will create 2 new files index.html and styles.css. We will now work with these basic files throughout this blog.

Now let move to the next command. This command we will use to look at the status of our repo.

This will tell use a lot of things like what files have been changes/modified which files are new, which files have been removed etc. This is a very handy command and used almost always.

git status

git status

On branch master

No commits yet

Untracked files:
(use "git add <file>..." to include in what will be committed)
index.html
styles.css

nothing added to commit but untracked files present (use "git add" to track)

From this output we can see that we are on some branch called master, we will get into the details of branches later.

We can also see that there are no commits yet we will take a look at what happens when we commit files in the next commands.

But the important part to note here is the untracked files this shows us the 2 files we just added to the git repo. So now we can see that git it telling us "hey i see new files do you want me to track these files?".

This bring us to our next very important command and that is telling git to track files that are untracked.

git add

git add index.html styles.css

Let's run the status command again and see what happen

git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file:   index.html
new file:   styles.css

Now we see that git has marked these files as new files and they are now in the staging phase, which basically just means git is tracking them and any changes made to these files git will track.

If files are in the staging phase they are also able to be committed.

So this brings us to the next command and this allows us to commit files version to git. Basically telling git to track the current state of these files.

Currently we don't have anything inside of these files so let go and add some boilerplate in the index.html first before we commit these files.

Open the file in any text editor of your choice I will be using vscode to edit the contents of the files.

So in the index.html file I have just added the basic html boilerplate, an h1 tag saying "This is from commit 1" and linked up the styles.css file into the index.html file.

Now let us run the status command again and see what git has to say about these changes.

git status

On branch master

No commits yet

Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file:   index.html
new file:   styles.css

Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified:   index.html

Now we see some familiar things again. But something new and that is changes not staged for commit. This basically is pointing out to us that index.html was modified and the changes to this file was detected but net staged.

So once again we can run the add command and then after that we can view the status again.

git add index.html

git status

On branch master

No commits yet

Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file:   index.html
new file:   styles.css

Now we are back to where we where with all files up to date in the staging area. Now let's commit this version of the files, by running the following command.

git commit

git commit -m "this is the first commit"

[master (root-commit) 107eb62] this is the first commit
2 files changed, 13 insertions(+)
create mode 100644 index.html
create mode 100644 styles.css

With this command we must always provide the -m flag and then provide a commit message. In this case I made the commit message "this is the first commit".

Here we can see some output telling use a few things about the commit. This commit happened on the master branch it was the the first root commit and then it provided the unique commit hash 107eb62, we have committed 2 files and across these 2 files 13 line insertions happened.

Well done you have just created your first commit. Let's take a look at the status of the repo again.

git status

On branch master
nothing to commit, working tree clean

We can see the working tree is clean. This means everything was committed and git doesn't see any new changes to the repo.

If we would like to view all of the commits made on a branch we can run the following command.

git log

git log

commit 107eb620b2c26f187e0b8e03b479d17605c6d483 (HEAD -> master)
Author: Lloyd JvRensburg <thefullstackjunkie@gmail.com>
Date:   Sun Jan 30 08:20:06 2022 +0200

this is the first commit

Here we can see our first commit we made with some more information. We can see the full commit hash and that this commit happened on the master branch, we will look into the idea of branches later and come back to this (HEAD -> master) output.

We can also see the author of the commit. This is the information that was setup during the git setup process. And then we can se the commit timestamp and message.

So this workflow we went through was probably the most important workflow that you will use daily when working with git.

Let's run through it one more time this time adding some new content to both the index.html and styles.css files.

We have added a class name to the h1 tag in the index.html and in the styles.css we gave the heading-1 styles some very basic properties.

Now let do that run down of the workflow again.

git status

On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified:   index.html
modified:   styles.css
no changes added to commit (use "git add" and/or "git commit -a")

We can see git is picking up these changes. Now let's add them to staging area.

git add .

Here you can see me using a "." instead of adding the files names. This is a shortcut to adding all of the files that are new or modified to the staging area.

Let's check the status again.

git status

On branch master
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified:   index.html
modified:   styles.css

All files are staged and ready to be committed. So let's go and commit them.

git commit -m "this is the second commit"

[master 060328d] this is the second commit
2 files changed, 5 insertions(+), 1 deletion(-)

Commit made now let look at the commit logs.

git log

commit 060328d41c8dcbdc7f331296be278c08ad1bae40 (HEAD -> master)
Author: Lloyd JvRensburg <thefullstackjunkie@gmail.com>
Date:   Sun Jan 30 08:51:08 2022 +0200

this is the second commit

commit 107eb620b2c26f187e0b8e03b479d17605c6d483
Author: Lloyd JvRensburg <thefullstackjunkie@gmail.com>
Date:   Sun Jan 30 08:20:06 2022 +0200

this is the first commit

And now we can see the first and the second commit log. To shorten the output of the logs we can add a flag to the log command as follow.

git log --oneline

060328d (HEAD -> master) this is the second commit
107eb62 this is the first commit

Conclusion

Congratulations you have just learned the basics of using git and done the most important steps you will use in git.

In The next blog post we will continue on with git but in this post, we will be looking into the more advanced parts of git and that is time traveling back to previous commit versions, branching, and merging different branches.