How to Use Git & Github for Complete Beginners — Mastering the Basics

In this tutorial we’ll learn how to setup and connect two of the most powerful technologies in software development, Git & GitHub. We’ll learn how to automate our process to save time, and most importantly: how to secure our project with SSH.

What is Git?

Git is a Version Control System (VCS) that tracks file changes inside your Repository. A repository is a folder that contains our project source code. Or in less fancy terms: a Repository is just a storage container for our project files.

Wait, what is source code?

Source code just refers to the building blocks that make up your website or application. Source code basically means: files and folders.

So, you can say that Git is a folder, that contains other folders and files, e.g. scripts, text, and images.

Git is very popular among the development community, and it’s often used together with Github. Git is language-agnostic, it can be used for all programming languagues and frameworks.

Git has distrubuted version control which means that:

• Multiple developers can work on the same project, without risking overwriting each other’s work.
• Git tracks every change, so everyone always knows who did what, and when
• Git allows us to restore old code — at any time. Did you delete something by mistake? No problem, we can easily restore a previous working version, using so called “snapshots”.

Why Learn Git?

• Because Version Control is essential if you’re working in any type of team environment.
• Version Control is going to save you a lot of time and frustation.
• Git is extremely popular, you’re not going to find many professional work environments where Git is not a main part of the workflow.
• Git is surprisingly easy to learn — you’ll get a high return for your investment.

What is Github?

GitHub is a place where we can host our code and project files for free, in a so called “Remote Repository”. GitHub has one of the biggest archives of plugins, frameworks, and other open source projects, which are free to use for everyone. GitHub is the worlds leading software development platform.

GitHub makes it easy to do collaboration work, manage issues, get feedback, and provide & receive support for your projects. It’s a great place to showcase your skills, while contributing to the fountain of collective knowledge. Everyone benefits.

It’s also common for job recruiters to look for talent on GitHub, who knows, your next job might come as a direct result of your GitHub portfolio.

Git + GitHub

A common approach, is to have local git respository where you develop your product (website, app etc.) and then you use Git to push (upload) your work to a remote repository, such as Github. We’ll learn how to do exactly that in this tutorial.

Setting Up a Local Git Repository

Unsure if you already have Git? Simply write git --version in your terminal and hit enter. If you have it, it will show your current version. If you don’t, it will respond with command not found or something similar.

If you already have Git installed, you can update it to latest version by using the following command in your command line:

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

If you don’t have Git, download it from the official website and download the version for your operating system (Mac, Windows, or Linux).

Once you have downloaded it:

• Windows: double click the git file to begin installing it.
• Mac: double right or right click and click open, it will popup with a warning, which you can ignore by clicking the Open button.

For the installation process (both Mac & Windows) you can just click next / continue on each step, you don’t have to change any of the default settings. On Mac, it might ask you for your password to start the installation.

When you’re done installing, if your terminal (Mac) or Command prompt (Win) is running, shut it down, and open it up again. To confirm that your installation was successful, write git --version in your command line and hit enter.

If it shows the Git version, you’re good to go. If not, I’ll do my best to help, write a comment at the bottom of this article (you need to create an account first, it takes 10 seconds).

Adding Git to a Local Project

It doesn’t matter how small or big your local project is, it can be as simple as a readme file or an index.html file — Git does not discriminate.

If you dont’t have a project, just create a folder on your desktop, and create a file inside that folder, e.g. index.html

Adding Git to an existing project is straight forward:

• Open your command line and navigate to your project folder.
• Inside this folder, write git init and hit enter.

Below is an example of me setting up Git for a personal project called Solutus:

This will initialize a local Git Repository, by creating a .git folder inside your project folder — it’s hidden by default. The .git folder is used internally to track files and changes in your application.

To modify it, we’re going to use Git commands inside our command line.

Basic Git Commands

The following are some of the most commonly used Git commands. Once you are familiar with them, you’ll know most of what you need to know about using Git in practice.

• $ git init // Initialize Local Git Repository
• $ git add <file> // Add files to Index
• $ git status // Check status of Working Tree
• $ git commit // Commit changes
• $ git push // Push to Remote Repository
• $ git pull // Pull latest version from Remote Repository
• $ git clone // Clone Remote Repository into a new folder

Don’t worry about memorizing them now, soon you will be able to write them blindfolded, you just need to practice and go through the process a couple of times.

We’ve already used git init, now let’s add our next command, git status. This command lets us check the current stauts of our repository.

Remember that Git’s job is to track file changes to files in our project over time? git status will show us exactly which files that are currently being tracked by Git, and which that are not.

git status:

