Basic git branching, switching and merging – The new stack

Dr. Torq

Rob (drtorq) Reilly is a freelance consultant, writer, and speaker specializing in Linux/OSS, physical computing, hardware hacking, tech media, and the DIY/Maker movement. He provides a variety of engineering, business and special project services to individual and corporate clients. As a longtime veteran of tech media, Dr. Torq has published hundreds of feature articles for tech media and leading print. He has also presented technical talks at OSCON and other industry venues.

Prototyping new features, fixing bugs, and testing before putting anything into production is a regular process when developing code and content. Editing good working code directly is problematic, so switching to an alternate, temporary code environment during edits is a practical solution. In git, this process is called branching. Later, after finalizing the changes, the code is brought back into the production workflow using a git merge.

I thought a simple and straightforward example would be to show how to edit my custom HTML home page in the git environment. The page is nothing more than a collection of interesting links that are easy to click on as I navigate my daily R&D information-gathering and web-browsing rituals. I like to include daily or hourly updated sites like YCombiner, Hack A Day, All3DP and the Drudge report. You can point links to any type of resource. For years the file lived on my personal website making it easy to access from any device using a standard internet URL. I took the site down a few years ago. Now I just keep copies locally on my Linux laptop and Android phone. The page is updated with new interesting links about four times a year or as needed.

Today we’re going to look at using git’s basic branch and merge processes on this homepage file.

Editing my homepage

I use a file called “robnet.htm” for my personal homepage. It resides in a subdirectory named “homepage” under my Linux laptop’s home directory. So the homepage button, in my laptop’s Chrome browser, points to the local file “/home/rob/homepage/robnet.htm”.

The first step is to launch the git environment. I did this with the usual git command string, in a Linux terminal.

rob% cd homepage
rob% git init
rob% vi robnet.htm
rob% git add robnet.htm
rob% git commit -m "initial save for robnet.htm under git"

I copied the original existing robnet.htm file to the homepage directory from another location and started editing it from there.

To start editing a temporary working “copy” of the homepage, use the git branch command. You can see current and existing branches with the -a option.

rob% git branch -a

The list only shows the master branch, at this point. Now let’s add a test branch.

rob% git branch test
rob% git branch -a

Note that the printout shows a “master” branch and a “test” branch.

If you click the home page button, in the browser, the original content appears because git still points to the master branch version of the robnet.htm file.

The new branch is created and you need to use the git switch command to move the branch pointer to the new branch. It takes a little while before you are intuitively aware of where your branch is at all times. You can always use “git status” to show your branch location.

rob% git switch test

Then edit the robnet.htm file, add a line of text for a visible comment, and save the file.

rob% vi robnet.htm

vi Session showing new comment added

vi Session showing new comment added

Return to the browser and press the refresh button. Note that the new comment now appears on the browser page. Don’t forget that we are working on the “test” branch.

As usual, add and commit the change.

rob% git add robnet.htm
rob% git commit -m "added visible comment to robnet.htm file"

Go back to the “master” branch and refresh the browser.

rob% git switch master

robnet.htm file in Chrome browser, pointing to the

robnet.htm file in Chrome browser, pointing to “Master” branch

Note that the newly added comment disappears and the file appears in its original, unmodified form. Go back to the “test” branch and refresh the browser.

rob% git switch test

robnet.htm file in Chrome browser, pointing to the

robnet.htm file in Chrome browser, pointing to “Test” branch

What do you know? The comment came back. git simply moves a pointer (to the robnet.htm content) which is reflected in the filename. I initially had considerable difficulty with this concept because I’m so used to thinking in terms of separate directories and files, even though they’re kind of the same thing. Just try to stay in the mindset of the “git” environment and it’s much easier to remember because you’re doing it multiple times.

OK, go back to “master” and refresh the browser.

rob% git switch master

The comment is still not there, as you might expect, since we were making changes to the “test” branch. Nothing happens to the “master” branch until you merge your “test” branch into the workflow.

Run a git merge to pull changes from the “test” branch, using the branch name.

rob% git merge test

Now refresh the browser and the comment magically appears. Changes made in the “test” branch are now reintegrated into the “master” branch.

Since we no longer need the test branch, you can safely delete the branch. The branch is traditionally deleted when changes, testing, and final approval are complete.

rob% git branch -d test

Verify that the branch is gone.

rob% git branch -a

Great, only “master” appears in the list again. Of course, the browser home button also links to the “current” version of the master robnet.htm file.

Conclude

Branching in git is useful for setting up your development, prototyping, and test environments for code and content authoring operations. I found it a bit confusing to use, at first. If you’re typing, performing commands manually will help you develop your workflow muscle memory.

After a while, you can switch to using the built-in Linux history recall function. Instead of typing every git command for the 423rd time, hit the up/down arrow, while at the Linux command line to recall your various git chains and save time.

Hey, I should put my robnet.htm file in GitHub or GitLab since I currently don’t have a personal webpage. Then I can access my “home” webpage again from anywhere.


Contact Rob “drtorq” Reilly for consultations, speaking engagements and commissioned projects at [email protected] or 407-718-3274.

A homemade Dr. Torq nameplate.

The New Stack is a wholly owned subsidiary of Insight Partners, an investor in the following companies mentioned in this article: Torq.

Image by Thomas Muller from Pixabay.

Comments are closed.