DEV Community

Cover image for Git and GitHub: The Complete Guides - Chapter 3: GitHub Basics
Goran Kortjie
Goran Kortjie

Posted on • Edited on

Git and GitHub: The Complete Guides - Chapter 3: GitHub Basics

welcome

Some important topics we covered in previous chapters allow us to do some interesting things with our local repositories, up to this point, we know how to create a repository, how to make commits, how to go back in time and check the previous state of the project and then to undo things. We are now ready to learn about Github.

Here we are going to cover:

  • What Is GitHub
  • Create First Repository on GitHub
  • Pushing Local Repository to GitHub
  • Make First Commit on GitHub
  • Pulling From GitHub To Local Repository

What Is GitHub

As stated before, GitHub is an online service where you can share your code or files in order to collaborate with different people. To make it simpler, it is another computer that everyone working on a specific project has access to.

collaboration

For example: You can imagine a web developer team who want to build a website and everyone has to update their code simultaneously while working on the project. GitHub allows them to build a centralised repository where everyone can interact with each other and manage the code. Eventually the end product will be built on an online repository.

It is pretty common for people to be a little confused about the differences between Git and GitHub.

Differences between Git and GitHub

  • Git is a version control tool, which allows you to manage your project locally. Additionally, it allows you to fetch data/files/code from the central server or push data/files/code to it.

  • GitHub is a hosting platform which allows you to host a repository on a remote server. GitHub is a user-friendly public platform with a nice visual interface where millions of users are sharing their projects to the entire world.

Create an account on GitHub

To get you started on GitHub, we need to create an account. First we need to visit the website called GitHub

If you don't have an account already. You should be greeted by this amazing welcome screen. Click on the green button that says **sign up to GitHub**.

create-an-account-on-github

Make sure to create an email account if you don't have one already and make double sure you have access to your email account.

  1. You have to provide your email address, since you will need to confirm or verify your account with a special code that will be sent to you from GitHub.
  2. Next you have to provide a secure password. You want to choose something you will remember or you can save the password in the browser or some other password vault software. GitHub requires your password to be at least 8 characters long, containing capital letters, numbers and special characters.
  3. Next you have to provide your username or account name. This needs to be unique across all of GitHub, meaning you have to choose a name no one else has on GitHub.
  4. Next you have to decide whether you want to receive any product updates or news from GitHub which they will send to your email address that you provided.
  5. Next you have to complete a little test GitHub created, I think its aim is to prove you are in fact a human being.
  6. If you are human, you will pass the test and be able to create an account. Once you click to create an account, GitHub sends a special code to your email address, which you need to find in your emails to verify your email address.

github-sign-up

Once you have entered your code, you will be greeted by another page that will ask some questions, these questions are totally optional. You can choose to skip or fill out the form with your information. Once done you will jet through space and reach the GitHub!

complete-sign-up

I haven't signed up to GitHub since I started and I was really impressed by their welcome animation sequence, Chef's Kiss πŸ‘¨πŸ»β€πŸ³ πŸ’‹

Even though there were noticeable changes to GitHub, the premise remains the same on the Dashboard. To start off, we are going to have a look at other repositories that people have shared on GitHub. We can do this by either typing for what we want in the search bar, at the top left or click on explore Github.

We are taken to a page that shows us some random repositories that GitHub thinks you might be interested in, We can also see trending repositories and trending developers. The idea here is pretty universal, you can follow the developers or give stars to their projects, or you can try and find specific topics you are interested in etc...

It wouldn't hurt to spend a few minutes here and browse around the explore section of GitHub, you might find some interesting projects and people.

github-explore

Here is an example of how a repository looks like on GitHub.

We are going to the React repository page. Please note that all repositories look the same way.

When we get to the repo we see a bunch of folders and files; these files actually contain all the code that is used in React. We can go into these files and see the code for ourselves. We can even clone this repository to our local computer or download it.

github-sample

There is a lot going on when you looking at a repository for the first time, Lets dive into some of the basic concepts.

First lets dive into something we know about: Commits
Similar to Git, we are able to see all the commits made to the React Library, as of this article there are 14,453 commits. We can see the individual commits and like with Git each commit has a unique ID and additional information.

We can also see the Releases of the different versions of the React library.

github-explore

We can see how many people are using the React library, as of this article there are 7,449,881 million users. We can see the people who are contributing to the library, currently there are 1495 contributors.

Up top, we can see some icons called Watch, Star, Fork.

