What is Git?

Git is a popular version control system.

It is used for:

  • Tracking code changes
  • Tracking who made changes
  • Coding collaboration

Git Getting Started

Git Install

You can download Git for free from the following website: https://www.git-scm.com/

Configure Git

Now let Git know who you are. This is important for version control systems, as each Git commit uses this information:

1
2
git config --global user.name ""
git config --global user.email ""

Initialize Git

1
2
3
mkdir myproject
cd myproject
git init

Now create a file, index.html, and add it in this folder.

Then we check the Git status and see if it is a part of our repo:

1
2
3
4
5
6
7
8
9
10
git status
On branch master

No commits yet

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

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

Now Git is aware of the file, but has not added it to our repository!

Files in your Git repository folder can be in one of 2 states:

  • Tracked - files that Git knows about and are added to the repository
  • Untracked - files that are in your working directory, but not added to the repository

Git Staging Environment

As you are working, you may be adding, editing and removing files. But whenever you hit a milestone or finish a part of the work, you should add the files to a Staging Environment.

For now, we are done working with index.html. So we can add it to the Staging Environment:

1
git add index.html
1
2
3
4
5
6
7
8
git status
On branch master

No commits yet

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

Now the file has been added to the Staging Environment.

Using --all instead of individual filenames will stage all changes (new, modified, and deleted) files.

The shorthand command for git add --all is git add -A

Git Commit

Adding commits keep track of our progress and changes as we work. Git considers each commit change point or “save point”. It is a point in the project you can go back to if you find a bug, or want to make a change.

1
2
3
4
5
6
git commit -m "First release of Hello World!"
[master (root-commit) 221ec6e] First release of Hello World!
 3 files changed, 26 insertions(+)
 create mode 100644 README.md
 create mode 100644 bluestyle.css
 create mode 100644 index.html

Git Commit without Stage

Sometimes, when you make small changes, using the staging environment seems like a waste of time. It is possible to commit changes directly, skipping the staging environment. The -a option will automatically stage every changed, already tracked file.

1
2
3
git commit -a -m "Updated index.html with a new line"
[master 09f4acd] Updated index.html with a new line
 1 file changed, 1 insertion(+)

Git Commit Log

To view the history of commits for a repository, you can use the log command:

1
2
3
4
5
6
7
8
9
10
11
12
git log
commit 09f4acd3f8836b7f6fc44ad9e012f82faf861803 (HEAD -> master)
Author: w3schools-test 
Date:   Fri Mar 26 09:35:54 2021 +0100

    Updated index.html with a new line

commit 221ec6e10aeedbfd02b85264087cd9adc18e4b26
Author: w3schools-test 
Date:   Fri Mar 26 09:13:07 2021 +0100

    First release of Hello World!

Git Branch

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

Branches allow you to work on different parts of a project without impacting the main branch.

When the work is complete, a branch can be merged with the main project.

New Git Branch

We are working in our local repository, and we do not want to disturb or possibly wreck the main project.

So we create a new branch:

1
git branch hello-world-images

Now we created a new branch called “hello-world-images“

Let’s confirm that we have created a new branch:

1
2
3
git branch
  hello-world-images
* master

checkout is the command used to check out a branch. Moving us from the current branch, to the one specified at the end of the command:

1
2
git checkout hello-world-images
Switched to branch 'hello-world-images'

We are currently on the branch hello-world-images. We added an image to this branch, so let’s list the files in the current directory:

1
2
ls
README.md  bluestyle.css  img_hello_world.jpg  index.html

Now, let’s see what happens when we change branch to master

1
2
3
4
git checkout master
Switched to branch 'master'
ls
README.md  bluestyle.css  index.html

The new image is not a part of this branch.

Emergency Branch

Now imagine that we are not yet done with hello-world-images, but we need to fix an error on master.

I don’t want to mess with master directly, and I do not want to mess with hello-world-images, since it is not done yet. So we create a new branch to deal with the emergency:

1
2
git checkout -b emergency-fix
Switched to a new branch 'emergency-fix'

Now we have created a new branch from master, and changed to it. We can safely fix the error without disturbing the other branches.

We have made changes in this file, and we need to get those changes to the master branch.

stage the file, and commit:

