If you are just starting out, you might be wondering what exactly is git 🤔 and why the heck is it everywhere.
Most of the time, you are working on building simple projects, and the code base doesn’t get too complex. Hence, easy to maintain.
But there is a catch, What if you want to collaborate? What if you need to version your code? What if you need to revert back to a point in your project? And What if… Trust me, it can get really messy.
Thus, git helps us solve this problem.
What is Git
Git is a free and open source version control software that helps you manage and maintain your codebase.
Versioning becomes easy, collaboration can’t get easier, managing and scaling your software comes in handy.
A journey to learn Git
So, we set out to build a beautiful landing page. But we just realise we don’t have git installed on our machine yet 😅.
- on Windows Download installer here
- on Linux If not already installed. use
sudo apt install git
- on Mac
brew install git
Learn more installing git here
Initialize a git repository
A git repository/repo just as it sounds, is a repository where git store changes and manages our tracked files 📂(files we’ve added to our repo) .
In our landing page project root directory we run
Congratulations 🎊, we now have a git repo in our project, but we are not tracking any of our project files 📂.
Adding files to our repo
First, we want to know the status of our landing page git repo, that is, the files in the repo, tracked and untracked files.
run in terminal/cmd
looks like no files in our git repo, so now we decided to add the project files we are working on to the repo.
git add index.html main.css index.js
Greate, but there is a problem though, what if our project has lots of files, manually adding each of them is a stupid thing to do, what we can do is run
git add .
Now, that makes alot of sense, all the files have been added, like allll 😱.
We are in trouble, all the node_modules files and folders are now in our repo.
We need to be able to git add . without getting worried that the images, files or other assets we have in our directory that are not suppose to be in our repo are been tracked.
The .gitignore file allow to specify folders, files or files with specific extensions in our working directory we don’t want to track.
To achieve this, we create a .gitignore file in our project root directory and we can specify the following.
Folder, files or specific extensions to ignore.
Learn more about .gitignore here
That makes much more sense now, but we have only added our project files though, let make a commit 😀.
Maybe we mistakingly added all those files we are not suppose to track, or maybe we don’t need some files anymore.
we can remove files with:
git rm FILENAME/FOLDER
-rto recursively remove if it a folder
The problem with this though is that, it completely delete that file from git and in our directory.
But, if we want to untrack file we mistakenly track or we don’t want to track anymore. We can add
--cache flag to only remove that file from the git repo.
git rm --cached FILENAME/FOLDER
-rto recursively remove if it a folder
A commit is the state of our project files at a point in time.
Our landing is coming together already, we’ve added the nav, and the hero text we came up with looks great in the header 😋.
Perfect moment to capture 😁✌.
- first we add changed files for staging
We can either git add . or manually add the files we made changes to.
git commit -m "page hero text and nav"
-m flags message.
Note: make sure to use meaningful commit messages
We can see our commits with
git log displays commit message, date, author and their SHA key.
Our project going great and so far, we’ve been creating meaningful commit or we can say restore point.
On this faithful day, we had bug, in trying to solve it we broke our code 😄.
We couldn’t figure out what went wrong, fortunately we haven’t done much from our previous commit.
Oh good God, let default back to our previous commit.
git reset --hard HEAD
Let don’t freak out, HEAD holds the reference to our latest commit.
If we want to resert to other commit, we replace the HEAD with the commit SHA key.
When we first initize a git repo in our project, git automatically creates a new branch for our project, this is usually called main or master.
Branches are like folders and are movable
Our website is in production on the master branch, but we want to experiment with adding cool animations to our landing page.
Instead of modifying our master branch directly, we create a new branch.
git branch animation
We just created a new branch called
We can view the branches in our repo by running:
To switch between branches we use:
git checkout BRANCH-NAME
in our case we are to switch to the animation branch we’ve just created.
git checkout animation
We can also checkout to commits not just branches.
git checkout COMMIT-SHA-KEY
Whoa, the animation are looking great so far. After lots of commit to our new branch, perfect time to merge with our master branch 😍.
- First we checkout to our master branch.
git checkout master
- Then we merge in the animation branch.
git merge animation
Maybe we are done with the animation branch, we can delete with:
git branch -d animation
Git is a tool every developer should learn, it saves tons of time and makes managing your codebase easier (not the coding part 😅).
Although collaboration with git is mostly tied to GitHub, which we didn’t cover in our short journey.
if you get stuck, remember there is always Google to pick you up 😅.
Anyways take care and stay tuned.