Github 101: Introduction to GitHub for a better portfolio

Are you learning to code, create projects, and keep track of them locally on your computer? Are you looking for a way to build your portfolio and push your projects to GitHub? If you have answered yes to any of these questions this blog post is for you.

Install Git and create a GitHub account

If you haven’t installed Git yet you can find the instructions here on how to do so. Once you’ve completed this step head to GitHub’s homepage and create your account. At this point, you should have Git installed and your own GitHub account, where you can collect all of your projects. So here is what we are going to do next:

1. Create a project and init Git
2. Create a file, stage, and commit it
3. Connect the project to a remote GitHub repo
4. Push the code

Step 1:

Let’s open the terminal, create a new folder, cd into it and initialize Git:

‍

$ mkdir intro-to-github

$ cd intro-to-github

$ git init

‍

git init command creates an empty Git repository

‍

Step 2:

Congrats! You have now successfully created a Git repo and your code is ready to be tracked.

At this stage, we will see how Git basic commands work. But before we start, let’s create a new file using the terminal!

‍

$ touch README.md

starting with

$ git status

‍

git status is used to display the state of the repo and staging area. By running this command you would see the tracked and untracked files and changes.

At this point, if you would run git status the results would be as such:

‍

So what does that mean?

In order to understand it we have to take a step back and talk about:

1. Local and Remote
2. Working directory, staging area, and local repo

Are you ready?

We will assume you answered HECK YEAH!

Let’s break down the flow above:

Local repos are locally-managed, which means you can have the full Git experience, with commits, branches, merges, etc without the need to have a remote one.

Remote repos are stored on a code hosting service like GitHub. It's mainly for hosting your projects online so others can see them or collaborate on your project.

Let’s now focus on the local side, the working directory is the intro-to-github folder we’ve just created.

When you make changes to file/s you would go through these steps.

git add to move the file/s to the staging area where they are staged and ready to be committed.

As your file/s are in the staged area, you are two steps ahead of completing the basic git flow.

We follow it by git commit to commit the changes and tell Git “Hey! my code is ready; let’s show it to the world!”.

After committing, the changes will be in the local Git repo and ready to either continue coding or to push your code live.

Step 3:

Let’s pick up where we left off. The last command we wrote was Git status where we saw that we had one untracked file and ready to be staged.

So according to the previous explanation; let’s run Git add; this command accepts an argument where you would specify to either add a file or add all the untracked files.

‍

// for staging all the untracked file $ git add .

// to stage a specific file $ git add README.md

Let’s run git status after staging the file.

‍

Did you notice the difference? The untracked file has transformed and is now ready to be committed. Awesome, right?

‍

‍

Next, let’s run git commit and commit the changes. This command expects a message flag with a message.

‍

$ git commit -m "Added a readme file"

Congrats on reaching this stage! You have now completed the basic flow of Git. You can keep on doing it locally and keep track of your code.

The next step would be connecting the local repo to a remote one and hosting it on GitHub so other people or employers would see your activities and work.

Step 4:

Now go to GitHub and create a new repo. After that, you should have 3 ways to import the code; in our case we are interested in pushing an existing repo from the command line.

Make sure the terminal is in the project’s directory and copy/paste the commands.

‍

‍

Congrats, you have now successfully pushed your code to GitHub for others to see your work!

‍