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

#github #git #tutorial #devops

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>

🧱 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"

✅ Step 2: Create the develop Branch

git checkout -b develop

✅ Step 3: Create Feature Branch

git checkout -b feature/add-to-cart-animation

✅ Step 4: Simulate Feature Addition

Edit index.html and add this line:

<!-- TODO: Add to cart animation -->

Then save and commit:

git add index.html
git commit -m "Add TODO comment for cart animation"

✅ Step 5: Merge Feature into develop

git checkout develop
git merge feature/add-to-cart-animation

✅ Step 6: Create a Release Branch

git checkout -b release/v1.1.0

Optional: add a QA comment

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

✅ Step 7: Merge into main (production)

git checkout main
git merge release/v1.1.0

✅ Step 8: Merge Back into develop

git checkout develop
git merge release/v1.1.0

📊 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.