Put Your Site Online for Free

GitHub Pages puts a folder of web pages online for free, at an address anyone can open, and you can do it all by uploading files on github.com.

Apprentice · Web Development · HTML · Updated

After this lesson you can

  • Put a website online with GitHub Pages by uploading its files
  • Work out a GitHub Pages site's address from its username and repository name
  • Decide what is safe to put on a public website

Key takeaways

  • A static website is a folder of ready-made files, and GitHub Pages hosts one for free at an address such as https://sam-learns-html.github.io/.
  • Make a free GitHub account, make a public repository, upload your files with Add file and Upload files, and turn on Pages in Settings.
  • A repository named after your username, username.github.io, gets the short address. Any other name adds /repository-name/ to the end.
  • To change your site, upload the changed files again. The change can take a few minutes to show.
  • Everything you upload is public. Never put your home address, phone number or anything private on your site.

So far your pages live on your own computer, and only you can see them. The moment you can text a friend a link and watch them open your site on their phone, it stops being homework and starts being yours. You'll use this for every project you want to show: a class assignment your professor asked for as a link, a portfolio for a job application, a page for your club or your band.

Nothing in this lesson costs money. A GitHub account is free, and so is hosting a site like yours on GitHub Pages. There are no Git commands either: everything happens by clicking and dragging files in your browser.

What "online" means for a site like yours

Remember from How a Browser Shows a Page that a browser asks a server for a page, and the server sends the file back. To put your site online, you need a computer that's always on and always connected, ready to send your files to anyone who asks. Keeping your laptop on all year isn't a plan, so you borrow someone else's.

Your trip guide is a static website: a folder of ready-made files (HTML pages, a stylesheet and pictures) that the server sends to every visitor exactly as they are. There's no program running on the server and no database, so hosting it is cheap, and plenty of companies do it for free.

GitHub is a website where more than a hundred million people keep their projects' files online, from homework to the code behind famous apps. Each project lives in a repository (often shortened to repo): a folder of files on GitHub. GitHub Pages is GitHub's free hosting for static websites: you put your site's files in a repository, turn Pages on, and GitHub serves them at an address of your own.

Step 1: Make a free GitHub account

  1. Go to github.com and choose Sign up.
  2. Enter your email address, a password and a username. GitHub sends you a code by email to check the address is yours.
  3. GitHub may ask you to turn on two-factor authentication: a second check, such as a code from an app on your phone, each time you sign in from a new place. Follow its steps; it keeps your account safe.

Choose your username with care. It's public, and it becomes part of your site's address: the username sam-learns-html gets the address sam-learns-html.github.io. It doesn't have to be your full name.

Step 2: Make a repository for your site

  1. Signed in, click the + in the top-right corner, then New repository.
  2. For the name, you have two choices:
    • Your username, then .github.io, all lowercase, such as sam-learns-html.github.io. This is your main site, at the short address.
    • Any other name, such as lake-harbor. This is a project site, with the name added to the end of the address. You can have as many of these as you like.
  3. Choose Public. On a free account, GitHub Pages only works for public repositories.
  4. Turn on Add README, so the repository starts with one file in it, then click Create repository.

Step 3: Upload your files

  1. On your new repository's page, click Add file, then Upload files.
  2. On your computer, open your site's folder, select everything inside it (your .html files, style.css and the images folder) and drag it all onto the page. Drag what's inside the folder, not the folder itself, so index.html lands at the top of the repository.
  3. Wait for every file to appear in the list, then click Commit changes at the bottom.

A commit is GitHub's word for a saved change, with a short note about what changed. The note is filled in for you ("Add files via upload"), and you can leave it.

GitHub accepts files up to 25 MB each through the browser, and up to 100 at a time. A phone photo is usually 2 to 5 MB, so a site like yours fits with room to spare.

The Upload files page on github.com, with index.html, eat.html, see.html, style.css and the images folder being dropped onto it, and the Commit changes button at the bottom

