Lesson 5 of 8

GitHub: putting your code online

So far your repository only lives on your computer. If your computer breaks, it's gone. In this lesson you'll put it on GitHub, so it's backed up online, easy to share and ready to become a real website.

Create a GitHub account

Go to github.com and sign up. It's free. A few tips:

Pick your username carefully. It'll be part of your website's address, like alexandersson.github.io, and it's what people see on your profile. Something close to your real name works well if you want to use it for job applications later.
Use the same email as you set in Git with git config
Turn on two-factor authentication in your settings once you're in. Your code is valuable, so protect your account.

If you want to keep your email private, go to Settings and then Emails and turn on Keep my email addresses private. GitHub shows you a private address ending in users.noreply.github.com. Set that as your Git email with git config --global user.email and future commits use it instead.

Publish your repository from VS Code

The easiest way to put your repository on GitHub is straight from VS Code, because it also handles signing in for you.

Open your my-website folder in VS Code
Open the Source Control panel
Click Publish Branch (or Publish to GitHub)
If VS Code asks to sign in with GitHub, allow it. Your browser opens so you can sign in and approve. Then you're sent back to VS Code
VS Code asks whether the repository should be public or private. Choose public, since you'll publish your website from it later in this course
Wait a moment for the upload to finish

That's it. Go to your profile on github.com and you'll see my-website there, with all your files and your commit history.

Quick check

Why should the my-website repository be public?

Select one answer

Push: sending commits to GitHub

From now on, your repository exists in two places: on your computer (the local repository) and on GitHub (the remote, usually called origin). They don't sync by themselves.

When you've made new commits on your computer, you send them to GitHub with push:

bash

git push

Or click Sync Changes in VS Code's Source Control panel. Your daily loop now has one more step at the end:

Change files
git add .
git commit -m "Describe the change"
git push

You don't have to push after every commit. A few times a day, or whenever you finish something, is plenty.

Pull: getting changes from GitHub

The opposite of push is pull. It downloads commits from GitHub that you don't have locally yet:

bash

git pull

You'll need it when someone else changed the code, or when you change something directly on the GitHub website. It's also how you'd keep two of your own computers in sync. A good habit is to git pull before you start working.

Quick check

You made three commits on your computer. Where are they?

Select one answer

The command line way

If you ever create a repository on github.com first, GitHub shows you commands to connect it. They look like this:

bash

git remote add origin https://github.com/your-username/my-website.git
git push -u origin main

The first line tells your local repository where its remote lives. The second pushes your main branch there and remembers the connection, so plain git push works afterwards. You won't need these if you published from VS Code, but now you'll recognize them.

Quick check

What does git pull do?

Select one answer

Try it yourself

Put your website on GitHub:

Create a GitHub account if you don't have one, and turn on two-factor authentication
Publish your my-website repository from VS Code as a public repository
Open it on github.com and click around: look at your files and click Commits to see your history
Make a small change on your computer, commit it and push it
Refresh the page on GitHub and check that the new commit is there

Your code is now safely backed up online.