Git and Github for beginners

Jonas Duri
5 min readOct 19, 2019

--

This is a short and deliberately incomplete introduction into Git and Github. Note, that there is a lot more to learn about this topic.

What is “Git”

Git is a distributed version control system. It helps teams to work collaboratively on a shared codebase.

The git command-line program

Git is also a software that you can download. Some operating systems like macOS already have Git installed. You can check if you already have Git installed by opening a terminal on Mac or powershell on Windows.

Type git --version and press enter.

git version 2.20.1 (Apple Git-117)

If the output looks similar to this — congrats’, your computer already has Git installed. If not, visit https://git-scm.com/ and download the appropriate version for your operating system.

It doesn’t hurt to restart your computer after the installation, but it should work without doing so.

Github Download and Configuration

Download and Setup Git
Configure Git on your computer

Essential Terminal commands

cd — "change directory", lets you navigate into and out of folders, just like you can do with Explorer or Finder

Jonass-MBP:~ jduri$ cd Documents
Jonass-MBP:Documents jduri$

Navigate from the “Home” folder ~ into a folder called Documents.

Jonass-MBP:Documents jduri$ cd ..
Jonass-MBP:~ jduri$

Navigate from Documents back to the "Home" folder ~.

ls — ls lists all files in a folder.

Jonass-MBP:~ jduri$ ls
Applications Documents Desktop Downloads test.html

It shows the folders Applications, Documents, Desktop, Downloads and the file test.html.

pwd — pwd stands for "Print Working Directory". It shows you the path to the current directory.

When you are inside the Documents folder pwd will show you the path.

Jonass-MBP:Documents jduri$ pwd
/Users/jduri/Documents
Jonass-MBP:Documents jduri$

What is a “repository”

A directory or storage space where your projects can live. Sometimes GitHub users shorten this to “repo.” It can be local to a folder on your computer, or it can be a storage space on GitHub or another online host. You can keep code files, text files, image files, you name it, inside a repository.

https://readwrite.com

Github

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

With Github, you can...

  • View the code of your repository code online
  • See commit messages
  • Synchronize your local folder with the version on Github
  • Use the built-in text editor

Create a new repository on Github

To create a new repository go to https://github.com and sign-in with your credentials.

You can now see a + icon in the upper-right corner, next to your profile image.

Create a new repository

Next, you can choose a name for the new repository. Although it’s optional, you should always add a description of your project too.

Choose a name and a description

Once you created your new repository, you can see the URL to it. You can either use https or ssh . Please ignore the ssh for now, since it is more complicated to setup.

Copy the URL and make sure that it starts with https:// .

Copy the HTTPS URL of your repository

Clone the repository to your computer

Clone a repository to your computer

Install code . shell command for Visual Studio Code

Tipp

You can install a shell command to simply open any folder in Visual Studio Code from your Terminal.

Open Visual Studio Code and press ⇧⌘P (MAC) or Ctrl+Shift+P (Windows) to show Show Command Palette. Then, type Shell Command and choose to install the command to your PATH variable.

Install “Shell Command” for Visual Studio Code

When you navigate into your repository folder with the Terminal, you can now type code . to open the folder with Visual Studio Code.

User `code .` command from the terminal

Git & Visual Studio Code

Commit a file and upload your changes to Github

You can use Git and Github directly from Visual Studio Code. Just edit or create a file and save your changes. After that, a blue indicator signals that you have changes that are ready to be committed to your repository on Github.

The blue (1) indicates that you have one change ready to commit

Don’t forget to give your changes a descriptive commit message. It helps you and other developers to track the development of a project over time. It is also possible to go back to any commit in the history of your repository.

You can view your recent changes on Github

Pull code changes from Github.

You can not only change your code from your local computer but also directly within Github. The website has a build-in text editor that you can use to quickly fix minor parts of your code. It’s not as powerful as a real code editor like Visual Studio Code, but it can be quite useful.

Edit files on Github

If you make changes on Github’s website, you can pull these changes back into the repository on your local computer.

Pull changes from Github

There is still a lot to learn about Git and how to efficiently use version control. This introduction uses the graphical interface from Visual Studio Code to commit changes and pushing to Github, however, you can do all that from your terminal with just a few simple commands.

Resources

Check out the playlist from Github’s Youtube channel to learn more about topics like commit, checkout, branch and merge.

--

--

Jonas Duri

Platform Architect working on frontend & UI solutions for distributed e-commerce systems | https://jduri.com/