Git It Together

Outline of this tutorial:

• Background of Git and Github
• Setting up a Github account
• Creating a repository on Github
• Cloning repository to local machine
• Pushing files to Github

Before starting this tutorial, check out our Initial Setup tutorial to set up a text-editor and some other utilities that will make your journey through this easier!

Git what?

Git is the name of a widely used DVCS (Distributed Version Control System). This roughly means that it is a platform that manages changes to code over time from multiple users. Git was created by Linus Torvalds — the same creator of Linux, an operating system that you might have heard mentioned here or there. Git is so important because it’s a tool that helps you neatly keep track of your code. However, this is only used through the command line. You might have seen a command line before (it’s often in the cool cyber scenes in movies).

Git is mainly used for version control, which helps track different changes of the code that they make. You put your work and the history of it on what’s called a repository, or “repo” as it’s most usually coined. Each project you make will have it’s own repo, and all of your repos are stored using Git.

What’s great about Git is that it allows everyone in a team to share the code. When a project is in the form of a repo, other members can “pull” (create a copy of the project) from the repo. Like Google Docs for code! Say you are on a team; you can then make changes on the version that you pulled. When you are at a point where you’re happy with your changes, you can “push” the change. In essence, by pushing the code, you are storing a snapshot of your changes; in the future, you can go back to this snapshot by reverting to the code that you have committed before, similar to an undo command (Like an awesome Ctrl-Z maneuver).

Furthermore, the benefit here is this: rather than making changes on the shared or master version, you can try out new code on your own, and if you mess up, your changes won’t be reflected on the shared version, since you have not “pushed” your code yet. When you feel that your version is good enough to update the main one, you can “push” your code to the main version. This is also useful for individual projects, since you can guarantee that you always have a correct version to go back to in case you make a mistake and need to revert.

A visualization of how Git works.

Remember that Git is a tool, but when combining it with Github, we have a very efficient way to keep track of the various versions of our code as well as changes that other contributors may have made. Github houses all of the projects that you work on using Git except that it is a website, not a command line tool. This makes it easier to view your code and the changes that you may have made — sort of a place that stores all of the drafts that you’ve made.

Setting up a Github account

Go to https://github.com/ and sign up for an account. Then you’ll need to check whatever email you entered and verify your account. This is a basically a way for you to view your projects, as well as others. Like a Google Drive for code!

The logo for Github is an octo-cat. Many more creative octo-cats can be found here for your viewing pleasure.

Creating a repository on Github

1. After that, you’ll be on a new page with a green button saying “Let’s get started”. That will lead to another tutorial made by Github. For now, go to the upper right hand side, and click the small “+” and a draw down option menu will come down. Click “New Repository”.

2. Fill out the repository name, or whatever you want your project to be named. Make sure to also click the bottom box saying “Initialize this repository with a README”. Press create Repository and you’re all set!

3. READMEs are basically a set of instructions or descriptions that come with your project. It’s customary to include one in any project you make so that other people will be able to understand or use what you are working on.

Git and Git Bash

Mac Users: You all have Terminal and Git on your computers already, so you can skip this section and go to ‘Cloning repository to local machine’.

Windows Users ONLY: As mentioned in our Initial Setup tutorial, Windows does not have a built-in Terminal like Mac does. Furthermore, it does not have Git built in. We will be installing an application called Git Bash in order to do all of our Terminal and Git commands.

To install Git Bash, go to this website: https://git-scm.com/downloads and select ‘Windows’ to download the .exe file for Git Bash.

If you are unsure which one to download (32 or 64 bit), head over to our Initial Setup tutorial, and go to where you checked your type of machine when you downloaded Sublime. There’s more information there if you need a refresher on how to download and execute programs!

A window may pop up asking if it is okay for this program to make changes to your Computer; click Yes to continue. Continue proceeding through the installation windows to install Git Bash on your computer. You don’t need to make changes to any of the options in the installation windows, they can all stay default.

