Introduction to Version Control

In this demo, you’ll explore a repository for a bread recipe. Remember, Git isn’t only for software projects. This repository contains both text and image files. If you want to follow along, be sure to find the monkey.zip file in the materials for this lesson and expand it somewhere on your computer. You’ll use all of the commands shown here later in the module, so there’s no need to memorize them yet. This is just a tour of some of the main features of a repository.

Using Terminal.app, you can execute

ls -a and see that there’s a recipe.md file that holds the bread recipe. There’s also a readme.md for the project and a directory of images. Last, there’s a hidden .git folder that holds the repository.

To begin to explore this repository, you can use git status to see that you’re on the main branch and that there are no uncommitted changes.

In GitHub Desktop, this is the “Changes” pane, and you can see that you’re on the main branch by looking at the “Current Branch” pane at the top.

In the terminal, you can use git log to see a list of all the recent changes.

In GitHub Desktop, you can see the same information in the “History” pane.

Now, look more closely at the most recent commit. You can see the name of the person who made the commit and the date they made it. The commit message is “update readme”. The commit also has a long hash string.

You can see in GitHub Desktop the short version of the hash: It’s the first few characters. On a smaller project, it’s fine to refer to a commit by its short hash. But if you want to guarantee you’ve got the correct commit, use the long hash. In the terminal, the commit is marked with HEAD -> main, which means that this commit is the last commit on the main branch. In GitHub Desktop, it’s the commit at the top of the history list.

In the main window of GitHub Desktop, you can see that one file was changed as part of the recent commit. The text it added is visible in green in the right-hand pane.

In the terminal, you use git diff to see this information. The diff command shows the changes between two commits. If you supply one commit hash, you can see the changes between that commit and the current one, or HEAD. To show the same changes with git diff that you see in the desktop window, you use a special form of git diff HEAD^, which means it shows the difference between the parent of the HEAD commit and the current commit. There’s also a convenience command called git show.

To see changes instead of just additions in GitHub Desktop, click the commit with the commit message of “add notes”. Now, you see that the text with the red background was replaced with the text with the green background. In the terminal, you can show the difference by two commits with git diff followed by the hash of the commit, followed by the hash of the commit again, but this time supplying the carat to show its parent like you saw before.

In this case, you’d use the hash of the “add notes” commit and the hash again but with the “^”. The git diff command doesn’t care which hash comes first. Now, you can see the same changes, with red for the deleted text and green for the added text.

Everything you’ve seen with git diff hasn’t made any changes to the files in the working directory. The diff command extracts information from the repository.

Now, we can open a new terminal window and open the recipe.md file with a Git-aware text editor like VisualStudio Code, Xcode, Android Studio, or even vim. If you use a non-Git aware editor, like TextEdit, you won’t see the changes to the file unless you close the file and reload it. When you scroll to the bottom of the file, you can see the additions that were made in the “add notes” commit you saw earlier. If you check out an earlier commit, the actual file recipe.md changes to how it looked when that commit was the HEAD commit. In the GitHub Desktop app, choose a commit that’s earlier in the history than the “add notes” commit. Right-click the commit and select “Checkout commit”. Now, look at the recipe.md file and see that the text has changed.

In the desktop app, you can use the Current Branch pane to check out the 2023-7-9 branch. In the HEAD commit, an image was changed. In the desktop app, you can even use the tools at the bottom to overlay the two images on each other to help you spot differences. This is something you can’t do as well in the terminal. Over in the terminal, the branch has switched. You can type git status to see that. Remember that both clients are pointing to the same repository.

Now, when you use git diff HEAD^, all you can see is that the binary file has changed. Working with images is something that’s easier to do with a desktop Git client.

In the next lesson, you’ll use the basic Git commands to do some branching, committing, and merging of your own.