Caitlin Palmer-Bright

Aspiring Full Stack Developer

Git without the jargon – Part 1

So one of the things that you hear a lot when learning to code is that you absolutely, positively, without-a-doubt need to be using version control, or more specifically, you need to be using Git.

There are some great tutorials around for learning how to use Git, but it’s hard to make sense of them until you’ve used it in a real scenario – so this tutorial will be talking through how and when to use the different git commands and will try to eliminate the jargon wherever possible!

For this tutorial I’ll be showing you how to get your work onto GitHub, but the process is almost identical for other sites such as GitLab and BitBucket.

The GitHub Octocat

So What Is This Version Control Thing Anyway?

Git is by far the most popular type of ‘Version Control’ . What that means is it allows you to really easily save different versions or stages of your project.  If you’ve ever worked on an assignment and ended up having a folder full of files called something like Draft.doc, Final.doc, Final2.doc, FinalFinal.doc etc. then you’ll know how frustrating it is trying to keep track of different stages of your work. Now imagine how difficult that would be in web development where you’re working with multiple files, sometimes dozens at once, all with different versions. It would be a nightmare!

Version control means you can basically take a snapshot of your whole project at multiple stages, and be able to easily go back to an old version in case you break something or change your mind about what you want to do.

Short version: Git saves multiple versions of your whole project without you having to change folders, rename anything, or do any work other than typing a few commands in terminal.

Local vs Remote Repositories

A repository is the folder where Git saves all the different versions of your project. You should create a different repository (or ‘repo’ for short) for each project. You can use your terminal or command line to create a local repo, which means it is saved on your own computer. In most cases you will also want to create a Remote repo, which you store on a version control site such as GitHub.

Some of the advantages of using remote version control are:

  • You can easily share your project with other people – this is critical when working in teams
  • You have a backup of your project should anything disastrous happen to your computer
  • Showing your projects on GitHub (or similar) is a great way to demonstrate your skills to future employers.

We’ll start by looking at how to create a remote repository, then setting up your local repo and linking the two

Setting Up GitHub

Step 1. Create a GitHub account!

Or, sign in if you already have one.

Step 2. Create a repository

Simply click the ‘start a project’ button.

Main GitHub page

Step 3. Name your repo.

Feel free to change other settings or add a description but no need to do so.

Creating a repository

Step 4. Copy your repo URL

We’re going to use the middle section of instructions on creating a new repository on the command line. I’m going to explain what each of these steps mean in the next section, but this is be a good reminder for when you go to do this next time by yourself. In the meanwhile, copy the URL for your new repo – we’ll need this shortly.

Repo created!

Setting up your local repo

Now we get to start using git commands. To make sure git works easily, it’s best to have your project in its own folder and keep unrelated files away.  Open up terminal or command prompt and move into the folder where your project is located. This is my project folder, with three files that are all related to to the same project.

Project folder

Step 1. Create your git repository.

Yes, we already created one via github, but you’ll also need to create a local repo. The command for this is:

$ git init 

Important note: the $ in the above command is not part of the command – you do not type it. It’s just to indicate a terminal command.

After you’ve run ‘git init’ you can also list all the files in your folder to show a hidden .git folder has been created using this command:

$ ls -a

Step 2. Add files to your repo

Git needs to know which files you want to keep track of, and we do this by ‘adding’ them to our repo. You can do this one file at a time or you can add everything at once to save time.

$ git add index.html

This will tell Git to track (save versions of) just the index.html file but not the other files. You could do this individually for every file if you wanted. If you forget which files you’ve added and which you haven’t you can check your git status

$ git status

In my case this shows you that I’ve ‘tracked’ index.html and that there are two other untracked files. Rather than add each of them individually I’m going to add all at once.

$ git add .

The full stop after ‘add’ tells git to add everything in the current folder and in any subdirectories.

Step 3. Save your progress

You may have heard of git ‘commit’s, which is the stage we’re up to now! Making a commit is telling git that you want it to save the progress of your project at its current stage. To keep track of what was completed/changed in each version, we also add a ‘commit message’.

$ git commit -m "Initial commit"

The ‘-m’ indicates that we’re about to pass in our commit message – and make sure you remember to put the message itself in quotation marks.

If you only wanted to work on a local repository you could stop at this point, and then commit again each time you wanted to save a new version. However we’re going to go to the final step and connect our local repo with our remote repo that we set up earlier on GitHub.

Step 4. Add and Push!

First thing is to tell your local repo which remote repo to connect with. The url will be the one GitHub supplied to you when you created your remote repo – head back there to get the url for your project.

$ git remote add origin https://github.com/cpalmerbright/my-site.git

This step only needs to be done once. The next step will send (or ‘push’) any commits you’ve made up to the remote repo

$ git push -u origin master

Once you’ve done this once, you will only need to use ‘git push’ to send any future commits to your remote repo.  And we’re done! The video below shows me working through each of these steps in terminal so you can see what output to expect.

Summary

  • Create a remote repo and then a local repo
  • Git init only needs to be done once per project
  • Git add only needs to be done once per file. Once you’ve added a file to your local repo it’ll stay there and each new version of it will be saved
  • Git commit ‘saves’ a version of your project in its current state
  • Git remote add will link your local repo to a remote repo (such as the one you created on GitHub)
  • Git push sends any commits (saved stages of your repo) to GitHub/the remote repo

A final tip for using version control – the git mantra is “commit early and commit often”. Make sure you start saving your work early (before you have a chance to break it!) and make commits often so that when you do eventually break something, you don’t lose too much work by reverting to a previous version.

Hopefully that’s been helpful to some of you. Part 2 of this tutorial will look at creating branches and making pull requests – read it here!

5 Comments

  1. Git confuses me. This is the exact explanation I needed.

    • cpalmerbright

      May 18, 2017 at 1:15 pm

      So glad to hear it! I did a bunch of git tutorials without having actually USED it, and it was all abstract and confusing, so having a real example (especially one using just a few front end files) would have been great! Anything you think could be clearer?

  2. I love this tut! I was even hoping for a video and was not disappointed! Even though I code, the command terminal feels cumbersome to me. I started using the Git GUI SourceTree, and I like the simplicity of mouse-clicking over typing commands. Your tutorial covers all the basics, and I like the way you explain things! Might I suggest that you either, explain where to find the terminal and how to navigate between folders, or link to another page that explains that? Sometimes I forget how to use the Terminal since I’m so used to GUI’s. Thanks for this awesome reference guide! Bookmarked!

    • cpalmerbright

      May 25, 2017 at 7:04 am

      Great suggestions! There’s all these things people just assume beginners know, it’s hard to fit them all in but I’ll definitely add a link. In fact I might do an extra video with voice over to show all the steps all together

  3. Nice simple explanation. Thanks!

Leave a Reply

Your email address will not be published.

*