Your Git Bash Window may look something like this (the text coloring could be slightly different):

Cloning repository to local machine

1. Open your Terminal or Git Bash application. If you downloaded Git Bash, click on the icon, and it’ll open up a type of terminal you can use. If you’re on a Mac, you already have a Terminal: to navigate to Terminal, follow this: Finder>Applications>Terminal (it’s a small black rectangular icon)

When ever you see text written in grey rectangular boxes, like the ones below, this means that’s it’s code. In this example, this is what you should be typing into the terminal/bash window.

3. Before you move on to the next step, you will need to configure your global username and global email; this will allow Github to display your name when you update changes on all your repositories. Do the following (replace Perry Platypus with the your Github user name):

git config --global user.name "PerryPlatypus"

Next, you’ll set up your email (once again, replace our fake email with the email you registered with Github):

git config --global user.email "platypi@cool.com"

4. Navigate to your Desktop folder by doing the following:

cd Desktop

Note: ‘cd’ stands for “change directory”. When working with a command line, everything is broken down into directories, and so this is how you navigate your computer, rather than following links to folder icons. You have to change directories in order, like you would if you were clicking through each of them.

5. So now we have this repo on the Internet, but we want our own version of this repo on our computer, also called a “local version”, so that we don’t have it edit it directly on Github, which is bad practice. To make a copy that you can access on your computer, go to the green button on the right hand side, saying “Clone or download”, and copy the link that pops up.

6. To clone this repo, we’re going to type the following into our terminal, except you need to change the link so that it reflects YOUR account:

fruthiecodes → your Github user name

Git_it_together → the repo name you made

git clone https://github.com/fruthiecodes/Git_it_together.git

To paste into the terminal, for Mac’s it’s the usual cmd-v, but on Windows you have to use Shift [insert].

Pushing files to Github

Next we want to work with some files to get a hang of how Git works. Let’s make a file!

1. Open up your favorite text editor, in our case Sublime Text. Type a few words and save it as a text file (i.e. filename.txt) into the folder that you just cloned on your Desktop.

note: this is a text editor, not a terminal; the theme is just very dark

1. Let’s commit our new file! In your terminal window, navigate to your folder with the command cd <your folder name>. In our case

cd Git_it_Together

Note 1: avoid making filenames or folder names with spaces. It makes it hard to access via the command line because the terminal won’t think the spaces are part of the name

Note 2: many tutorials or documentation will include [your file here] or <path to here>. They want you to put whatever your file/folder/path is specific to you, but don’t actually include the brackets or side carrots, it’s a convention to denote that you’re adding what you have to the command.

2. Now that we’re at where our files are located, we need to tell Git to add the updated files.

git add --all

The ‘ — all’ will change all newly inserted file, modified files, or delete ones if you deleted them in your local version.

3. Now we need to take a “snapshot” of the code that we uploaded incase we want to ever go back to it, or use it to update the main version.

git commit -m “added platypi.txt”

This commits the change so that it is now saved using Git. The “-m” means that you’re adding a message with your commit. You always want to include a short blurb about what you did, just in case you want to look over what you or other people changed. (Commit messages are permanent, so be…civilized when writing them. That is all.)

4. So if we decide that we are okay with the changes we made, we are now going to update the main or ‘master’ version of the code by “pushing” what we have to the origin of the original code.

git push origin master

After you run the above command, Github will prompt you on the Terminal for your Github username and password. When you are typing the password, you will notice that no characters (not even symbols like *) will be displayed, that is the correct behavior. Once you input your password successfully, you’ll see something like this:

Now, when you look at your repository on Github, you can see all of your changes you made on your local version!

Congratulations! This concludes the Git & Github tutorial; we encourage you to play around with pushing and committing changes to become comfortable with how Git works; we will be using Git and Github next week for our tutorial on how to make a website! Comment Below if you have any questions; mark our article with a heart if you completed it (or if you like it haha)!