← Level 1 – Builder

Lesson 12 of 12 ⏱ 35 minutes

Publish your website on the internet

The big finale: your website gets a real address you can send to anyone in the world.

What’s about to happen

So far, your website only lives on your own computer. Now we’ll upload it to a server – a computer that’s always connected to the internet – and it’ll get an address anyone can open. We’ll use GitHub Pages: it’s free, and millions of programmers use it.

⚠️

Do this step with a parent. Setting up a GitHub account needs an email address, and by GitHub’s rules, an account for a child under 13 must be created and managed by a parent. Plus, it’s a nice moment to share – let them see what you’ve built!

Step by step

  1. Create a GitHub account. Go to github.com and click Sign up. Fill in an email (a parent’s), a password, and a username. Careful with the username – it’ll become part of your website’s address! Something like jake-builds is better than xxjake123xx.

  2. Create a new repository. A repository is a drawer for one project. Click the green New button (or the plus sign in the top right → New repository). Type my-website for the Repository name, leave Public checked, and click Create repository.

  3. Upload your website’s files. On the repository page, click the uploading an existing file link. Drag in everything from your my-website folder: index.html, your other .html files, style.css, and the whole images folder. Click the green Commit changes button at the bottom.

  4. Turn on GitHub Pages. Click the Settings tab at the top, then Pages in the left menu. Under Branch, choose main, leave / (root), and click Save.

  5. Wait a minute, then open your address. Your website now lives at:

    https://your-username.github.io/my-website/

    (replace your-username with your GitHub username). If it doesn’t work right away, give it two minutes and refresh the page.

🎉 Congratulations, Builder!

You have a website on the internet. A real one, with a real address. Send it to your grandma, your friends, your teacher. And take a moment to remember where you started: an empty file and <h1>It works!</h1>.

What you learned over these 12 lessons:

How to keep changing your website

A website is never really finished! Whenever you change something in your files on your computer:

  1. open your repository on GitHub,
  2. click Add file → Upload files,
  3. drag in the changed files and click Commit changes.

Within a minute, the change is live. (In Level 3, you’ll learn to do this more elegantly – using commands from the terminal, like a real pro.)

💡

What’s next? Your website is built, but it can’t react yet. In Level 2 – Wizard you’ll teach it spells: dark mode, a browsable photo gallery, and a quiz for visitors. We’re building it now – and your website will be perfectly ready for it.

What to take away from this lesson

🏆 Your diploma

Finale of Builder

Once you check off every lesson, you can print a certificate.