Git tutorial - quick start with Git, GitHub and SourceTree

Git tutorial - quick start with Git, GitHub and SourceTree

The purpose of this post is to show you in a very quick way how to create repository on GitHub and put there your code using SourceTree. This is a part of our original Git tutorial (which was written in polish language) and it’s created for our free ASP.NET Core & React course. Let’s start!

1. GitHub

Go to GitHub page and click “Sign up” (mark no. 1) then you should see registration form similar to this one below.

Fill all required fields – Username, Email Address, Password and click “Create an account”. Next, you will be redirected to second step. You can leave all options with default values there (as showed below).

Click “Continue” and you will be redirected to third step. You can give there some info about you and click “Submit” or skip this whole step using “skip this step” button.

Ok, this was the last step of the registration process. Now you should see in front of you screen similar to this presented below. We are interested in a “Start a project” option, but before you will be able to choose this you must confirm your account – to do this check your mailbox, you should receive an email from GitHub with instructions and appropriate link.

After clicking “Start a project” you will see form intended to create new repository. You have to specify name of your repository (mark no. 1) rest of options you can leave with default values. Then click “Create repository”.

*I’ve also showed (mark no. 2) how you can create new repository from top menu.

After repository has been created you will be redirected to it. It’s the place where our code will be held. At this moment it’s empty, so we can see only some tips how to start work with it. What we are interested in is a link to our repository (mark no. 1) which you need to copy.

2. SourceTree

You can download this tool here. During installation you will have to create an account – for some time this step is unfortunately required. When installation has been completed we can start the program. First thing we have to do is to clone our repository from GitHub to local hard drive. To do this choose “Clone / New” option (mark no. 1). Next paste copied link from GitHub page (mark no. 2). Finally change destination path on you hard drive (it’s up to if you want to change it or not)

Downloading a repository can take a while. After it’s done you can go to directory where your repository has been downloaded. At first there is nothing more than hidden .git folder. Now we can put there some file, no matter what, it can be even normal .txt file.

After you put there new file you can go back to SourceTree. At the bottom part of the program (mark no. 1) you should see local changes which are not approved yet (not staged). After each modification in repository on disk (added, edited, deleted file) you will see this change in this bottom window.

Let’s say we made some changes in the project and now we would like to commit it. To do this check the checkbox next to the modified file. After this, file from bottom window should move to top one (mark no. 1). Next we can enter comment (mark no. 2) and then click “Commit” (mark no. 3).

Ok, now your changes are commited, but they are still only on your hard drive (locally). Next thing we have to do is to push our commits to remote repository in order to see them in GitHub. To do this choose “Push” (mark no. 1), next check the checkbox (mark no. 2) and click “OK” (mark no. 3)

Pushing changes can take a while. After it’s done you can go to your repository on GitHub. Refresh page in order to see if your changes actually are there. You should see sth similar to screen below. Right now you are able to check out your changes directly from browser, what’s more – your code now is in the safe place. You can share it and show to someone else.

3. Summary

This was the last step. You can make next changes locally and then commit them and push to remote repository on GitHub. What is the most important – if your computer crash or just you make a lot of mess in the project you always will be able to restore your project and/or revert unwanted changes.

As I said at the beginning of this post, it’s just a part of our original Git tutorial. What’s more – there is a much more staff to learn about Git, but the purpose of this post is just to help you start with this topic and do our free ASP.NET Core & React course. Use this tutorial, do our course an eventually you will have your first or next entry in portfolio.