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:

• Terminal commands (skip this entire section if you know how to use Terminal commands)
• — What is Terminal
• Git version control
• — What is Git version control
• — How to add Git to files
• — How to use Git
• Local and remote repositories
• — Local vs. remote repositories

And finally…

• What is Github?
• — Plus a cheat sheet of all the commands!

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 online option being Github). Github the website/company was founded in 2008.

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 pass around USB sticks as a preferred method of sharing code — 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!

1. Open up Terminal:

• Command + spacebar to open up Spotlight search, type ‘terminal,’ then press enter to open it.

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

• Type cd <folderName> in Terminal and then hit enter to change directories aka move into a certain child folder. You can tell which folder you’re in because it says the name of your location on the left of each command line, and you can move into grandchildren folders only if you know both the child and grandchild names, aka the path name.
• — Use ls to list all your folders and files if you forget their names, and hit tab while typing the name of a folder or file for autocomplete (names are case sensitive!).
• — Use cd .. to go up a folder ( . refers to current location; .. refers to one level up; and ../.. refers to two levels up)

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.)

• ls to list all the children in the folder you’re in. If you’ve just created it, it should be empty!

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. 💎

• ls -a to list all the children, hidden files included, in the folder you’re in

• Side note: Below is how you get a different color for your terminal. Related side note, you can use Command + t to create a new tab within your Terminal window.

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.

1. Once you’re in your folder in Terminal, run git init to initialize (add) Git tracking to that folder.

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!

1. Open your file, either by typing code <fileName> in Terminal (if you have VS Code installed; ‘code’ says to open it in VS Code), or by opening it in Finder with a text editor.

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.

• Or, have your Terminal open on the side. In either case, make sure you’re in the right folder — you know, the name on the left — by double checking your Terminal command line.

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:

• git checkout -b <nameOfNewBranch> is used for creating and changing into a new branch, where:
• — The -b flag stands for git branch <nameOfNewBranch> , the command used for creating a new branch
• — git checkout <nameOfBranch> is the command for changing which branch you’re working in, and won’t work if the name of the branch doesn’t exist aka hasn’t been created yet.
• git stash is another command that I personally don’t use as much, since I prefer creating separate branches instead.

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:

• You can have just a local repository and no online backup of it. (This is rare)
• Conversely, you can also have just a remote repository and no local version on your computer. (This is rarer. Who wants to edit their code in a WYSIWYG with no syntax highlighting nor ability to compile?)
• Or, better yet, you can have both a local and a remote repository and link them together, and update one with the other via Terminal commands. (This is the most well-done in terms of best practices, as well as steak 🥩 Kill all the germs! 100% defense!!)

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