Git Tutorial for Beginners

What is Git?

Git is an open source version control system that allows you to easily record different versions of your project as you develop your project and also allows you to go back to a stable/consistent version of the project if you screw things up.

You can download git from https://git-scm.com/

After downloading simply follow the installation guide. Once git is installed, search for git bash and open it.

Now, create a project folder anywhere you like

mkdir git_tutorial

Now, go into that folder

cd git_tutorial

Basic Workflow with Git

1. Initialize git in the project folder

We want git to track all the changes made in this project folder so that we can save different versions of the project and also go back to any version when needed. For this we initialize the project folder with the following command:

git init

The output will be:

Initialized empty Git repository in /path/to/project

2. Create files in this project folder

In this example, we will create 2 files - index.html and about.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About</title>
</head>
<body>
    <h1>About</h1>
</body>
</html>

3. Check if there are any changes in the project with git status

Now that we have created files in the repository, git will track this new changes. So when we execute git status it will show us the changes made in the project folder.

Output is as follows:

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

        about.html
        index.html

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

As we have created the two files index.html and about.html, so you can see that git is showing those files as untracked.

We will now add these files to staging area and then commit it so that git records/saves the current state of the repository.

4. Add the files to Staging Area

The command git add filename adds the files to the staging area.

When you think you have finished work on a file, you add the file to the staging area with git add filename. You can also add mutiple files to the staging area at once. Also you can modify a file and again add it to the staging area.

The use of staging area is that it allows partial commits, that is, only files that are in staging area are recorded by git as a commit.

Example, if we wanted only index.html to be commited but not about.html as we were still working on about.html then we would simply add only index.html to the staging area with git add index.html and then commit it. So only index.html will be recorded as a change by git and not about.html.

In our case we want to add all the files so we run:

git add .

(.) indicates All. So in our case both files are added to the staging area.

Now if we run git status we see the following output:

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   about.html
        new file:   index.html

As you can see, now the files are added to the staging area and waiting to be commited.

5. Commit all the changes made

Finally once the changes are reviewed and tested, we finally want git to record the state so that we can come back to the current state if we want to anytime.

git commit -m "Created index and about page with a header"

-m flag is used in the commit command to add a small message for us to know what that commit is.

Only files that are in staging area gets commited with the commit command

You can see all your previous commits with the command git log


Common Workflow

So generally this is all you will be doing for any project you are working on:

# Make changes/updates/new features
git status
git add .
git commit -m "New commit message"

With the above commands you will be able to easily create versions for your project so that you can go back anytime to any point in time in your project.

So let's create a new page contact.html with some content.

Now we add and commit the changes:

git add .
git commit -m "Created contact page"

Now execute git log to see your commit history

We see the following output which has 2 commits we made so far:

commit 7f72ef89c8a9f96082eca940882749582d9869227
Author: Username
Date:   Sun Oct 21 20:15:53 2018 +0530

    Created contact page

commit 6f689e7b035991989c5bc21003980a9eacf7e11c
Author: Username
Date:   Sun Oct 21 16:29:54 2018 +0530

    Created index and about page with a header

So now if you decide that you want to go back to the first commit then simply execute:

git reset --hard 6f689e7b0359

6f689e7b0359 is the starting part of first commit. You do not need to specify the entire commit string.

As soon as you hit the above command you will notice that the contact.html page disappears. This is because we are at the first commit now and at that time we did not create the contact.html file.

So hard reset undoes the changes in files and also removes all the commits from the commit history that appear after the commit that is specified for hard reset. It is used to go back in time to previous state of code or commit.

Note: Use reset --hard very carefully as it will delete all your data/files which were created after the commit you specify.

You can also use the reset command with the soft flag:

git reset --soft 6f689e7b0359

The soft reset is used to undo commits from the commit history but does not undo the changes. So changes remains the same only commits disappears from the commit history. It is useful when you need to commit multiple times for small changes or typos.

Example, Let's say we created and commited the new contact page but forgot to add a header. So instead of adding a header and creating yet another commit we can use git reset --soft 6f689e7b0359 to go back in the commit history but our changes remains the same. So now we add the header in the contact page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact</title>
</head>
<body>
    <!-- Added a header -->
    <h1>Contact</h1>
</body>
</html>

Now we add and commit the changes:

git add .
git commit -m "Created contact page"

So intead of 3 commits we have only 2 commits which makes more sense as adding a header in contact page was not a big change to be committed.


So now you have learned how to:

  • Initialize a project with git init
  • Add files to the staging area with git add .
  • Commit changes to the project with git commit -m "message"
  • Undo all changes and commits with git reset --hard {commit}
  • Keep the changes but only undo the commits with git reset --soft {commit}

I hope you have learned something out of this post.


Tags: