Git Overview
Git is a standard tool that all types of developers must know how to use. It's great for collaborating on projects that involve a whole team of developers. We won't get into that aspect of Git in this activity, but you will learn about one of the other important uses of Git, which is to manage all the changes that you make to files in a project.
The video below will walk you through the steps to get started with Git on Windows.
Since we've been learning about markdown, I have summarized notes from this lesson in this markdown file. This is the file that I'm referring to in the beginning of the video.
I've also created this worksheet for you to complete after you've watched the video, and completed the activity.
Install GitBash (Git for Windows)
Click on the link below to download and install Git on your Windows computer. Just follow all the defaults when going through the install.
Configure Git
There are lots of configuration settings that you can change in Git. To see a list of all of them, enter this command:
git config --list
You should configure Git to know your name and email address. That way it can keep track of who is making changes to the file in the project.
Open the GitBash terminal and enter these commands to configure Git (make sure to use your name and email address instead of John Doe's):
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
Finally, sometimes Git will try to open a file in a text editor. You can configure it to use a specific text editor. Enter this command to set the default editor to Notepad:
git config --global core.editor notepad
Create a Project
Now we'll create a sample project so that we can start learning how to use Git. This project will be a very simple website.
Create a folder called my-sample-project.
Then add an index.html inside the my-sample-project folder. Add this code to index.html (make sure to save the file when you are done):
<html>
<head>
<title>My Proj</title>
</head>
<body>
<h1>My project</h1>
</body>
</html>
Now that we have our project started, we'll start using Git to manage all of the changes we make. Open the GitBash terminal in the project folder (my-sample-project), and enter this command to initialize a git repository (init is short for 'initialize'):
git init
If you look at the hidden files in the project folder, you'll see a folder named .git. This is the folder that Git uses to keep track of all the changes that you make to the project. It's best if you don't fiddle with this file (which is why it's hidden).
Adding (aka Staging) and Committing a File
In order for Git to start tracking a file in project you must add or stage the file (some programmers say 'add' and others say 'stage').
To add the index.html file to your Git repository, enter this command (make sure you are entering the command from the project folder):
git add index.html
The file is now ready to be 'committed'. Once it has been been committed, Git will keep track of any changes that you make to it.
Note that I said it is 'ready to be committed'. In order to commit a file, you must first add (or stage) it. This might be confusing now, but we can discuss it later when we get a little deeper into Git.
Anyway, to commit the file, enter this command:
git commit -m "Committed first version of homepage"
When you use the git commit command you must also use the -m option. The m stands for message, and you must add your commit message after the m (and put it inside double quotes).
Whenever you do a commit in Git, all of the files that have been added (staged) will be included in the commit.
Now that we've committed the homepage, Git will keep track of all the changes we make to it. Web pages are often 'living documents', which means that are changed frequently. Let's update the index.html page to look like this (note that we've just added a paragraph inside the body of the page):
<html>
<head>
<title>My Proj</title>
</head>
<body>
<h1>My project</h1>
<p>This is my project!</p>
</body>
</html>
Now we'll commit the changes to the Git repository. But first, remember, we must add/stage the file. So enter this command in the terminal (remember that the terminal should be in the project folder):
git add index.html
And now to commit the changes, enter this command:
git commit -m "Added a paragraph"
Note that if you create or update multiple files in your project, you can can add/stage them all at once like so (we'll use this soon):
git add .
Git Log
Git keeps a log of all your commits, and you can view it by entering this command:
git log
Note that we have two commits in the log and that each one starts with a line that says commit followed by a big long random looking string. This is the ID of the commit. Git assigns a random (and unique) ID to each commit. After the commit ID is the name and email of the person who made the commit (remember when we configured that?). Then the date of the commit, and finally the commit message.
Also note that the newest commits show up first (it's reverse chronological order).
The log can become quite large as a project continues, and if you don't want to scroll through all the log entries, you can press q to exit the log and return to the terminal.
Reverting to the Previous Commit
Have you ever made changes to a project and ended up making a big mess? Then you wished you could just put it back to how it was before you made the mess?
In Git, you can revert your project to the state it was in for any commit that has been made.
Let's assume that we want to revert our project to the state it was in before we added the paragraph (this is a little silly, because it would be very easy to remove the paragraph, but imagine that you made a whole bunch of changes to a file, or even a bunch of files).
To revert the project to the state it was in before the last commit, run this command (get ready for Notepad to magically appear - I'll explain what to do with it in a minute):
git revert HEAD
When you do a revert, Git doesn't remove the last commit, it makes another commit which sets the project files back to the state they were in before the last commit. This allows you to keep a history of ALL the changes you've made to a project, including reverts.
After running the last command, Notepad should have opened with some text in it. This is the message that will be used for the revert commit (remember a revert is a commit that sets the project back to a previous state). You can edit the message in Notepad, or you can leave it as is (the lines that start with # will not be included in the message, they are simply notes to help you understand what's happening). When you close Notepad, Git will complete the revert commit.
In Git, the most recent commit is also known as HEAD, so the previous command reverts the last commit that was made to our project.
Now run git log and notice that the latest commit was actually a revert:
git log
Note that you can revert your project to the state it was in after any commit. To do this you would have to get the ID of the commit that you want to rever to (by using the git log command) and then enter git revert followed by the commit ID.
Working with Multiple Files
Let's add a file to our project. Create a file named main.js in the project folder (my-sample-project) and put this code in it:
window.addEventListener("load", function(){
console.log("The page has finished loading.");
});
Now update index.html to include a link to the main.js file, like so:
<html>
<head>
<title>My Proj</title>
<script src="main.js"></script>
</head>
<body>
<h1>My project</h1>
</body>
</html>
Since our last commit, we have added main.js and updated index.html. Run this command to check the status of your project:
git status
This shows the files in your project that have been added or updated since the last commit. Note that the file names appear in red because they have not yet been added (staged). Remember that in order to commit a file, it must first be added.
Now run this command to add/stage both of the files:
git add .
Then check the status of the project again like so:
git status
Note that the file names are now colored green, which indicates that they have been added/staged and will therefore be included in the next commit. Remember that all files that have been staged/added will be included in the next commit.
Go ahead and commit the changes like so:
git commit -m "Added main.js and linked to it in index.html"
If you want more info on Git, here's a really good high-level intro to Git