Intro to Github 101 — What is Github?

This article is part of my “Intro to Github 101” trilogy:

- What is Github?

- How to use Github

- How to group Github

I remember when I first heard about Github, I was so confused by how it worked. All the tutorials I found mentioned command lines but didn’t explain them, which made things all the more daunting. Wasn’t the point of Github to not have to deal with Terminal commands, to store my coding projects online so I didn’t have to keep them on my laptop?

Spoiler Alert: It is not.

Extra Spoiler Alert: It’s meant to be an online back-up of your local Git commits, and local Git commits (ie on your computer) require Terminal commands.

Bonus Extra Spoiler Alert: But it still means Github makes it easier to share your files with others (group Github).

What do Terminals have to do with Github??? Is this the end — or is this the terminal?

Today I’d like to introduce Github to someone who knows how to use a computer, but might not be a computer scientist. To do so, we’ll have to understand some prerequisite concepts to understand Github, after which we can learn how to use it. In this article, we’ll talk about:

And finally…

What is Terminal?

Note: Terminal is the name of the CLI (Command Line Interface) software on Macbooks. On Windows computers, it’s called Command shell.

On your computer, you’re probably used to navigating your files with a built-in file navigator such as Finder (on Macbooks) or File Manager (on Windows computers). Each of these file navigators is an example of a GUI (pronounced ‘gooey), or Graphical User Interface. GUIs are user-friendly interfaces that don’t require coding or typing commands in Terminal (more on this later), in that you can do things like drag and drop instead of writing code to tell your computer to do what you want it to do.

However, GUIs can only do so much. You can take a selfie with your iPhone by pressing the shutter button, and you can also set a 10 second timer by tapping on the timer settings: this will take a picture 10 seconds after you tap the shutter button, for if you need time to position yourself for your photo.

But can you set a 54 second camera timer? No, because that button — that user interface — doesn’t exist. But, if you had some way to talk to the iPhone’s Camera code, you easily could, by taking the 10 second timer function and replacing ‘10’ seconds with ‘54’.

This is where Terminal comes in: Terminal allows us to talk to our computers in ways that Finder can’t. These commands are typically more advanced than what your basic computer consumer needs, which is why they haven’t been coded as buttons or visible interactions in Finder, or at least not yet. (With the rising demand for technological literacy, who knows what the future holds!)

And you’ve guessed it: Using Git version control is a more ‘advanced command’ that your typical computer user doesn’t use.

What is Git Version Control?

First off: Git and Github are two different things.

Git came first. It was created in 2005 by Linus Torvands, and your computer doesn’t need to be connected to the internet to use it.

Github came after Git, and is the online version of Git, similar to Google Photos for photos, or Google Drive for documents. You can sync or choose not to sync, or think about whether or not to sync, your local Git and online Git (one such option being on Github). Github the website/company was founded in 2008 by 4 men and not enough women.

More on Github later, but Git is a version control software. Most computers come pre-installed with it (you’ll have to download it if yours isn’t). It tracks the changes you make to your coding projects, ie your code, whenever you tell it to ‘save.’ An important distinction is that Git DOESN’T track what your code looks like currently. Instead, it tracks what CHANGES you’ve made.

With Git, we also use the term ‘commit’ instead of ‘save.’ As a result, each of these save points (for our changes) is called a ‘commit.’ No more white knighting!

Git tracks changes to your code, not existing code.

Typically, the sum of all your commited changes will result in what your code looks like now. However, I make this distinction because when it comes to group Github (I say Github because most of us don’t share code by passing around USB sticks), knowing this difference will be very important so that you don’t lose code.

This might already be a given, but version control is useful if you make a mistake and want to go to a previous commit in your revision history. Git will look at that point, plus all previous changes that were commited up until that point, and then ‘reset’ your code. (Author’s note: I’m not sure whether it does this by rebuilding up to that point in your revision history, or whether it does the opposite of the most recent changes back to that point.)

How To Add Git To Files: Prologue

The below will go over how to create folders and files via Terminal as an introduction to using Terminal (which we need to add Git). Skip to ‘How to Add Git to Files’ if you already know how to do this!

2. In Terminal, navigate to the folder that you’re looking for, that you want your project to be in:

3. mkdir <folderName> to create a new folder in your current folder (the name of the folder you’re in will be listed on the left), and then cd (change directory) into it!

(Btw, use rm -rf <folderName> if you need to recursively and forcefully remove a folder: remove the folder, as well as all its children, and children of children, and children of children of children… in it. As you can guess, rm <fileName> is what you use to remove files.)

