Git: The Basics and How to Track Changes to a Project

In this paper, you’ll learn the minimum number of Git commands that you need to know in order to start being productive and get the code from your machine to the Git server. Also, you’ll learn the basic theory and how to install Git (see this article for a basic Git workflow).

What is Git?

Git is a distributed version control system (VCS).

Version control means that you use it to store versions of your documents. True, it seems it’s very popular among developers, but designers and other people (that are a bit more tech savvy) also use it to track versions of their files.

This whole distributed part is one of the things that makes it different from other VCS. Rather than have only one single place for the full version history of the software, as is common in once-popular VCS like CVS or Subversion, in Git every developer’s working copy is also a repository that can contain the full history of all changes.

One other popular VCS, that’s still used to some extent today is Subversion. You can see a detailed list of Version Control Systems here.

Git was made by Linus Torvalds, who is also known as ‘the father of Linux’.

Installing Git

To install Git, go to the official website and download the executable for your machine and run it.

To make sure your installation was successful, run the following command in your Terminal (Command prompt if you’re on Windows):

git --version

You should get something like:

git version 2.10.1

Fetching the repository

By installing Git locally you can use it to fetch remote repositories. Even though in Git you basically have the whole repository history on your device, it is crucial to have the so-called remote repository if you want to allow access to other people.

You can also install Git on your server, but few Git hosting providers have come up as industry standard: Github and BitBucket. You can think of it as being similar to Dropbox, but customized for Git.

Every remote Git repository has its own unique link. For example, this is one: https://github.com/Hitman666/MrSupervisorWebsite. If you click the link, you will see something like this:

Click the Clone or download button and make sure you see the Use SSH in the top right corner of a popup and copy the link.

Execute the following command in your Terminal, to download this repository to your computer:

git clone https://github.com/Hitman666/MrSupervisorWebsite.git

The output of the command should look something like this:

Cloning into 'MrSupervisorWebsite'...
remote: Counting objects: 7, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 7 (delta 0), reused 7 (delta 0), pack-reused 0
Receiving objects: 100% (7/7), done.

Note that the cloning operation is nothing specific to Github, you’ll have the same thing in any other solution.

Checking out the code

Now, go into the newly created MrSupervisorWebsite folder and open it in your editor.

You should see three files: index.htmnl, style.css, and README.md.

The contents of the index.html file should be this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MrSupervisorWebsite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="title">Welcome to MrSupervisorWebsite!</h1>
</body>
</html>

The contents of the style.css file, should be this:

.title {
    color: blue;
}

The contents of the README.md file should be this:

# MrSupervisorWebsite

Creating a new branch

If you would, for example, like to change the .title class to be of color 4872A2, you could. But, it’s a good practice to use something called ‘branching’ in Git:

Git has branches, and its main one is called master. You can create as many of them as you want, based on any other existing one.

To create a new branch execute the following command in your Terminal:

git checkout -b poppingTitle

The upper command is a shortcut for two commands:

git branch poppingTitle
git checkout poppingTitle

The first one creates a new branch called poppingTitle from the current branch that you’re on (in our case that’s master). The second one ‘checks it out’. Meaning, it places you on that branch. For more information, here is a basic tutorial on how to create a new branch in Git.

Adding to Git

For example, open up the style.css file, change the color, and save the file. It should look like this now:

.title {
    color: #4872A2;
}

One useful command that you’ll use a lot is git status, which will tell you the status of your Git project. If you execute that in your Terminal you will see that the style.css file was modified:

On branch poppingTitle
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

    modified:   style.css

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

As you can see, in the instructions from the output, these changes are not yet added to the commit. To do that, execute the command git add style.css. If you have multiple files, you don’t have to list all of them, you can just use git add . command. This is also known as staging the files for commit.

If you run the git status command again, you’ll see that we have changes that are ready to be committed:

On branch poppingTitle
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    modified:   style.css

Committing code

To commit the added changes to your local repository, just run:

git commit -m "Changed the title color"

Run git status command again, and you’ll see that we have a clean repository:

On branch poppingTitle
nothing to commit, working tree clean

Pushing to a remote repository

At this point, you have the change locally. To push it to your remote repository (in this case Github), execute the following command:

git push origin poppingTitle

You should get an output similar to this:

Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 299 bytes | 0 bytes/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To github.com:Hitman666/MrSupervisorWebsite.git
 * [new branch]      poppingTitle -> poppingTitle

If you check Github now, you’ll see that we’ve pushed this new branch:

Pulling the changes

To pull the changes that were made by someone on some branch, you first need to check out that branch with the following command:

git checkout [branchName]

And then, execute git pull origin [branchName] to pull down the changes from remote repository.

Of course, replace [branchName] with actual name of the branch.

Conclusion

In this short paper you learned what Git is, how to install it and how to use it for some basic tasks.

This article was contributed by Limor Wainstein

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>