How to use Git and Github: The Quick Guide

So you’ve got your new project set up and saved on your computer. While a local copy is good, a great thing to do is to save a copy onto the cloud. This way you’ll be able to access it elsewhere, and it’s safe if anything happened to your device and you lost your local copy. This is where Git and Github come in.

Fig 1: the green new button creates a new repository

While Google defines ‘git’ as:

git: (noun, British, informal)

‘an unpleasant or contemptible person.’

Oxford Languages

In this instance we are talking about the development definition:

Git: (system software)

‘distributed version-control system for tracking changes in source code during software development.’

Wikipedia

All jobs will use Git in their programming so it’s a pretty important thing to get your head around. This post will introduce you to using Git with the command line, and hosting repositories on Github.

  1. Set up your Github account.
  2. Once you are logged in, you will spot a green button in the top left hand corner (see Fig. 1). Select this to create your new repository. This is where your code will be stored.
  3. Once you click the button you will be taken to a page which looks like Fig. 2, this is where you can enter the details as you wish.
Fig 2: this is where you will enter the details of your repository

Once you’ve finished setting up your repository, you will have a set of instructions appear. Now I’m going to explain what we do next. (Note: These instructions are based on the premise that you already have code saved onto your computer which you want to upload to the cloud.)

If your project is in Visual Studio Code:

  1. Open your project.
  2. Go to the top of your screen and select Terminal. On the dropdown select New Terminal. You will see a new box appear at the bottom of the screen, this is your terminal.
  3. In the terminal we will use the instructions which were on the Github page.
git init

This sets up an empty git repository. (Note: Init is short for initialise, not some slang!)

Fig. 3: The alert that appears after I initialise my project “SettingUpGithub”

However two things which aren’t mentioned are the following

git status

Git status is vital to remember. It tells you which files have not been added to your repository (these may be brand new files, or files which have been changed since they were last added). When you type this command in you will either see red text which means that the files have not been added to your local repository, green files which means they have been added to your local repository, or an alert saying everything is up to date.

Fig 4: Here you see that I currently have three files which have not been added to my local repository
git add [file name]

Git add is where we concentrated on the files which appeared in red text for git status. This means we are adding them to the local repository.

E.g.

git add ./CSS/

Note: if you type in the first letter of the file and press tab, it will finish the file name for you. If you have multiple files with the same first letter you can keep pressing tab.

Also you will need to ‘git add’ each file seperately.

Once you have added all of your files, check git status again. You should see all the files which were previously red, are now in green text

Fig 4: I have successfully added all of my files

Now we need to get those local files uploaded onto Git and the repository we set up on Github.

git commit -m "first commit"
Fig 5: the confirmation I have committed three files

Here we are committing the files to the repository. The text in the speech marks is the message which appears to allow others to see what you’ve done, depending on if you personalise the message (which you should do for any commits after the first commit). It helps everyone keep track of the changes which have been made, but that’s another post!

git branch -M master

This sets up the master branch. I believe this is actually getting renamed in the near future so apologies if this post is out of date by the time you read it, though I plan to edit it once the changes come in!

git remote add origin [repository address]

Here we connect your local git to the repository we have set up on Github. If you follow the instructions on Github you will see your personal address which you will need to add here.

[At some point around here you will be asked to login to Github if you’ve not done that previous.]

git push -u origin master

And finally, this is where we duplicate our code into the new repository on Github. Here we are pushing it to the master branch, but it’s likely when you start working with Github at a company, you will be pushing it to branches below the master branch as a precaution.

And you are finished! Well done, you have successfully pushed to your first repository.

If you now use the git status command you will get this screen until you make any changes to your files.

Fig 6: All files have been successfully pushed to the master branch

I hope you enjoyed reading this. Over the next posts in this series we will look into alternatives to Github, how to use Github Desktop and get you started on contributing to Open Source projects.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: