GitHub Tutorial for Beginners

Today we are going to talk about GitHub, an open-source version control (using git) and software hosting provider. There are alternatives to GitHub (which is the hosting provider) such as GitLab, BitBucket, and more, but today we will focus on GitHub. This tutorial can be broken down into two parts:

  1. Intro to git (Why is version control important/useful?)
  2. Intro to GitHub (What is GitHub and how do I use it?)

Prerequisites:

If you are choosing GitHub Desktop or are a more visual learner, you may enjoy this video instead:

OR, if you want the quick and dirty version, see here:

Without further ado, let’s get started!

** I assume terminal usage here is bash/zsh either on Linux, macOS, or WSL NOT the Windows Command Prompt. If you are a Windows user, I would recommend GitHub Desktop.

Intro to git

So what is git and version control anyway? Git is a software program to manage changes in a particular file or software system and allows us to see changes to files and accept or reject those changes on a line by line basis. Furthermore, git allows us to revert our programs back to a previous state should the current program become unstable.

A great way to think about git and version control is the “Track Changes” feature in Microsoft Word. In fact, I am convinced that Microsoft created this feature entirely motivated by version control software like git (they do own GitHub after all). In the image below you can see Track Changes on the left and a GitHub “diff” view (which shows recent changes) on the right.

Anyway, when using Track Changes you can see modifications another user (if you are collaborating) or you yourself made. You can also apply comments. Git works in a similar way to track software files and allow developers and analysts to track changes in their code. In software this has the added benefit of allowing developers to use a “test” branch (commonly called the development branch) to test new software features without affected the main production branch (and thus the actual product).

Git commands

There are four main stages to any work with git. These are very commonly typed into a terminal.

git init

git add <file(s)>

git commit -m "Insert message here"

git push <remote> <branch>

The first of these commands is very straightforward it either initializes a new git repository if none existed, or reinitializes the existing git repository (which is just a .git folder). The second command is used to add files to staging. Whenever you make changes to a file and are satisfied with them or want them in the git history, you should commit them to git for tracking. To do this you first need to ‘add’ them (command 2). You can add one file at a time or many. You then use command 3 to commit these files to git for tracking. The message you use in your commit command should reflect the file changes you made to the file(s) currently in staging be it one or many. Then finally, we use command 4 to push our current git status to the remote hosting provider. This one will make a little more sense in a few minutes, but (generally) we are pushing our main branch to the origin remote. Again, it will make sense in a few minutes.

* These commands can all be accomplished using GitHub Desktop click and drag as well, please see the above video for an example.

I think that is a sufficient introduction to git, and while we didn’t talking about branching or merging or any of the more complicated features, this gives you a good idea of how you can track your file changes over time using git.

GitHub Introduction and Example

GitHub (or any git hosting provider) is where, to me, the power of version control really shines and this is for two reasons. The first is that now you are able to contribute to other people’s code bases using pull requests (discussed below) or vice-versa and the second is that your code is now available for anyone to see (assuming your repository is public). This is the essence of the open-source movement. GitHub can also be used to host static websites, documentation, manage CI/CD pipelines to continuously update your production applications when new code is committed, and more.

I am going to assume you have created an account at GitHub.com as recommended above. Now, you can follow along as we create a new repository, clone (copy) it to our local machine, make some changes, and then push those changes to GitHub.

The basic GitHub flow can be seen below (although we will not be using all of these features, it is still a great image):

Step 1 — Create a Repo

Create a new repository by clicking the + icon in the top right and then clicking “New Repository”. You should then see this screen:

New Repository
New Repository

All of your repositories will be created under your username combined with the repository name. For this one I am just going to call it “example”. You can name yours whatever you wish, just replace “example” with the name of your repository in the steps below.

We are going to leave the rest of the options as default except we are going to click “Add a README file”. README files are like introduction files for repositories. We want to check this option to illustrate what happens when we clone a repository in the next step. Finally click “Create Repository”.

New Repository Options
New Repository Options

You should finish this step looking at your newly created repository, congratulations!

Confirmed New Repository
Confirmed New Repository

Step 2 — Clone Your Repo

* This step is different for GitHub Desktop users, please see the above video tutorial.

In this step, we are going to clone our new repository to our local machine. We can do this by clicking on the ‘Code’ button, then the HTTPS option, and copying our repository’s git url.

Clone Repository
Clone Repository

Now that we have our url, we can copy the code by opening our terminal, navigating to whichever folder we want (I am choosing my desktop for this demonstration) and ‘git clone’ing our repository url.

So for me, on macOS, my terminal commands were:

cd Desktop to switch to my desktop folder

git clone <url> which for me was git clone https://github.com/nanthony007/example.git

Then I can type ls to see my new repository folder was created and then cd example into my new folder.

Cloning into repo
Cloning into repo

Now we should be inside our terminal and if we run ls again we should only see our REAMDE file listed. IF you made it this far, congratulations! You’re awesome! Now let’s make some changes and push those changes to our GitHub repository.

Step 3 — Making Commits and Pushes

For our last step we are going to open our README file. If you manage to navigate to this folder in your file explorer you can right click and open this with any text editor, or, if you have VS Code installed, directly from a terminal you can simply run code . to open the current directory in VS Code.

However you get there, let’s make some changes to our README file. I am going to add a sentence at the end of the file that says

“This was added from my local machine.”

Great! The only thing left is to commit this change to git, and push our changes to GitHub. Let’s run our standard git commands:

git init

git add . to add our README file

git commit -m "Updated README file" to commit our changes

Here we can see there was 1 file changed.

If you look at your GitHub repository now, you will see the README hasn’t been changed yet, let’s fix that by pushing our changes.

git push origin main

* GitHub remotes default to origin, but if you weren’t sure, you could run git remote --list to see all available remotes.

Commit and push changes
Commit and push changes

Now if we refresh our GitHub page we should see new changes were made and our README has been updated:

That’s it! That is the basic git/GitHub workflow! Congratulations if you made it this far!

If you want to see your git diff you can click on the most recent commit to see the file changes involved with that commit! :)

Now you can make new files, projects and share them all with the world on GitHub. I encourage you whatever project you are working on, share it with others!

I hope this was practical to some and insightful to others! Thank you for your time, see you in the next one!

--

--

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