4. touch myNewFile.js to create a new JavaScript file called myNewFile. Can be named whatever you want with whatever file extension (as long as you can type in it), because TI says you can have whatever you’d like. 💎

How to Add Git to Files

When you create a new folder or file, it can’t track your changes until we say to add Git to it. We technically add Git tracking to a folder, so that all files within that folder can have Git tracking.

Now, all files within that folder will have their changes in code observed, but not necessarily committed or documented, until we use the commands git add . and git commit -m “Commit message" (more on this in ‘How to use Git’) to tell Git to track them.

Important Note: You can NOT add nested Git tracking: You can’t add Git to a folder that’s in another folder that already has Git tracking on. As a result, you always want to git init at the lowest folder possible, because sometimes it’s hard to figure out which parent folder has Git — it’s not always in the folder directly above.

How to Use Git

OKAY, now that we’ve added Git tracking to our folder… let’s use it to actually track our changes!

2. Make some changes! And either open up the built-in terminal in VS Code by clicking the highlighted (X) and /!\ button in the bottom left (highlighted in the below screenshot because my cursor is hovering over it, but you can’t see my cursor), and then the ‘TERMINAL’ tab.

I can save this file all I want, but for all you know, I could have typed “Hello, buttfaces!” before typing “Hello, world!”

No matter how many times I save this file, I won’t be able to view my revision history — unless, you know, I had committed my changes with Git.

3. In your Terminal (either the built-in VS Code one, which I prefer to use, or your standalone Terminal), run git add . to ‘add’ aka stage all the changes you’ve made in that file. The . represents everything in your current aka working directory. Staging our changes is similar to how developers use DEV, STG, and PROD environments to stage their changes bit by bit, so they’re always testing things before making changes to their live production environment.

4. Next, type git commit -m "Write a message about the changes you've made" to actually commit your changes to your Git change log! The -m flag is for you to write a description about your change, so if you ever need to look at your revision history, you can ascertain what you did without having to go into each commit to find out what had happened.

Congratulations, you now know how to use Git!!

How to Use Git: Additional Commands

At any moment, you can type git status to check to see if you have any staged changes you have yet to commit.

Git status if you make changes but don’t save your file:

Git status if you save your changes, but haven’t git added nor git committed them yet:

Git status if you’ve git added but not git committed yet:

Git status after making a commit:

A piece of semantic history: Github used to call their primary branches the ‘master’ branch, but after the murder of George Floyd in May of 2020, and the resulting resurgence of the Black Lives Matter (#BLM) movement, Github decided to rename their primary branches to ‘main.’

Based on what I saw in my terminal, it looks like VS Code also calls it ‘main’ but Git still calls it ‘master.’

If I want to view my commit history, I simply type git log:

The commit ID, such as f9f54a92202dbba07ecc14fc4a7634d968446d37, is how I would view or roll back to certain commits. You can either revert (create new changes that are the inverse of your old changes), OR wipe out parts of your commit history with reset. To be honest, this happens infrequently enough that I have to google how to do this each time, but best practices seems to be to use revert.

Some other more advanced commands (which I will talk about in the group Github section) include creating new working branches and stashing your updates:

Local vs. Remote Repositories

When we ran git init , we created a .git folder. You can tell it’s a folder by trying to run the command rm .git and getting an error message that it’s a directory.

In the lustrous land of Git, this term for folder is actually called a repository. Your Git repository (i.e. your .git folder) is what stores your project history.

So far, we’ve been locally working on local files within local folders on our local computer. (Is that enough to make you go loco???)

Our local repository is therefore the .git folder in our project folder on our computer.

Remember how Github.com allows you to store your commit history online, should you ever lose your laptop or for some reason the files on your computer get corrupted? Github is where you store your remote repository.

Through your Github.com settings, you can set your remote repositories to be public or private, and can also add other Github users to be collaborators on your project, aka update the code and thereby the revision history on your online Github project.

They can exist separately, and can also be linked together:

Ultimately…What Is Github??

It’s a provider for hosting, viewing, and sharing your Git repositories online.

Github’s business model is to charge corporations for organization accounts that have tasty features, such as authentication (e.g. controlled access) and security (e.g. 2FA) settings.

They’re doing very well and were acquired by Microsoft in 2018 for $7.5B in MSFT stock.

I hope this was a useful read, and feel free to share your notes in the comments!

CHEATSHEET

Make sure you’re in the correct folder when doing each of the below commands!

cd folderLocation

mkdir newFolder

cd newFolder

git init

touch newFileName.ext

code newFileName.ext

ls , ls -a

cd .. , cd ../..

git add .

git commit -m "I made changes to the HTML header."

git status

git log

Software Engineer with a passion for understanding and explaining things.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store