Version Control Using Git Flow

git icon logo

One of the first things I had to learn at {Pro}Coders was version control using Git and GitHub. I have learnt that it is best to follow what is known as Gitflow Workflow and was initially published by Vincent Driessen at nvie. It has been a popular practice in the industry ever since. One way to help organise your workflow is to use different branches for your projects development, these include:

  • Master
  • Develop
  • Feature
  • Release
  • Hotfix

The master branch is the main branch which is used for production ready code, this is the code that will be put live on the web. The following tutorial shows how I manage my version control on a day to day basis.

Git Flow Tutorial

The first thing I need to do is set up a repository on GitHub and clone that to my local machine and open that directory. To do this, from the terminal type:

Pauls-MacBook-Pro:~ paulbrighton$ git clone
Pauls-MacBook-Pro:~ paulbrighton$ cd Hello-World-

We now have an empty repository and we will need at least one file to work with. For the purposes of this tutorial, I will set up a HTML file to work with from the terminal.

Pauls-MacBook-Pro:Hello-World- paulbrighton$ touch index.html

And push that up to GitHub using:

paulbrighton$ git push origin

Next, I will setup the develop branch. I’ll add a h1 tag to file with the text ‘Hello World!’, commit it, push it up to GitHub and set this to my default branch.

paulbrighton$ git checkout -b develop
<h1>Hello World!</h1>
paulbrighton$ git add -A
paulbrighton$ git commit -m “Added h1 to index.html”
paulbrighton$ git push origin develop
Photoshop resizing window

The changes I make now, I want to do on a feature branch, so I will set that up, I will change the h1 tag to ‘Goodbye World!’, commit it and push it up to GitHub.

paulbrighton$ git checkout -b feature/git-flow
<h1> Goodbye World!</h1>
paulbrighton$ git add -A
paulbrighton$ git commit -m “Changed h1 to Goodbye World!”
paulbrighton$ git push origin feature/git-flow

At this point, all our branches have different information contained within them. What I want is to have the h1 heading with ‘Goodbye World!’ in my master branch so this can go live to the web. This process can all be handled in GutHub using pull requests, the advantage of doing it this way is so the changes can be checked by either me or another developer before those changes get merged into the other branch.

In GitHub, click on Pull requests and then New Pull Request.

Photoshop resizing window

Then I changed the base branch to develop and compare branch to feature/git-flow and clicked on Create pull request

Photoshop resizing window

Now click on Merge pull request and the Confirm merge. My feature branch has now been merged with the develop branch and can now be deleted as it is no longer needed. If I wanted to change anything again, I can create another feature branch and use the same process to merge it to the develop branch again.

Photoshop resizing window

When I am happy with all my changes in my develop branch, I can now merge that into master using the same process and all my branches will contain the same code. As you can see, my master branch is now showing the html file with Goodbye World! and you can pull all your changes up to your local machine so everything is up to date.

Photoshop resizing window

By following this process and using git commit on a regular basis, you will be able to revert your code back to a point where you know it was working if everything gets a bit messy. For a more in depth look at Gitflow, check out Atlassian.

Thank you for reading this article, I hope you find it useful if your just starting with version control.