Git Branches
We covered the basics of Git and started this project in the previous tutorial.
If you don't already have the GitBash terminal open for my-sample-project, go ahead and right-click on the my-sample-project folder and choose GitBash Here.
Remember that a website (or any software project) is usually constantly changing. As soon as a site goes live, the requests for changes start to pile up. So you need a way to keep the live version intact while you are working on the many changes that will be included in the next release.
Git allows you to create branches so that you can keep a version of the project intact while you are making changes to a separate version. The separate versions are known as 'branches'.
You usually create a new branch when you are adding a new feature to your project, or when you are fixing a bug. And then, after the new feature is complete (or the bug is fixed), you can merge all the changes into the original branch. This allows you to make many changes (commits) without affecting the current live version of the project.
Assume that we are about to add a new feature to our project, but we don't want to change the current live version. Our new feature will be the addition of a stylesheet to the project.
Create a new branch by entering this command:
git branch adding-css
This creates a copy of the project files (a branch) with the name of 'adding-css'. Now we can work on the adding-css branch, by making as many commits as we want, without affecting the original branch (the original branch is usually called 'main' or 'master').
Run this command to look at all the branches for a project:
git branch
It should show the original branch (named either 'main' or 'master') and the 'adding-css' branch. Also note that the asterisk indicates which branch you are currently working in.
We want to switch to the 'adding-css' branch so that we can start making changes without affecting the main branch. To do so, enter this command:
git checkout adding-css
Now run this command again, and notice that the asterisk should be next to the 'adding-css' branch, which indicates that you are working in that branch:
git branch
Add a file named main.css to the project folder (my-sample-folder) and put this code in it:
body{font-family: Arial; }
Now a link element to index.html so that it looks like this:
<html>
<head>
<title>My Proj</title>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<h1>My project</h1>
</body>
</html>
Make sure that both files are saved. Then check the status like so:
git status
Note that index.html and main.css show up in red, which means they have not yet been added to the 'staging area'.
Add (stage) both files with this command:
git add .
If you check the status again, you'll see that the file names now show up in green, which means that they will be included in the next commit that we run.
Go ahead and commit the files that have been staged, like so:
git commit -m "Added stylesheet"
We are not done with the stylesheet yet, but imagine that in the middle of adding this new feature, we realize that we must make a change to our live site as soon as possible.
So, we can switch back to the master (or main) branch like so:
git checkout master // or use 'main' instead of 'master'
If you look at the project folder in File Explorer, you'll note that the changes we made to the 'adding-css' branch are not there (the style sheet is gone and the link to it in index.html is not there as well)! When you checkout a new branch, Git replaces all the files in the project folder from the previous branch with the ones for the branch that you just checked out.
Note that you cannot switch to another branch unless you commit the changes you've made to the current branch (we'll talk more about this later)
Update the index.html file too look like this:
<html>
<head>
<title>My Proj</title>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<h1>My project</h1>
<h3>Coming soon to this website....CSS</h3>
</body>
</html>
Now add and commit the change with these commands:
git add .
git commit -m "Added coming soon message"
At this point, you would could copy the files from the master/main branch to your live server in order to publish it.
And now you can get back to work on the new feature, so switch back to the 'adding-css' branch like so:
git checkout adding-css
And finish off the main.css file by making it look like this:
body{font-family: Arial; }
h1{ color: green; }
Then add/stage and commit the change like so:
git add main.css
git commit -m "Finished stylesheet"
Now that our new feature is complete (the addition of a stylesheet), we can merge the changes we made in branch back into the master/main branch.
To merge a branch into the master/main branch, you must first switch to the master/main branch like so:
git checkout master (or main instead of master)
Now we can merge the changes made in the 'adding-css' branch into the master/main branch by running this command:
git merge adding-css
When you run this command, Git will open Notepad with a default message for the merge (which is actually a commit, so it requires a message just like any other commit you would make).
Branching allows you to make many changes (commits) without affecting another branch in your project.
Now that the new feature has been merged into the master branch, we can delete the 'adding-css' branch like so:
git branch -d adding-css
There's a lot more to Git that we will discuss soon. But in this activity you learned the most basic commands for using Git:
git config
git init
git add
git commit
git status
git log
git revert
git branch
git checkout
git merge