Git Tutorial #3

GUI Program - GitHub Desktop

Now that you've gone through Part #1 and Part #2 and learned the basic Git terms and functions inside the Bash terminal, you should have no problem switching to a GUI program.

GUI, which stands for Graphical User Interface, is a fancy abbreviation representing programs - those with windows, tabs and buttons, unlike the Bash terminal. Git itself does have a default GUI program simply called Git GUI, which is very... barebones, to say the least. I've heard the advice of my friend and tried out GitHub Desktop.

And I gotta say, I am beyond impressed. The GitHub features are a nice bonus we'll take advantage of from Part #5 onward, but I was afraid we would be required to use them. Thankfully not! It serves its purpose as a GUI program, and I would say it is incredibly easy to work with.
Today, we will set it up and learn how to do things we're already familiar with, like creating commits and browsing the history. You will love it, I promise.

First, we have to download and install GitHub Desktop like any other program. Here is the link to the download page, where you can grab the installation file - looks like it automatically detects your operating system.

I was worried I'd have to do another installation tutorial, but fortunately for me, GitHub Desktop asks for literally nothing and installs itself without needing your input.
I say for me because it comes with downsides, ones I wouldn't expect from an installation in this day and age.

  • The installation destination directory is automatically:
    (User Folder)/AppData/Local/GitHubDesktop
    As such, it requires being Launched as an Administrator, but doesn't ask for it, simply throwing an error during the installation if launched regularly
  • Nor Desktop shortcut nor Start Menu folder is created. Why is this a thing??
    You probably want to create the shortcut for yourself, for the GitHubDesktop.exe inside the destination directory.

I was going to praise how pretty the installation is (the stars sparkle!) and how refreshing it is to have an installation take care of itself, but if it means dealing with issues like these, I'm not sure I'm on board with the idea.

When the installation is done, GitHub Desktop will open automatically on the intro page and give you the option to sign in to GitHub. 

Also, I think it's time I started abbreviating GitHub Desktop to GHD from now on.

We will Skip this step for now and come back to it eventually.

Next, we need to set the Name and Email for info in commits. Since we've set the global variables in Part #1, GHD loads them in automatically, but still gives you the option to change it. Very nice.

And that's the setup done. We will now be brought to the starting page, where we can open a repository and start working with it.

If you want to follow the Pro Tip, you can drag & drop our example_repository folder (or any folder containing .git) into the window.
If you instead want to click the Add an Existing Repository button like I have, choose the path to the repo folder and click the blue button.

And when you do, it will lead us to the Main Page of the repository.

Let's stop here for a moment. As we will be spending a lot of time on this screen, I would like us to perfectly understand where everything is located.

First, the three big buttons on top. Current repository is our operating folder, Current branch is the branch we're currently on (right now the default main), and Publish repository is a push/pull action - a topic for Part #6.  

Left side is dedicated to creating commits. Under the Changes tab is where you can stage and unstage files - to remind you, staged files are included in the next created commit.
There's a window prepared for the commit messages (the required Summary is what we input in Bash with the -m argument), a blue button that creates a commit (mentioning the branch we're committing to), and a mention of the latest commit in case you want to quickly undo it.

Finally, the main window on the right side that currently reads No local changes is where we see the changes done to files. Let's see how that works next.

I've done two changes to our files: 

  • cool_file.txt got deleted, after accompanying us for two tutorials
  • A new file called original_file.txt with one line of text got created

Inside GHD, the main window has changed, showing an overview of the selected changed file from the left list.

For cool_file.txt, red color marks removed content:

While green color marks created content:

Files are staged by ticking the blue box left to their name. Using a GUI also lets you very easily stage only specific lines, in GHD by clicking on the line number - staged lines are marked with the signature blue color.

I've already mentioned the bottom section for creating a commit. If I just fill in the message like so...

I can click Commit to main, which will create the commit and lead us back to the Main Page of the repo.

Let's see the second major tab, History. It is like the git log command in Bash, but significantly prettier. 

The commits are sorted newest to oldest, with the one we've just created on top. The main window shows details about how many files were changed, what changed, the commit hash and so on.

And that would about do it for the overview of the program. While we haven't gone over any new theory, we have learned how to do things in a different way. After installing GitHub Desktop, we've revised:

  • Staging files and changes
  • Creating commits
  • Viewing history

Originally, this and Part #4 were one tutorial, an absurdly long one. I've decided to separate the GUI into a standalone one, so we can fully focus on the topic of branches in the next part.
program will also make learning about them much easier!