# 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 October 31, 2026

## 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](https://www.ask-codey.com/lessons/TODO)

## 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:

```text
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

- [Static Website](https://www.ask-codey.com/glossary/static-website)
- [Domain Name](https://www.ask-codey.com/glossary/domain-name)
- GitHub Pages
- GitHub

## Cheat sheets

- [Put Your Site Online for Free](https://www.ask-codey.com/cheat-sheets/html-put-your-site-online-cheat-sheet)

## Related

- [How a Browser Shows a Page](https://www.ask-codey.com/lessons/html-how-a-browser-shows-a-page)
- [Files and Folders for a Website](https://www.ask-codey.com/lessons/html-files-and-folders-for-a-website)

Source: https://www.ask-codey.com/lessons/html-put-your-site-online