1
2
3
4
git add index.html
git commit -m "updated index.html with emergency fix"
[emergency-fix dfa79db] updated index.html with emergency fix
 1 file changed, 1 insertion(+), 1 deletion(-)

Git Branch Merge

We have the emergency fix ready, and so let’s merge the master and emergency-fix branches.

First, we need to change to the master branch. Now we merge the current branch (master) with emergency-fix:

1
2
3
4
5
6
7
git checkout master
Switched to branch 'master'
git merge emergency-fix
Updating 09f4acd..dfa79db
Fast-forward
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

As master and emergency-fix are essentially the same now, we can delete emergency-fix, as it is no longer needed:

1
2
git branch -d emergency-fix
Deleted branch emergency-fix (was dfa79db).

Merge Conflict

Now we can move over to hello-world-images and keep working. Add another image file (img_hello_git.jpg) and change index.html.

Now, we are done with our work here and can stage and commit for this branch:

1
2
3
4
5
git add --all
git commit -m "added new image"
[hello-world-images 1f1584e] added new image
 2 files changed, 1 insertion(+)
 create mode 100644 img_hello_git.jpg

We see that index.html has been changed in both branches. Now we are ready to merge hello-world-images into master. But what will happen to the changes we recently made in master?

1
2
3
4
5
git checkout master
git merge hello-world-images
Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

The merge failed, as there is conflict between the versions for index.html. Let us check the status:

1
2
3
4
5
6
7
8
9
10
11
12
13
git status
On branch master
You have unmerged paths.
  (fix conflicts and run "git commit")
  (use "git merge --abort" to abort the merge)

Changes to be committed:
        new file:   img_hello_git.jpg
        new file:   img_hello_world.jpg

Unmerged paths:
  (use "git add ..." to mark resolution)
        both modified:   index.html

This confirms there is a conflict in index.html, but the image files are ready and staged to be committed.

So we need to fix that conflict.

The conflict has been fixed, and we can use commit to conclude the merge:

1
2
git commit -m "merged with hello-world-images after fixing conflicts"
[master e0b6038] merged with hello-world-images after fixing conflicts

And delete the hello-world-images branch:

1
2
git branch -d hello-world-images
Deleted branch hello-world-images (was 1f1584e).

Git Reset

reset is the command we use when we want to move the repository back to a previous commit, discarding any changes made after that commit.

First thing, we need to find the point we want to return to. To do that, we need to go through the log.

To avoid the very long log list, we are going to use the --oneline option, which gives just one line per commit showing:

1
2
3
4
5
6
git log --oneline
e56ba1f (HEAD -> master) Revert "Just a regular update, definitely no accidents here..."
52418f7 Just a regular update, definitely no accidents here...
9a9add8 (origin/master) Added .gitignore
81912ba Corrected spelling error
3fdaa5b Merge pull request #1 from w3schools-test/update-readme

We want to return to the commit: 9a9add8 (origin/master) Added .gitignore, the last one before we started to mess with things.

We reset our repository back to the specific commit using git reset *commithash* (*commithash* being the first 7 characters of the commit hash we found in the log):

1
git reset --hard 9a9add8

Now let’s check the log again:

1
2
3
4
git log --oneline
9a9add8 (HEAD -> master, origin/master) Added .gitignore
81912ba Corrected spelling error
3fdaa5b Merge pull request #1 from w3schools-test/update-readme

Git Undo Reset

Even though the commits are no longer showing up in the log, it is not removed from Git.

If you know the commit hash you can reset to it:

1
2
git reflog
git reset e56ba1f

Github

Git push into GitHub

First, we create a remote repo in Github. Now we are going to push our local repo to Github.

git remote add origin *URL* specifies that you are adding a remote repository, with the specified URL, as an origin to your local Git repo.

1
git remote add origin https://github.com/FerryChan666/Project.git

Now we are going to push our master branch to the origin url, and set it as the default remote branch:

1
git push origin master

Now, go back into GitHub and see that the repository has been updated.

Git Pull from GitHub

Any time you start working on a project, you should get the most recent changes to your local copy.

With Git, you can do that with pull.

1
git pull origin

GitHub Branch

Create a New Branch on GitHub

On GitHub, access your repository and click the “master” branch button.

There you can create a new Branch. Type in a descriptive name, and click Create branch: