Lesson Tuesday

In the last lesson we explored creating and managing multiple branches in a single Git repository. As we learned, branches allow us to create multiple copies of our code. These copies may be used to experiment with implementing new code, without putting the "final version" or master branch at risk of bugs or errors.

Additionally, branches can be used to simply try out different options before deciding which should end up in the final iteration of the project; like we did in the previous lesson with different sets of CSS styles.

However, once we confirm the code located in a feature branch works, and that we want to include it in the final version of our project, we need to integrate this code into the master branch that represents our final product. The act of incorporating code from multiple branches together is called merging. In this lesson, we'll walk through merging branches together in our example project.

Project Recap

In the last lesson, we created a website to practice branching together. It currently has three branches:

  • master
  • blue_theme
  • red_theme

The master branch looks like this:

master-version

blue_theme was branched off of master. It contains one possible set of CSS rules for our site. They look like this:

blue-version

red_theme was also branched from master. It contains an alternate set of CSS rules to style our site. They make our site look like this:

red-version

The commits across all branches should look something like this:

project-flowchart

Now that we have two different options in place, we can decide which branch's styles we like best, and merge it into master.

Merging Branches

Let's say we've decided to use the CSS we wrote in the red_theme branch in the final version of our project. Since the master branch represents the final product, we'll need to merge the red_theme branch with master.

To merge two branches you must first navigate to the branch you'd like to introduce new code into. In our case, this is the master branch, because we'd like to integrate the CSS we created in red_theme into master.

Let's run $ git branch to see where we are currently located:

$ git branch

  blue_theme
  master
* red_theme

If you followed along with the previous lesson exactly, you should still be located in red_theme. Let's navigate into master using $ git checkout:

$ git checkout master

Switched to branch 'master'

Then, we'll run $ git branch again to confirm we've successfully navigated to master:

$ git branch

  blue_theme
* master
  red_theme

We can use the $ git merge command to bring the contents and commits of an outside branch into our current branch. In our case, we'll bring the commits from red_theme into the master branch we are currently located in. We'll run the following command:

$ git merge red_theme

This should result in something that looks like this:

Updating 982b0f2..d5bae64
Fast-forward
 css/styles.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

Now, let's run $ git log to view our commit history:

$ git log

commit d5bae6406669988e154608ce990e08fed51e9cb3
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Mon Oct 10 13:00:42 2016 -0700

    Make all font sans-serif style.

commit 5f2d9510cdc76736c7c5cf7e5d56264cd405fcd1
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Mon Oct 10 12:51:11 2016 -0700

    Add styles to h1, h2, p, and body to fit red theme.

commit 982b0f21463be34d909c45dd67778d6ffe3d7668
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Mon Oct 10 12:06:35 2016 -0700

    Add CSS rule to make H1 headers blue.

commit 8e36f8bfd58643487565c5a4fbcb5250fed0808b
Author: Ada Lovelace and Enrique de la Fuente <[email protected]>
Date:   Mon Oct 10 12:04:27 2016 -0700

    Create stylesheet, link in head of website.

Notice that the two most recent commits from red_theme are now part of the commit history here in master. This is because we merged red_theme into master. This means all code and commits from red_theme have been incorporated into master, too.

The commit structure of our project across all branches currently looks like this:

branches-with-merged-commits

Notice that merging red_theme with master has brought all commits previously exclusive to red_theme here in master. Also, notice that the red_theme commits don't instantly disappear when we merge them into master. They still exist in the red_theme branch.

Deleting Branches

After successfully merging a branch (always confirm all of the branch's commits are present), you may delete it if you do not plan on using it further. This is safe to do because all commits red_theme once contained are now present master. So, we don't risk losing any work.

We can delete a branch using the $ git branch -D command, like this:

$ git branch -D red_theme

Deleted branch red_theme (was d5bae64).

We can run $ git branch and see red_theme has been removed from the repository entirely:

$ git branch

  blue_theme
* master

And, since we opted to integrate the styles in red_theme instead of blue_theme, we no longer need the blue_theme branch either. We'll delete it at this time, too:

$ git branch -D blue_theme

Deleted branch blue_theme (was 268363a).

Know that merging doesn't always go quite this smoothly, unfortunately. If multiple branches contain edits to the same lines of code, Git won't know which edit should supersede which, and requires the developer to manually intervene (this primarily occurs when branches are working on the same code simultaneously, and both attempt to merge with master). This is known as a merge conflict.

However, we shouldn't encounter any merge conflicts quite yet. For now, simply make sure you're familiar with the general concepts of branching and merging, and able to create branches for use with GitHub Pages. We'll explore merge conflicts, what they look like, and how to resolve them later on.

As you can see, merging and branching in Git is a powerful, complex feature. However, don't feel overwhelmed if you don't yet have a handle on everything we've covered in these past two lessons. Feel free to refer back to this content whenever necessary. Soon enough, branching and merging will become second nature!

Terminology


  • Merging: The act of combining two different branches together.

Overview


  • To merge one branch into another, you must first navigate to the branch you'd like to introduce new code into.

  • Once located in that branch, the command $ git merge <branch-name> will merge the commits from the outside branch into the current branch.

  • If the two branches don't contain edits to the same areas, Git will be able to merge these two branches automatically.

  • If two branches contain edits to the same areas of code, this will result in a merge conflict, and Git will request you resolve it manually. We'll explore merge conflicts in detail later on.