Watch allows us to receive notifications when the React library gets updated, Star is basically a Like πŸ‘ ... you can give the library. Fork is a subject we will discuss in later chapters...

github-sample

Next we can have a look at our profile page.

Here you can change your profile picture, add your information such as name, your bio, company etc..

I would advise those not familiar with GitHub to spend some time on this page.

github-sample


Create First Repository on GitHub

We can create a repo (repository) in GitHub by either choosing the start project button or the create repo button. When we click either button we are taken to a page that allows us to fill in some details concerning our repo.

Firstly we have to give a name to our repo. Next we have to provide some kind of description of what our repo is about (optional). Next we have to decide if we want our repo to be public or private. Next we can decide if we want to initialise our repo with additional files, namely Read Me, .gitignore and a license.

github-create


Pushing Local Repository to GitHub

Currently when we look at our repo it is empty. We need to add files to this repo for it to be useful to us. GitHub provides us with some commands we can use in different situations. Ideally we can add our local repo to GitHub.

  • …or create a new repository on the command line
  • …or push an existing repository from the command line
  • …or import code from another repository

git-hub

Since we already have a local repo, we going with the second option. Lets go to our local repo inside our IDE.

Inside our local repo, we are first going to check out our commits with git log --oneline and then check the status with git status. We do this to make sure our files are being tracked by Git.

First we need to connect our local repo to GitHub, we do this with the following command:

git remote add origin 
Enter fullscreen mode Exit fullscreen mode

This command is followed by the unique link GitHub provided for us. For example:

git remote add origin https://github.com/iFieryGodME/gitProject.git
Enter fullscreen mode Exit fullscreen mode

I already added this repo before recording that why I get the message error: remote origin already exists. You should be fine on your first try.

Next we have to specify our branch name, if you can recall, the local default branch name is always master. Although this can be changed.

Note that the default branch name for GitHub is origin/master

Next we push our files over to GitHub with the following command:

git push -u origin master
Enter fullscreen mode Exit fullscreen mode

github-push

We have now added our local repo (local files of our project) to our remote repo (online storage).

git-repo


Make First Commit on GitHub

We can see our previous commits on GitHub by clicking the commits link on the right side of our repo. Here we can see who made the commit, the time it was added and its description.

To make a commit on GitHub, all you have to do is click on the file you want to edit. On the right side you will see an icon that allows you to edit the file.

Once we make our changes to the file, we can see at the bottom of the page where to add our commit message and additional description, which is optional. Then click commit changes.

When we go back to our commits history, we can see a new commit has been added. But you may notice that our local repo is now outdated since it will not track our commits we made in GitHub. We can confirm this by going to our local repo in VS-Code and checking the history of our commits with git log --online.

github-commit


Pulling From GitHub To Local Repository

When we check the history of our commits in the local repo, the newly created commits don't end up there. Meaning our local repo is outdated. We need to pull the data from GitHub to it. To do this we need to run the following command:

git pull origin master
Enter fullscreen mode Exit fullscreen mode

Then when we check the history, we will see the last commit made on GitHub.

origin refers to our online repo, master refers to our local branch, this command basically says pull data from origin (remote repo) to master (local branch)

git-pull

When working with Git and GitHub, you should be frequently using the git pull command and specifying the name of the remote (origin) and the name of the branch (master).

In order to avoid indicating those names all the time, Git allows us to set a shorter way to pull data from the remote repo. To do this we have to run the command:

git branch --set-upstream-to=origin/master master
Enter fullscreen mode Exit fullscreen mode

Lets explain quick.

The first master is a branch on our repo on Github. Which is created by default when we create a repo on GitHub.
first-master

As for the second master, it a default branch on the local repository.
second-master

Once we run the command git branch --set-upstream-to=origin/master master and then make a new commit on GitHub.

github-set

Watch closely to see how to create a file or folder on Github. You create a folder by giving it a name, followed by a forward slash.

Once we made our commit on GitHub, we can go back to our local project and pull that data down. But now without specifying the remote branch or local branch. To do this we run the command:

git pull
Enter fullscreen mode Exit fullscreen mode

git-pull-short

GitHub is truly an awesome platform and there is still a lot we can dive into. We have only scratched the surface. The power of GitHub really manifests when working with a large group of people on a large project, like the example of React we saw. It allows for immerse productivity and a sure way to maintain your code. In the next chapter we going to chat about Branching...

I hope you enjoyed, peace and pizza!

pizzabye

Top comments (0)