As you can see above, I have one untracked file (my only file) in my repository, called: index.html. In other words, Git doesn’t automatically track files in your project — unless you tell it to do it.

Let’s change that, by grabbing our next command: git add <file>. In this case our <file> is index.html so we write the following: git add index.html and hit enter.

To see the changes, write git status right afterwards:

Now our one and only file, index.html is being tracked by Git! Notice the message: “changes to be committed:”? It’s another way of saying “changes to be saved / recorded”. Commiting / saving is what we’ll do next.

Tip 1: if you have more than one file in your project, e.g. CSS or JavaScript files, you can add them all at once by writing git add . — the '.' means all..

Tip 2: you can clear your command line from clutter by writing clear and hit enter. It’s not going to delete any of your work, but it’s nice to have a clean working window (less cognitive load).

Alright, in order to commit and save our changes, we need to create a commit, with a commit message: git commit -m 'First commit'

Now our index.html file has been committed! Your messsage might look a little different, but the important part is this:

• 1 file changed, 12 insertions(+)
• create mode 100644 index.html

This means that our file has been saved / commited. The 12 insertions(+) part on my end, refers to how many lines of code I have in my committed index.html files — yours might look different.

In real life, your commit message -m 'Message....' should describe the changes you made for that commit. You might have fixed a bug, or added a new feature, etc.

Now run git status one more time to confirm that everything is working:

It says “Nothing to commit, working tree clean” — great, this means that everything stored in Git matches everything in your project.

Alright, now that we have setup our project with Git, let’s setup GitHub so we can push our local git repository to our remote Github account.

Setting Up GitHub

If you don’t already have a GitHub account, go to GitHub.com, pick a username, add your email, and create a password. Hit the Sign Up for GitHub button, and you’re done.

Now, login to your GitHub account. The first thing you see is your GitHub dashboard. On the left there’s a newsfeed, on the right you can see your repositories (unless you just signed up).

Securing our account with SSH

SSH keys is a way to authenticate with two parties, by creating SSH keys locally on our machine and giving the public file to github, we can communicate with github securely.

As a bonus, we don't have to type our user name and password everytime we want to get or push code between our local and remote repository.

This next step is not necessary for your GitHub account to work, but it’s something you should do, if you want to be taken seriously as a developer. Security is the most underappreciated area of tech, in that people don’t truly realize its importance, until it’s too late. Don’t be that person.

To set up and SSH key with your GitHub account, go to the account tab (profile avatar icon) at the top right corner, click on it to expand the dropdown, then click on the Settings button. You should now be at https://github.com/settings/profile.

On the left, click on the SSH and GPG keys tab. If this is your first time around the block on GitHub, the SSH section will be empty, and you’ll either need to generate an SSH key, or add an existing one.

Check for existing SSH key

SSH is not specific to GitHub, it’s used on many platforms, so before you go ahead and generate a new one, let’s make sure you don’t already have one on your local machine.

Note: if you’re on a Windows machine, you’ll need to use Git Bash for the following steps. The reason is that Windows don’t support the SSH generating tools that we need.

Open your terminal and write the following to check if you already have an SSH key: ls -al ~/.ssh and hit enter.

If your command line prints out the following file name: id_rsa.pub that means that you already have an SSH key, and you can skip the following step.

Generating an SSH key

While inside your command line, type the following:

ssh-keygen -t rsa -b 4096 -C 'yourgithubemail@gmail.com'

Make sure that everything is written exactly like the above, yes, with a Capital 'C', and using your email that you used to sign up on GitHub. Now hit enter.

First the program will ask if you want to rename your file — I don’t recommend this. Hit enter to use the default file name, id_rsa.

Now the program will ask for a passphrase, enter your password of choice, hit enter, and then enter the same passphrase and hit enter again.

Now that our SSH key is generated, we need to make our machine aware that it exists. Write the following: "$(ssh-agent -s)" and hit enter.

If the result is something like Agent pid 15700 then you’re good to go.

Now write ls -al ~/.ssh and hit enter. You should now have the following files:

• id_rsa
• id_rsa.pub

The .pub file is your public key. If a 3rd party platform wants you to authenticate with an SSH key — e.g. GitHub — this is the file they want. The file without .pub is your own private key, don’t give it to anyone(!).

Now lets add it to our SSH key chain. Write ssh-add ~/.ssh/id_rsa and hit enter.

If your command window prints the following:

Identity added: /Users/YourName/.ssh/id_rsa (/Users/YourName/.ssh/id_rsa).

..then you’re done! Congratulations, this is by far the most annoying, but necessary step, from now on things should move a long a lot faster.

