DEV Community

Cover image for Practical Guide to using Git for Beginners
Vishwas Tyagi
Vishwas Tyagi

Posted on • Edited on • Originally published at vishwastyagi.hashnode.dev

Practical Guide to using Git for Beginners

#git #webdev #beginners #tutorial

Table Of Contents

Mike: I made some changes in my source code and my application broke. Now, I can’t undo the changes that I made earlier.

VT: You should have used git.

Mike: Git? What is that?

VT: Git is a version control system, which tracks the history of changes. As you make changes to the project, any earlier version of the project can be recovered at any time.

Mike: This sounds great! But, how can I use it?

VT: OK! I will show you.

Step 1: Install git

VT: First, download git from http://git-scm.com and install it on your computer.

Mike: OK! Done!

Step 2: Configure git

VT: Configure user information for git. This helps to set your details to all your commits.

Open a terminal (or command prompt) and run the following commands:

$ git config --global user.name "[name]"
$ git config --global user.email "[email address]"
Enter fullscreen mode Exit fullscreen mode

Make sure to replace [name] and [email address] with your real name and email address respectively.

Mike: Done!

Step 3: Create a new git repository

Mike: But what is a git repository?

VT: A Git repository is the .git/ folder inside a project. This repository tracks all changes made to files in your project and builds a history over time.

Mike: But I don’t have a .git/ folder.

VT: First, you have to initialize a git repository.

Open a terminal (or command prompt) in an empty folder (or in your project folder) and run this command:

$ git init
Enter fullscreen mode Exit fullscreen mode

Output:

Initialized empty Git repository in /path/to/your/Project/.git/
Enter fullscreen mode Exit fullscreen mode

Mike: Oh, now I got the .git/ folder. What's next?

If you are not seeing the .git/ folder, turn on the Show Hidden Files option. Usually, it is turned on with Ctrl+H.

VT: That's it. Now you have a git repository where all the changes that you make will be tracked by git.

Let's make some changes now.

Step 4: Making changes

VT: Make a new file (or change the existing one, if any) in the folder where you initialized the git repository.

VT: Let's make an HTML file (index.html), or download an HTML file from here.

Screenshot of the .git/ folder and index.html

VT: Now, you can run this command to see your changes tracked by git.

$ git status
Enter fullscreen mode Exit fullscreen mode

Output:

On branch master

No commits yet

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

nothing added to commit but untracked files present (use "git add" to track)
Enter fullscreen mode Exit fullscreen mode

Mike: Done! But what are branch master and commits mentioned in the output?

VT: Hold on! We will talk about branches in a moment. Let's first talk about commits.

Step 5: Committing changes

VT: Commits record file snapshots permanently in the version history.

Let's see how we can commit our changes to the git repository.

VT: First, we have to add our change to the "staging area".

Mike: What is the "staging area"?

VT: The staging area is like a rough draft space, it's where we can add a version of a file (or files) that we want to save in our next commit.

VT: Let's add our index.html file to the "staging area".

Run the following command:

$ git add index.html
Enter fullscreen mode Exit fullscreen mode

OR, we can add all the changes to the staging area at once by running this command:

$ git add .
Enter fullscreen mode Exit fullscreen mode

VT: Now, if we run the command git status, we will get an output something like this:

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
    new file:   index.html
Enter fullscreen mode Exit fullscreen mode

VT: We can commit our stagged changes by running the command:

$ git commit -m "[descriptive message]"
Enter fullscreen mode Exit fullscreen mode

We can add a message to describe our changes by replacing [descriptive message] in the above command.

Output:

[master (root-commit) db027ec] added index.html
 1 file changed, 13 insertions(+)
 create mode 100644 index.html
Enter fullscreen mode Exit fullscreen mode

VT: We have successfully committed our change. We can see all our commits by running the command:

$ git log
Enter fullscreen mode Exit fullscreen mode

Output:

Author: Vishwas Tyagi <vishwast8126@gmail.com>
Date:   Mon Aug 15 19:06:57 2022 +0530

    added index.html
Enter fullscreen mode Exit fullscreen mode

Mike: That's great! But what if I made a commit by mistake? How would I undo any commit?

Undo commits

VT: We can undo any commit at any time by running the git reset command.

VT: Let's see it in action.

Make a change to the index.html file to make another commit.

Add the following line to the index.html file:

<p><strong>Making a change.</strong></p>
Enter fullscreen mode Exit fullscreen mode

Save the file.

Now, on running the git status command we will get the following output:

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

no changes added to commit (use "git add" and/or "git commit -a")
Enter fullscreen mode Exit fullscreen mode

VT: Now, let's commit our change.

Run the following commands:

$ git add index.html
$ git commit -m "updated index.html"
Enter fullscreen mode Exit fullscreen mode

VT: Now as we have committed all our changes.

Suppose we made the last commit by mistake and we want to undo that commit.

First, we have to find the hash id of the commit to which we want to go back.

VT: Run the git log command to list all the commits.

commit 3d52d9625962f3147feb760ff7caccbaa2828b36 (HEAD -> master)
Author: Vishwas Tyagi <vishwast8126@gmail.com>
Date:   Mon Aug 15 21:24:29 2022 +0530

    updated index.html

