Getting started with Git -a dead simple tutorial for beginners

Getting started with Git!

The very first lesson - Git is your friend. And it is never too late to learn something new!

This guide is specially designed for beginner fellow developers.

When I started my journey as a Frontend developer, I wasn't aware of this amazing tool and learned to use Git much later.

I highly recommend you to make yourself familiar with Git as early as possible!

What is Git?

Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. - Wikipedia

Git repositories

The sole purpose of Git is to intelligently manage a project and source codes with complete revision history and with full control as they change over time. Git stores this information in a repository.

Why do I need to use Git?

Let's answer this question with an example.

Say, we start a web application project. We start creating files like header, navigation, content blocks, footer, stylesheet, and script, etc. as we progress with the project.

Then we create a number of other pages with critical features like inquiry form, contact form, CTA buttons, slider, emailing function, etc.

Meanwhile, we make many changes while the project is still in development or later upgrade features of the project.

As we know, this happens very often as we progress with the development of the project and make difficult to keep the track of changes.

Sometimes we make mistakes, or code doesn't work as intended even though it was working completely fine a few minutes ago.

Git at rescue - With Git, we can track each and every change and restore a working version of a feature or design.
We can create a branch for an additional feature without touching the working version until it is 100% safe to be implemented in the project.

Cool. But the best is yet to come.

Team collaboration - The major advantage of Git is that it allows your team members to work together on your project with the entire revision on centralized cloud storage.

When any member of a team wants to develop a module, they simply create a new branch and start developing. Each team members can work freely in their isolated branch. Once the module is developed and tested; it is merged with the master branch ensuring that the master branch is always production-ready.

Git enables us to track exactly what changed and who made that change! We can browse who did what(git diff) or split the project modules and improve the codebase altogether.

An additional benefit - Git repositories work as a backup. Each team members have their own working version of the project and the master branch stored in the cloud.

Local vs Remote repository

Local repository -

The local Git repository is our project residing in our system and it contains all the commits, branches, merges, etc. We may choose to work only with our local Git repository with full features that Git provides. When working with a local repository, we do not need to push the changes.

Remote repository -

The remote repository (i.e. GitHub, Bitbucket) allows to publish and share our code to the distributed system and enable others to read or write. By this way, each user has a local copy of the repository and flexibility to work with their own repository.

If you are not familiar about how to store our local repositories remotely on GitHub, here is a simple tutorial on how to use GitHub.

I am convinced. Now tell me how to start!

Okay, Okayyy. Let's Git going ;)

We are going to:

1. Install and setup Git
2. Create the first repository
3. Add files and stage the changes
4. Commit and
5. Push (to the remote repository)

The simplest way to start with git -

Step 1: Install and setup Git

Download Git
Git is available for Mac, Windows and Linux/Unix. Depending on your operating system download Git and follow the installation window.

We will learn to use command-based flow in Windows.

Step 2: Create the first repository

Once installed, create a new directory with our project name and open it. The git init command simply initializes an empty Git repository or re-initializes an existing one.

Note that, initializing git init in the existing project won't replace or modify any previous files inside the project.
Right-click and select Git Bash option to initialize Git inside the project folder - 

git init

Now, if we check the project directory, we will see a .git directory with sub-directories and some other files.

Next, we will configure the Git repository. Generally, we need to set up this only once if we are using --global option and our Git configuration will be set globally by default for all projects we create, associated with that system.

Let's set our email and name globally.

Set email - 

git config --global user.email "your-email@example.com"

Set name - 

git config --global user.name "Your Name"

We can also configure the repository-specific username and email.  For that, just drop --global from the command. In this case, we need to set an email and name for each repository we create.

We can check the configurations of the repository by running the command - 

git config --list

If you want to change the email, just run the same command as above you used to set the email with another email address.

Step 3: Add untracked files, directories to the staging area

Let's create few files inside the project directory

- index.php
- about-us.php
- readme.md and
- style.scss

and run -

git status

The git status command simply tells us the status of the repository.

It will show what has been modified, created or removed. We can see that we have untracked files which we created recently.

Now we need to add all those files and directories which we just created to the staging area. Which means Git will track all the change we have made so far in our repository.

There are two ways to stage changes to the staging area.

1. git add <directory_name> and git add <file_name>
2. git add . or git add -A (stages all the changes)

Using the first option, we can manually stage each directory and files while the second option will stage all the changes (added or deleted) files and directories.

Let's add these files to the staging area by running the "git add ." command -

git add .

Now if again run git status command, we see the newly created file has been tracked.

We must always use the add command before committing.

Step 4: Commit the changes

Now, we commit these changes by running the command git commit with a message inside quotes -

git commit -m "Initialize and create index, about, readme and style file"

The text in "Initialize and create index, about, readme and style file" is a commit message that is stored with the particular commit hash. Commit is a kind of record or snapshot of what files have changed since the last time commit. 

This allows us to keep the descriptive revision of changes over time.  

Commit often, perfect Later.

Remember, Git is responsible only when we commit! We should commit whenever we are at the stage of our development which we want to remember! 

Whenever we make any significant changes like creating a component, a feature or any modifications, we must commit to keeping the revisions under control.

Be frequent. Do not wait for an entire module or a feature to be completed. More we commit, more the detailed revisions we have.

We should always write a descriptive message about what we did possibly with the reason. It will be helpful for other fellow contributors.

Once we have modified the repositories by adding/deleting or editing files, we add those changes to the staging area and commit it by writing a descriptive message about what we did.

Step 5: Push the changes to the remote repository

Now, it is time to push the changes to the remote repository. 

Here is a simple tutorial on how to use GitHub to push the local repository and revisions to the remote repository.

Currently, our local repository is not connected to any remote server (i.e. Bitbucket, Github) where we can push and store the changes, so we connect the remote repository first -

git remote add origin <server>

<server> is our Github or Bitbucket repository URL. I.e. - https://username@bitbucket.org/username/my-repo.git

Once this is done successfully, let's push these changes to the remote repository 

Note: We do not need to specify the <server> again for this repository.

git push origin master

Now whenever we make changes to the project, we simply use..

git push

.. to push the changes to the remote server. All our project files are now pushed to the remote repository.

Whenever we start a new project we need to follow the same steps.

A quick recap -

Create a project directory, go into the directory and initialize Git

mkdir my-project
cd my-project
git init

Create files in the project

touch readme.md

Add files to staging area ie; readme.md

git add .

Commit changes

git commit -m "Initial commit with readme"

We connect the server repository -

git remote add origin <server_address>

and push

git push origin master

Great. Now every time we make any modifications in our local repository, we need to push it to the remote repository.

Can I use Git without GitHub?

Yes! Git is a self-sufficient tool in itself. If you do not wish to host your repository to any remote repository hosting platform, it is completely fine. We can still use Git with its full features to manage the repository locally.