Adding our SSH key to GitHub

Go back to your GitHub SSH settings page https://github.com/settings/keys and click on the New SSH key button.

Give your SSH key a title e.g. “Work MacBook Pro” so you know which machine this SSH key belongs to.

In the Key field, we’ll need to paste the content from our id_rsa.pub file. In order to grab it, fire up your terminal and write: more ~/.ssh/id_rsa.pub. This will print your entire SSH in a long giberish looking string.

Note: if you’re using Git bash, the 'more' command won't work there, you can use a command called 'liss' instead of 'more' and it should work the same.

To copy the string, you can either manually select it with your mouse and hit CMD + C, or save your time and write the following pbcopy < ~/.ssh/id_rsa.pub and hit enter. This will copy your key to your clipboard.

By the way, the next time you need to grab your SSH key, just fire up your terminal, and write the same pbcopy < ~/.ssh/id_rsa.pub — you don’t have to do the more ~/.ssh/id_rsa.pub step first.

Now that your SSH key is saved to your clipboard, go to GitHub and paste it into the Key input field, and click the Add SSH Key button.

Now GitHub will show you a grey colored dot next to the key icon, and tell you that your key has never been used.

Before we move on, let’s try to connect to GitHub. Write ssh -T git@github.com and hit enter.

Now you’ll get a warning, saying that it can’t varify the authenticity of your connection. This is fine (because we know that we’re trying to connect to GitHub).

It will also ask you “Are you sure you want to continue connection (yes/no)?”.

Type 'yes', hit enter, and it won’t ask you again.

The following message will say something like: “You've successfully authenticated, but GitHub does not provide shell access.” — which means that everything is working.

Go back to GitHub, refresh your page, and now your previously grey colored dot will be green, and a message that says ”— Last used within the last day”.

Congratulations, you have succesfully established a secure SSH connection to GitHub!

Have any problems? Feel free ask for help!

Now we’re ready to push our local Git repo (repository) to GitHub.

Pushing from Git to GitHub

Before we can push our local project (Git repo) to our GitHub account, we need to setup a repository on GitHub. This is straight forward. Go to GitHub, and:

• Click on the New Repository button
• Fill out the Repository name input, with whatever name you want for your project.
• Add a description if you want to (optional).
• By default your GitHub repo will be public. If you want a Private profile, you have to sign up for a paid account ($7 per month)
• Don’t check the “Initialize this repository witha README” checkbox.
• Click on the Create repository button.

That’s it, now we’re ready to connect our local Git repo to our remote GitHub repo.

Upload Our Existing Git Repo to GitHub

Before we can upload our Git repo to GitHub, we need to connect the two repos first, write the following (just copy the href from your GitHub project repo, and add .git on the end:

git remote add origin https://github.com/yourname/projectname.git

If you don’t get a message, it means that the connection got through.

Now let’s upload our project to GitHub, using:

git push -u origin master

That’s it, our project has been uploaded to GitHub! Refresh your GitHub repository page, and your repository should now contain your commited file(s) from your local Git repository.

Note: if you skipped the SSH step, GitHub will ask you to type your GitHub username and password before you can proceed. But you didn’t skip the security step, did you?

Re-uploading to GitHub

If you make a change to your local repo, and want to push the changes to your remote GitHub repo, all you have to do is:

• First, open one of your existing files from your repo with your text editor of choice. Then add or remove something e.g. an HTML tag — and remember to save it.
• Open your terminal and write git add . and hit enter.
• Then write git commit -m 'Second commit' and hit enter.
• git push -u origin master and hit enter.

Now reload your GitHub page, and the changes should be live (it usually takes less than 5 seconds for small projects).

Wrapping up (for now)

Obviously, the current state of things isn’t that exiting, we have an index.html file in our GitHub repository, yay! But honestly, we have accomplished a lot of great things. So far we’ve learned:

• How to initiate a local repository using Git.
• How to add files to our repo (so Git watches them).
• How to commit (save) our files.
• How to set up a private SSH key to protect our local machine.
• How to connect our local machine to a 3rd party platform (GitHub) safely using our public SSH key.
• How to connect our local Git repo to our remote GitHub repo.
• How to push (upload) our commited Git repo files, to GitHub.

This, my friend, is far further than most people get in this process. Feel free to start adding and commiting more files. Perhaps try and create a folder called css, containing a yourproject.css stylesheet — but that’s up to you.

The follow up to this tutorial: “Git & GitHub, Beyond the Basics” is coming soon.

Was this guide helpful? Did I make any unreasonable assumptions about your current skills? Let me know about it, and feel free to ask any question. I’m here to learn, just like you!