commit db027ecc1d3bd09298db3b0305375047b1e31894
Author: Vishwas Tyagi <vishwast8126@gmail.com>
Date:   Mon Aug 15 19:06:57 2022 +0530

    added index.html
Enter fullscreen mode Exit fullscreen mode

VT: As we want to undo the last commit, we want the hash id of the commit before the last commit.

Screenshot showing the commit hash id

Run the following command to undo the last commit:

$ git reset [commit_hash_id]
Enter fullscreen mode Exit fullscreen mode

Replace [commit_hash_id] with the hash id of the commit to which you want to go back.

Output:

Unstaged changes after reset:
M   index.html
Enter fullscreen mode Exit fullscreen mode

VT: We have undone the commit and all the changes are sent back to the unstaged area.

Mike: Oh, I got it.

VT: If you want to discard those changes, you can run the following command:

$ git restore index.html
Enter fullscreen mode Exit fullscreen mode

Mike: Great! I got my index.html file restored to the initial state.

Mike: But what are the "branches" that you mentioned earlier?

VT: I think, it's the right time to talk about "branches."

Git Branches

visual representation of git branches

VT: In Git, a branch is a new/separate version of the main repository.

Let's say we have a large project, and we need to work on a new feature.

We can create a new branch (let's say feature) and then we can work on that feature without affecting the main branch.

$ git branch [branch_name]
Enter fullscreen mode Exit fullscreen mode

If we are satisfied with our work, we can merge our branch with the main branch.

If not, then we can return to the main branch and discard the changes we made on the feature branch.

Mike: I am getting it, but I want to see it in action.

VT: Ok, let's get into it.

Suppose we want to add an image to our index.html.

Create a new branch with the name image by running the following command:

$ git branch image
Enter fullscreen mode Exit fullscreen mode

We can list all the branches by running the following command:

$ git branch
Enter fullscreen mode Exit fullscreen mode

Output:

  image
* master
Enter fullscreen mode Exit fullscreen mode

It lists all the branches in the current git repository.

Here, the master is the default main branch.

The asterisk * shows which branch we are currently working on.

To switch branches, run the following command:

$ git checkout image
Enter fullscreen mode Exit fullscreen mode

Output:

Switched to branch 'image'
Enter fullscreen mode Exit fullscreen mode

VT: Now, we can make changes and they will affect only the current branch (image). They will not affect the main branch (master).

Add the following line to index.html:

<img src="https://images.unsplash.com/photo-1471897488648-5eae4ac6686b" height="300" width="200">
Enter fullscreen mode Exit fullscreen mode

Commit the changes:

$ git add .
$ git commit -m "added image in index.html"
Enter fullscreen mode Exit fullscreen mode

VT: Our change is committed but it is only in the image branch. It will not affect the master branch.

We can see this by switching the branch to master.

$ git checkout master
Enter fullscreen mode Exit fullscreen mode

VT: If we inspect the index.html file after switching to the master branch, we can see that the image we added in the index.html file is not there.

This is because the image was added in the image branch.

Mike: How would I merge both the branches?

Merging branches

visual representation of git branch merge

VT: If we are satisfied with the changes we made in the separate branch, we can merge that branch with the master branch by running git merge [branch_name].

First, switch to branch master:

$ git checkout master
Enter fullscreen mode Exit fullscreen mode

Then run the following command to merge the branch image to the branch master:

$ git merge image
Enter fullscreen mode Exit fullscreen mode

Output:

Updating fa6e17e..c5a4da8
Fast-forward
 index.html | 1 +
 1 file changed, 1 insertion(+)
Enter fullscreen mode Exit fullscreen mode

Deleting a branch

VT: If we no longer want a branch and we want to delete it, we can simply run the git branch -d [branch-name] command.

To delete the branch image in our project:

$ git branch -d image
Enter fullscreen mode Exit fullscreen mode

Output:

Deleted branch image (was c5a4da8).
Enter fullscreen mode Exit fullscreen mode

VT: That's all.

Mike: Oh, that's a lot for me, but by practicing it a few times, I can make it through.

Further reading...

Summary

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.

In this article, you learned about git repository, git commits, git branches, and how the whole process of version control works.

I hope you enjoyed the article and learned something new. If you want, you can also follow me on LinkedIn or Twitter.

Cheers and see you in the next one! ✌️

Top comments (4)

Collapse
 
michaeltharrington profile image
Michael Tharrington •

Appreciate ya sharing this one. It's a super helpful guide!

Collapse
 
vishwastyagi profile image
Vishwas Tyagi •

Thank you, it makes my day to hear that.

Collapse
 
msnmongare profile image
Sospeter Mong'are •

Thank you for sharing this. I appreciate

Collapse
 
vishwastyagi profile image
Vishwas Tyagi •

I am glad you found it helpful.

Read next

motuncoded profile image

How to create Subscribe to Newsletter with Reactjs and Supabase

Adijat Motunrayo Adeneye -

arjun98k profile image

Introduction to JavaScript

arjun -

timesofasi profile image

7 Game-Changing ChatGPT Prompts to Solve Any Problem

TimesofAsi -

cryptosandy profile image

How to Debug Code Effectively: Tools and Techniques

Crypto.Andy (DEV) -