A layman’s introduction to Git

Webtuu

6 years ago

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, 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 the most basic static HTML/CSS websites in my own time. I had no command-line knowledge at all (which was another hurdle I had to cross before learning . I was wrong!

What is git, and what is it used for?

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, is simply a turbocharged save button. A save in Git is called a commit. When you make a commit, you take a snapshot of all the files that are in the folder which you have initialized git in – otherwise known as your git repository, or repo for short. This snapshot saves everything in it’s current state, and that particular commit can then be accessed further down the line if you mess anything up.

You can use for saving snapshots of any filetype at all – it doesn’t have to be Web or Software Development. Developers constantly make incremental changes to large groups of files (your codebase), and G is a powerful option for being able to see these changes clearly, providing the ability to roll-back when mistakes are made, or merge changes between many collaborators.

Why should I use git?

TL;DR Summary
- It’s a super save button that lets you create snapshots/backups of your work.
- Lets you work on multiple versions of a project simultaneously – i.e. create a new header for your site in one branch, a new footer in another branch, and merge them into the main branch when ready.
- It’s amazing for collaboration and keeps things organized.

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.

How do I start using git?

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

If is indeed installed on your system, get a handy message with the version of Git being used

git version 2.15.1

Otherwise, fear not. The easiest way to install is through another useful command-line tool called Homebrew (Mac users). Follow this guide to get up and running (Windows/Mac/Linux) – https://gist.github.com/derhuerst/1b15ff4652a867391f03

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

How do I start my git project?

I have a folder my_website a bunch of files and folders in it, so if you want to follow along, go ahead and create a folder with any file in it – just a blank 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).

Setting your name and email in git

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 your@email.com

Making a git commit

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

git status

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 git add from earlier affected things.

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.

Next steps?

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 just fill in the contact form in the footer.

Useful git commands / Glossary of terms

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