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