Step 4: Turn on GitHub Pages

  1. In your repository, click Settings (in the row of tabs under the repository's name), then Pages in the list on the left.
  2. Under Build and deployment, set Source to Deploy from a branch.
  3. Set the branch to main and the folder to / (root), then click Save.

A branch is a line of versions of your files; main is the one you've been uploading to, so that's the one to publish.

GitHub now builds your site. It usually takes a minute or two, and it can take up to 10 minutes. The Actions tab shows its progress. When it's done, the top of the Pages screen says your site is live, with a Visit site button. Open it: that's your site, on the internet.

Your site's address

Your address is built from your username and the repository's name:

Repository sam-learns-html.github.io  ->  https://sam-learns-html.github.io/
Repository lake-harbor                ->  https://sam-learns-html.github.io/lake-harbor/
Repository weekend-guide              ->  https://sam-learns-html.github.io/weekend-guide/

sam-learns-html.github.io is a domain name: the readable name that stands for a computer on the internet, the same idea as wikipedia.org. Yours sits under GitHub's own domain, github.io, so you don't have to buy one. Later, if you want an address such as lakeharborguide.com, you can buy a domain name (usually $10 to $20 a year) and point it at your GitHub Pages site. This course never needs one.

Every page has its own address too: the "where to eat" page of the lake-harbor site is https://sam-learns-html.github.io/lake-harbor/eat.html. The address starts with https://, which means the connection is encrypted, and GitHub sets that up for you.

Try it. Send your site's address to a friend, or open it on your own phone. Click through every page and every picture.

Changing your site

To change your site after it's online:

  1. Change the file on your computer and check it with Live Server, as always.
  2. In your repository, click Add file, then Upload files, drop the changed file in, and click Commit changes. A file with the same name replaces the old one.
  3. Wait a minute or two, then reload your site. If you still see the old version, your browser is showing the copy it saved earlier: reload with Ctrl+F5 on Windows or Cmd+Shift+R on a Mac.

A picture in the images folder goes in the same way: open the images folder in your repository first, then upload, so it lands in the right place.

What never goes online

Everything in a public repository, and everything on your site, can be seen by anyone in the world, including search engines. Deleting something later doesn't take back the copies people or search engines already made. So, before you upload, check:

  • No home address, phone number, birthday or school schedule. Not yours, and not anyone else's.
  • No photos of people who haven't said yes, and no pictures of documents, ID cards or a screen with private messages on it.
  • No passwords or private notes, not even in an HTML comment. People can read comments with View Source.
  • No location hidden in your photos. A photo from a phone often stores the exact spot where it was taken. Turn off location in your camera's settings, or remove it before uploading: on Windows, right-click the file and choose Properties, then Details, then Remove Properties and Personal Information; on a Mac, the Photos app can hide a photo's location before you export it.

A town guide, your favorite recipes, a band you love, the projects you've built: all great. Share what you'd be happy to see on a billboard with your username on it.

When it doesn't work

What you see What's going on What to do
"404: There isn't a GitHub Pages site here" The site hasn't been built yet, or Pages isn't turned on Wait up to 10 minutes, and check Settings, then Pages
The address shows your README, not your home page There's no index.html at the top of the repository, often because the whole folder was dragged in, so it landed inside a folder Upload the contents of your site's folder, so index.html is at the top
The page works but a picture is broken online, though not on your computer Capital letters: Pier-Park.jpg in the repository but pier-park.jpg in src. Your computer ignores the difference; the server doesn't Rename the file or fix the src so they match exactly, then upload again
The page is plain, with no styling style.css didn't upload, or its name doesn't match the link line Check that style.css is at the top of the repository
The old version still shows Your browser saved a copy Reload with Ctrl+F5 or Cmd+Shift+R

Check yourself

2 questions to try on the lesson page.

So what

Your site has an address now, and anyone with the link can open it on any device. Every website you've ever visited is online the same way: files on a server that's always on, at an address people can type.

Key terms

Cheat sheets

Related