DEV Community

Latchu@DevOps
Latchu@DevOps

Posted on • Edited on

🌊 Master Gitflow Branching Strategy — Step-by-Step Guide with Hands-on HTML Project

#git #github #devops #tutorial

If you've learned Git basics but still feel confused about Gitflow branching, this post is for you. We'll go step-by-step with real commands using a simple HTML project hosted on an Ubuntu EC2 instance.

🧠 What Is Gitflow?

Gitflow is a branching strategy that helps structure development around:

  • New features
  • Release preparation
  • Hotfixes

It uses these main branches:

Branch Name Purpose
main Stable production-ready code
develop Ongoing integration of all features
feature/* New feature development
release/* Preparing a release (QA/final tweaks)
hotfix/* Urgent fix for production issues

🛠️ Hands-On: Gitflow on Ubuntu EC2 (or Local Machine)

We’ll build a feature called “Add to Cart Animation” to simulate the workflow.

🛒 Project Setup: MyShop Demo

You're inside a folder myshop-demo with this index.html:

<!DOCTYPE html>
<html>
<head><title>MyShop Demo</title></head>
<body>
  <h1>Welcome to MyShop</h1>
  <p>Your favorite online store!</p>

  <div class="product">
    <h2>Product Name</h2>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🧱 Step-by-Step Gitflow Branching

✅ Step 1: Initialize Git (if not already)

cd myshop-demo
git init
git add index.html
git commit -m "Initial commit - MyShop homepage"
Enter fullscreen mode Exit fullscreen mode

✅ Step 2: Create the develop Branch

git checkout -b develop
Enter fullscreen mode Exit fullscreen mode

✅ Step 3: Create Feature Branch

git checkout -b feature/add-to-cart-animation
Enter fullscreen mode Exit fullscreen mode

✅ Step 4: Simulate Feature Addition

Edit index.html and add this line:

<!-- TODO: Add to cart animation -->
Enter fullscreen mode Exit fullscreen mode

Then save and commit:

git add index.html
git commit -m "Add TODO comment for cart animation"
Enter fullscreen mode Exit fullscreen mode

✅ Step 5: Merge Feature into develop

git checkout develop
git merge feature/add-to-cart-animation
Enter fullscreen mode Exit fullscreen mode

✅ Step 6: Create a Release Branch

git checkout -b release/v1.1.0
Enter fullscreen mode Exit fullscreen mode

Optional: add a QA comment

echo "<!-- Release QA passed -->" >> index.html
git commit -am "Add release QA comment"
Enter fullscreen mode Exit fullscreen mode

✅ Step 7: Merge into main (production)

git checkout main
git merge release/v1.1.0
Enter fullscreen mode Exit fullscreen mode

✅ Step 8: Merge Back into develop

git checkout develop
git merge release/v1.1.0
Enter fullscreen mode Exit fullscreen mode

📊 Gitflow Recap

Your final branches:

Branch What You Did
feature/add-to-cart-animation Developed a new feature
develop Integrated the feature
release/v1.1.0 Prepared it for production
main Final stable production version

🎯 Why Use Gitflow?

✅ Structured process for teams
✅ Easy to isolate features, releases, and hotfixes
✅ Makes CI/CD pipelines more manageable

💬 Conclusion

You just followed a complete Gitflow branching cycle with hands-on steps!
This gives you real-world Git experience you can use in DevOps, frontend/backend, or CI/CD roles.

🙌 Drop a comment if this helped and try the next one:

Git Branching Strategy

You may have a look at the Git Branching Strategy with Example

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.