Session 13: GitHub: Your code online, for everyone

Until now all your code lives on your laptop. Handy for you, but nobody else can get to it. And if your laptop crashes, you lose everything.

GitHub is a website where you put Git repositories online. It is a backup, a portfolio, and a collaboration platform in one. Today you put your code on GitHub. At the end of this session anyone with an internet connection can look at your projects, and you at theirs.

What is GitHub?

GitHub is not the same as Git. Git is the version control system that runs on your computer. GitHub is a website (github.com) that hosts Git repositories: a kind of Google Drive for code, but with Git underneath.

What GitHub adds to Git:

  • Backup in the cloud. Your code is not only local. Laptop broken? Your code survives.
  • Working together. Several people can work on the same repo. GitHub manages who is allowed to do what.
  • Pull requests. You ask permission to put your changes into someone’s project, with discussion and review.
  • Issues. Reporting bugs, suggesting features, tracking tasks: all in your repo.
  • Portfolio. Your GitHub profile is your business card. Employers look at it.

GitHub is not the only option; there are alternatives such as GitLab and Bitbucket. But GitHub is the biggest, with more than 100 million users. In these sessions we use GitHub.

Step 0: Making a GitHub account

  1. Open github.com in your browser.
  2. Click on Sign up.
  3. Fill in your email address. Use the same address you set in session 11 with git config: that saves hassle.
  4. Choose a username. This becomes your identity on GitHub. Pick something you’ll still like in 5 years. You can change your username later, but old links to your profile won’t work anymore.
  5. Verify your account via the email GitHub sends.
  6. Choose the Free subscription. Everything you need is free: unlimited public and private repositories.

Tip for coaches: check whether the ninjas have access to their email during the session. Some laptops are not logged in to webmail. Have a plan B ready: if email verification doesn’t work, ninjas can verify GitHub later at home. The rest of the session works without verification too.

Step 1: Your first repository on GitHub

You have a local project on your computer (from session 11). You are going to put it online now.

On GitHub, click the + icon at the top right β†’ New repository.

Fill in:

FieldWhat you fill in
Repository namemijn-eerste-git-project (same as your local folder)
Description“My first Git project (CoderDojo session 11)”
Public / PrivateChoose Public: others may see your code
Initialize with READMEDo NOT tick: you already have a local project

Click Create repository.

GitHub now shows instructions. Choose the block under "…or push an existing repository from the command line". Copy those three commands: you’ll need them in a moment.

Step 2: Linking your local repo to GitHub

In your terminal (in your project folder):

git remote add origin https://github.com/JOUW_USERNAME/mijn-eerste-git-project.git

What happens here? remote is an external location where your repo also lives. origin is the name you give that location. “origin” is the default name for your most important remote. You can have several remotes (for example origin for GitHub, backup for GitLab), but one is usually enough.

Check whether it worked:

git remote -v

You see:

origin  https://github.com/JOUW_USERNAME/mijn-eerste-git-project.git (fetch)
origin  https://github.com/JOUW_USERNAME/mijn-eerste-git-project.git (push)

fetch = this is where you get code from. push = this is where you send code to. Usually they are the same.

Step 3: Putting your code online with git push

Now comes the moment: sending your local commits to GitHub.

git push -u origin master

push = send my commits to the remote. -u origin master = “remember that master on my computer belongs with master on origin.” Next time you can simply type git push, because Git remembers the link.

GitHub asks you to log in. There are two ways:

  1. Via the browser: GitHub opens a browser window, you click “Authorize”. Done.
  2. With a Personal Access Token: create one via GitHub β†’ Settings β†’ Developer settings β†’ Personal access tokens β†’ Tokens (classic). Give the token a name, tick repo, copy the token, and paste it as the password in the terminal.

For ninjas: method 1 (browser) is the easiest. If that doesn’t work, help with a token.

After a successful push, refresh your GitHub page. Your files are there! Your hallo.py, your commit history: everything.

Step 4: Pushing changes

Make a change locally:

echo 'print("GitHub is cool!")' >> hallo.py
git add hallo.py
git commit -m "Add GitHub enthusiasm"

Push to GitHub:

git push

You no longer need -u origin master, because Git knows the way. Refresh GitHub: your new commit is there.

Step 5: Starting a new project via GitHub

This is the reverse route: you start on GitHub and bring it to your computer.

On GitHub: New repository. Call it python-spelletje. This time do tick Add a README file; GitHub then makes a repo with one file in it. Click Create repository.

Now you bring this repo to your computer. This is called cloning:

cd ~   # go to your home folder
git clone https://github.com/JOUW_USERNAME/python-spelletje.git

GitHub creates a folder python-spelletje with the README in it. And it is a full Git repository straight away: the .git folder is already in it. You don’t need to do git init.

cd python-spelletje
git log --oneline   # you see the first commit GitHub made for you

Now you can carry on working locally and push your commits to GitHub, exactly like in Steps 3 to 4.

Step 6: What if someone else makes changes too?

Suppose: you worked on python-spelletje at home and pushed. Now you are on the dojo laptop and want to carry on. You don’t have the newest version yet.

git pull

git pull fetches the newest commits from GitHub to your computer. It is two actions in one: git fetch (fetching) + git merge (merging with your local code).

Always do git pull before you start working, otherwise you fall behind and you get merge conflicts.

Summary of the workflow:

CommandWhat it does
git pullFetch the newest version from GitHub
Work on your code, make commits (git add, git commit)
git pushSend your commits to GitHub

Remember: pull before you start, push when you’re done.

Showcase

Show a coach and a buddy:

  1. Your GitHub profile with at least one repository.
  2. The commit history of your repo on GitHub (click on “X commits” above the file list).
  3. A fresh git push that has just arrived on GitHub.

See you next time!

“Now your code is online. But what do you put in a commit message? How do you write a message that is still clear in three months? And how do you work with a team without breaking things? Next time: the professional side of Git: best practices every developer uses.”

Take it home

  1. Easy: Push an existing local project to a new GitHub repository.
  2. Medium: Make 3 commits locally, push them, and check on GitHub whether they are all visible.
  3. Hard: Clone a repo from GitHub, make a change, commit, and push back.
  4. Very hard: Simulate working on two computers: clone a repo, make a commit and push. Go to another folder, clone the same repo again (as if it were another computer), make a different commit, and try to push. What happens? Solve it with git pull.