Up your Git game and clean up your history

This post is aimed for people who want to learn how to use commands such as rebase & learn a few tricks to have a nicer Git experience.

Alright, let's start by watching the Git history of some of my first ever projects on Github:

Oh no

Oh no no no no

OH LORD WHAT HAVE I DONE

Now that I've ridiculed myself, let's check out what most of my projects look like now 😄

Oof, much better

If you don't know what this all means, let me explain briefly:

This is a representation of your Git history on Github, meaning the commits you've done over time on your project's branches.

You can see your own by navigating to the "Insights" tab of one of your projects, then going to the "Network" tab on the left.

The black bar represents my master branch and each alternating blue & green bars are separate branches.
As you can see on the more recent and nicer history, they alternately get merged into master, creating this nice flow of writing code & merging it (which is always recommended, instead of accumulating pull requests).

So, how can you have a cleaner history? Let's go over real use-cases.

Here's what we're covering today (make sure to do each section in order):

• Rebasing
  • Fixing up a commit
  • Dropping a commit
  • Renaming a commit
  • Rebasing on master
• Getting a better git log

The magic of git rebase

Official documentation

Git rebase lets your remodel your history to your will. See it as a way to manipulate your list of commits on a given branch.
For example, you could drop commits completely (basically say goodbye to them in the abyss of git), rename them (rewriting your commit message), squash them into other commits (which is useful to hide commits that do small things such as adding a semicolon, you don't really want to see them in your history) and many more things.

Learning by practice

Go to the following project I made for the occasion, fork it and let's get started.

Forking is basically creating a copy of my project for yourself, you'll be able to mess around with it without any problems ! To do it, click on the fork button on the top right:

Then, clone the repository you forked.

Example 1: fixing up a commit with rebase

Scenario: you have committed something that does not deserve a commit of its own, or you want to reduce the number of commits on your branch to one before making a pull request.

• From the master branch, create a new branch.

• Create a new file, its content doesn't really matter.

• Commit that new file to your branch.

1git add index.js
2git commit -m "add index.js"
3

• Update something in that file

• Commit it again with a message such as "update index.js"

• Run git log, as you can see, we now have 2 commits

We now want to fixup the update commit into the add commit, because this small change does not deserve a commit of its own.

To do so, we'll use the interactive mode of git rebase, which lets us apply the rebasing with a nice interface.

• Run the rebase command like so:

1git rebase -i HEAD~2
2

HEAD~2 means start from the last commit on the branch (the head) and go back 2 commits. If we wanted to manipulate more commits, we could change the value to the far right.
You should now have an interface that looks something like this:

Don't panic, this only shows you the two commits you are changing at the top, and the available commands bellow them.
By default, the rebase interface uses Vim, to write in it, simply press the i key. You are now in "INSERT" mode. As we want to fixup the second commit in the first one, all we have to do is write fixup or f instead of pick in front of it. Our update index.js commit will now be squashed into the add index.js but only the add index.js's message will be kept.

• Update the second line like so:

1pick c0091ec add index.js
2f a19336e update index.js
3

Now, we want to apply the rebase, press escape to leave the INSERT mode, press : (colon) and enter wq for "write" and "quit" and press ENTER to apply these changes. The colon simply allows you to write commands for Vim to execute.

The following message should now appear in your console:

Successfully rebased and updated refs/heads/{YOUR BRANCH NAME}.

Check your git log, you now have one beautiful and clean commit !

• Finally, force push to that branch to apply the rebase to the remote server

1git push origin {BRANCH-NAME} -f
2

The -f is essential as a rebase modifies your git history and requires to be forced.

Example 2: dropping a commit

These next 2 steps will be extremely similar to the first one because you now have the tools to do any kind of rebasing 🎉

Scenario: you want to completely remove a commit

We'll drop the add FILENAME commit we previously made:

• Run the rebase command

1git rebase -i HEAD~1
2

• Add a d or drop in front of the commit you wish to drop.

• Run :wq in your Vim editor (and check with git log that the commit was dropped)

• Don't forget to force push it to your remote server 😀

Example 3: rewording a commit

Pretty similar, with one change.

Scenario: you want to fix a typo or rewrite a commit's title or description

• Create a random commit

• Run the rebase command

1git rebase -i HEAD~1
2

• Add a r or reword in front of the commit you wish to reword (no need to edit the title now).

• Run :wq in your Vim editor. This will open a similar editor with the commit(s) you wish to reword.

• Update the commit's title and description to your will, run :wq and that's it ! Check with git log that the rewording was applied

• Don't forget to force push it to your remote server 😀

Example 4: rebasing on master

This example isn't reproduced in the Github project, but feel free to test it out.

Scenario: you have multiple PRs (Pull Requests) open at the same time

You merge one PR, now, your second PR is not up to date with master, oh no !

This very frequent scenario will have us rebase our second PR on master so that it gets the new code merged from the first PR.

• From the branch you want to rebase (in our case, the second PR's branch), run the following:

1git fetch
2

This downloads all the references our branch needs to apply the rebase.

• Then, execute the rebase like so:

1git rebase origin/master
2

• Finally, run a git push origin {MY-BRANCH} -f to apply the rebase to our remote server

Hurray !

Bonus: a better git log

Is your git log too much to handle?

Would you rather have a git log that is straight to the point and looks nicer?

Look no further ! Here's how you can achieve it, in your console, paste the following:

1git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
2

You've now created an alias to git log called git lg that will display the nicer output showed before. Try it out by typing git lg (or git lg -p to see the lines that have changed).

Thanks to Coderwall for this bonus ✨

Closing thoughts

Learning how to use Git is probably one of the most important skills we can acquire as developers. I hope some of you won't be as afraid of rebase as I was a while ago.

If this post has been helpful, please feel free to follow me on Twitter @christo_kade !