One frustrating aspect of becoming a Software Developer is that the tools and technologies you have to learn are rarely explained or written about from a beginner’s perspective. I often find I have to read a couple of articles on a certain topic to get a full understanding – even when the topic turns out to be incredibly basic when you finally understand it. Software documentation is usually one of the worst offenders in this arena.
I found this to be true with git when I was trying to level up as a self-taught Developer. The good news is that having used it for a couple of years now, I can say that it’s not at all difficult to learn. I remember my exact thoughts when picking it up initially, however, and just couldn’t wrap my head around why you would use this tool. This was perhaps because, at that time, I was developing only basic static HTML/CSS websites with a simple text editor, and uploading them via FTP to the web. I had no command line knowledge at all (which was another hurdle I had to cross before learning
Git is known as a version control system or VCS, but what does that mean, exactly? From the official git docs –
Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.
Awesome. So, in short,
You can use
So, why would you use git over something like Dropbox, or Google Drive to save and back up your work?
Take the following scenario.
You’ve just started developing your new portfolio website, and have added a ton of custom CSS to align everything perfectly. You’ve been religiously saving as you go along, but you’ll soon realise, that’s not enough. You begin to make changes to the footer section of your website, put in the final touches and click save. You refresh your webpage, and the footer is pushing off 100px to the right. Not only that, but your header has disappeared.
You undo the changes you made in the footer (by commenting everything out), and refresh the page. Your header is still not showing.
The problem here is that something broke your layout, but you don’t know what. You could very easily have deleted a semicolon somewhere else in your CSS that messed up your entire website, or it could be one of a dozen other issues. With git, typically you would make a
git commit(saving a snapshot, explained later) at each stage of your progress – so here, right before you began work on the footer modifications. You could then revert everything back to how it was, and start again.
The above example is on a personal portfolio website, using basic HTML and CSS. Imagine if you had some complex back-end code on your company’s production website which you had broken (a payments processor, for example) with a recent code change and had to urgently revert back. In that case, git would be an absolute life saver.
As a pre-requisite, you should probably have at least a basic understanding of the command line – yet another handy tool in the Developer’s toolbox. You don’t need to be a command line expert to follow the rest of this guide, but I’d suggest going through either one, or all of the following before trying to get to grips with git:
Windows: The most simple way to use git if you’re using windows, is to use the Git Bash program – https://gitforwindows.org/ – please download this first before following along.
Learning by example is best – so let’s do just that. Start by opening up the terminal (in Mac/Linux, or the Git Bash program in Windows). Most Macs will come installed with git ready to go, which you can confirm by typing the following and hitting return
git version 2.15.1
Otherwise, fear not. The easiest way to install
Once git is installed, I want to use it to track a basic project I’ve been working on – a static HTML website, which has the files shown below
├── my_website │ ├── index.html │ ├── scripts │ │ └── main.js │ └── styles │ └── style.css
I have a folder
index.htmlfile for example. To start using git, we have to initialize our git repository. We do this by navigating via terminal, into our website directory and run our init command as shown below
cd my_website ### cd is the command to "change directory" git init ### git init will initialize (create) your git repo
After running this command, you will get a confirmation similar to the below
Initialized empty Git repository in Users/webtuu/Desktop/my_website/.git/
and you will also notice a group of files have been added under a .git folder inside your website folder, thus creating your git repository as shown further below.
Note: If you can’t see the
.git folder, use the command
ls -a which lists all files in the current directory (including hidden ones). At this point, I would usually also have the project open in my chosen text editor (I use Atom) which makes viewing the files in my project easier. Whatever editor you use, make sure you enable viewing of hidden files so you can see your git folder being created.
├── my_website │ ├── .git │ ├── index.html │ ├── scripts │ │ └── main.js │ └── styles │ └── style.css
If for whatever reason you wanted to delete or
uninit your git repository, simply delete the
.git folder that you created (this will destroy your commit history if you’ve committed anything).
Every git commit has an associated author, with a name and email address provided. You can see the authors on a project by using the
git log command. To set your name, and email address to be associated with commits, use the following commands
git config --global user.name "Your Name Here" git config --global user.email firstname.lastname@example.org
Now that you’ve created your repository and set your name/email, the next step is to make a git commit, which will save a snapshot of the current state of our project, to give us a starting reference point. We do this with a git commit, like so
git add . git commit -m "Initial commit - project start"
These two lines first “add” your folder files to be committed (and have the changes tracked), and then you commit them, with the
-m (message) flag to add a message to your commit. This message describes the state of your project or changes you have made with that commit. Pro Tip: Keep your messages relatively short, but be descriptive!
From this point onwards, any change made to any of the files within your folder will be recorded and compared to this initial snapshot. To prove this, go ahead and modify any line of code or text in one of your files, save the file, and then run
If you read the details of the returned message, you’ll get a further understanding of what’s going on
No commits yet Untracked files: (use "git add <file>..." to include in what will be committed) index.html nothing added to commit but untracked files present (use "git add" to track)
The above tells us that we modified the index file has changes which are untracked. We need to “stage” the changes using a
git add, as we did earlier before we run
git commit to “save” them, like so
git add .
The dot after our command simply selects everything in the folder, so if you changed many files, they’d all be staged for committing at once. If you changed many files, but wanted to commit each one separately, or in logical bunches, you can select which files to stage for your commit, like so
git add index.html ### Stages the index.html file for committing git add styles/* ### Stages the contents of the styles folder
Feel free to type git status again at any point to see how
To save our changes, we simply do another commit, now that our files have been added to the staging area
git commit -m "Modify index file to add page header (or whatever)"
And that’s it! Git itself has quite a few more uses, specifically when collaborating (branching, merging), which you can read more on via the links below, but for now, I hope this introduction has got you started and a little less intimidated by a very simple and useful tool.
The next step in your journey to mastering git is to read through any of the links below in “Further Reading”. You will want to get familiar with git branches and git merges first of all, and also make yourself a Github account – I’ve covered all this in my next post – Git Basics #1 – Branching, Merging and pushing to Github. Not sure what Github is? I’ve written about that too – what’s the difference between Git and Github?
If you’d like to get in touch either tweet me @webtuu, or just fill in the contact form in the footer.
git init ### Initializes a git repo git add . ### This stages your work to be committed, after you edit files git commit -m "Your commit message here" ### This saves your work at that point git status ### Tells you the status of your files git log ### Gives you a log of your commits (Use Q to exit the log) git diff ### Use before git add to see changes you're about to save
If you prefer reading actual books, Pro Git by Scott Chacon is often highly recommended.