# Put Your Page Online for Free
Put your page on the web for free with GitHub Pages, uploading its files in the browser with no Git needed, so anyone you send the link to can see it.
Novice · CSS · Web Development · Updated November 1, 2026
## After this lesson you can
- Put a page online with GitHub Pages by uploading its files in the browser
- Use relative paths and an index.html home page so a site works once it's online
## Key takeaways
- GitHub Pages turns a public GitHub repository into a website, free, with an address like username.github.io/repository-name.
- You can upload the files in the browser with Add file, then Upload files. No Git or other software is needed.
- The home page must be named index.html, in lowercase, at the top of the repository.
- Link your stylesheet and pictures with relative paths such as styles.css and images/fern.png, spelled exactly like the files, capital letters included.
- Public means anyone can see the page and every file in the repository, so never put anything private in it.
A page that lives only on your laptop is a page only you can see. Put it online and you can text the link to a friend, add it to a resume or a job application, or paste it into the box when a class assignment says "submit the URL". This lesson puts a page online in about fifteen minutes, with a free account and nothing to install.
**What it costs: nothing.** GitHub Pages is free for public repositories on a free GitHub account. Nothing in this lesson asks for a payment card, and if a screen ever does, you've wandered into a paid plan you don't need.
## What a web host does
Right now your page is a set of files on your computer: `index.html`, `styles.css` and a folder of pictures. To be on the web, those files need to sit on a computer that's always switched on and connected, and that sends them to anyone who asks for them. That's a **web host**. It's like moving a poster from your bedroom wall to a community notice board: same poster, but now anyone walking past can see it.
A site made only of ready-made files like yours, sent to every visitor exactly as they're stored, is called a **static website**, and static websites are cheap to host. **GitHub** is a website where people keep their project files, and **GitHub Pages** is its free hosting for static websites.
## Get your files ready
Three things decide whether your page works once it's online.
**The home page is named `index.html`**, in lowercase, at the top of the folder, not inside another folder. When someone visits an address that ends with a folder's name, the server sends that folder's `index.html`. Name it `Index.html` or `home.html` and GitHub Pages can't find a home page: visitors see your repository's README notes instead, or a "404: page not found".
**Every path is relative.** A **relative path** says where a file is starting from the page that uses it:
```html
```
`styles.css` means "in the same folder as this page", and `images/fern.png` means "in the `images` folder next to this page". Both still work after the folder moves to the web. A path from your own computer, such as `C:/Users/sam/forest-friends/styles.css` or one starting `file:///`, points at your own hard drive. It breaks online, and usually with Live Server too. And a path starting with `/`, such as `/styles.css`, looks at the top of the whole `github.io` address, not your site's folder, so it misses too.
**Spell every file name exactly**, capital letters included. Windows and macOS treat `Fern.png` and `fern.png` as the same file, so a mismatch works on your computer. A web server treats them as two different files, and the picture vanishes once it's online. Lowercase names with hyphens instead of spaces, such as `forest-friends.png`, avoid the problem.
```text
forest-friends/
├── index.html
├── styles.css
└── images/
├── fern.png
├── mossy.png
└── pip.png
```
## A free account and a repository
1. Go to **github.com** and choose **Sign up**. You'll need an email address, a password and a **username**. The username becomes part of your site's address, so pick one you'd be happy to put on a resume.
2. Confirm your email address with the code GitHub sends you.
3. Choose the **+** at the top right of any GitHub page, then **New repository**.
A **repository** (or "repo") is a project's folder on GitHub: its files, and a history of every change made to them.
4. Give it a short name in lowercase with hyphens, such as `forest-friends`. It becomes the end of your site's address.
5. Choose **Public**. (GitHub Pages is free only for public repositories.)
6. Turn **Add README** on (some screens call it *Add a README file*). A README is a page of notes about the project, and it gives the new repository a first file, so the upload button appears.
7. Choose **Create repository**.
## Upload your files
1. In your new repository, choose **Add file**, then **Upload files**.
2. Open your `forest-friends` folder on your computer and select **everything inside it** (Ctrl+A, or Cmd+A on a Mac): `index.html`, `styles.css` and the `images` folder. Drag them onto the upload area. Drag what's inside the folder, not the folder itself, or everything lands one folder down and `index.html` isn't at the top.
3. Under **Commit changes**, type a short note about what you're adding, such as *Add the Forest Friends cards*. A **commit** is a saved snapshot of the files, with a note saying what changed.
4. Choose **Commit changes**.
Your files now appear in the repository's file list, with `index.html` at the top level next to `README.md`. A single file can be up to 25 MB when you upload it this way, which is plenty for a page and its pictures.
## Turn on GitHub Pages
1. In the repository, choose **Settings** (along the top), then **Pages** (in the list on the left).
2. Under **Build and deployment**, set **Source** to **Deploy from a branch**.
3. Under **Branch**, choose **main** and **/ (root)**, then **Save**.
4. Wait a minute or two, then refresh the Pages screen. When the site is ready, it says **Your site is live at** your address, with a **Visit site** button.
The address looks like this, with your own username and repository name:
```text
https://your-username.github.io/forest-friends/
```
That's the link you send people. To change the page later, upload the changed file again with the same name (it replaces the old one), commit, and wait a minute. If your browser still shows the old version, reload with **Ctrl+F5** (**Cmd+Shift+R** on a Mac).
**If something's missing:**
- **"404: There isn't a GitHub Pages site here"**: wait another minute, then refresh.
- **Your README's notes show instead of your page**: GitHub Pages looks for `index.html` first and falls back to `README.md`. Check that `index.html` is at the top level of the repository, spelled in lowercase.
- **The words show but the page has no styles, or a picture is missing**: a path or a file name doesn't match. Open the developer tools' **Console**: it names each file it couldn't find. Compare that name with the file in the repository, letter by letter.
## What public means
**Public** means anyone can see two things: the page, at its address, and the repository, with every file in it and every earlier version of those files. Search engines may find it too. So before you upload:
- **Leave out anything private**: your home address, your phone number, your school schedule, passwords, and photos of other people unless they've said yes.
- **Use only pictures and text you're allowed to use**: your own, ones you have permission for, or ones whose license allows it.
- **Remember the history**: deleting a file later doesn't take it out of the repository's earlier versions. If something private slips in, delete the whole repository (**Settings**, then **Delete this repository**, at the bottom of the page).
None of that should put you off: a public page is exactly what a portfolio, a fan page or a class project should be. Every project in this course can go online the same way.
**Try it.** Put your Forest Friends page online with the steps above. Open the link on your phone, then send it to someone.
## Check yourself
2 questions to try on the lesson page.
## So what
A link turns your work into something you can show: to a friend, a teacher, or someone hiring. From here on, everything you build can be one upload away from the web.
## Key terms
- GitHub
- Repository
- [Static Website](https://www.ask-codey.com/glossary/static-website)
- [Relative Path](https://www.ask-codey.com/glossary/relative-path)
## Cheat sheets
- [Put Your Page Online for Free](https://www.ask-codey.com/cheat-sheets/css-share-your-page-online-cheat-sheet)
## Related
- [Exercise: Trading Cards](https://www.ask-codey.com/lessons/exercise-css-trading-cards)
Source: https://www.ask-codey.com/lessons/css-share-your-page-online
```
`styles.css` means "in the same folder as this page", and `images/fern.png` means "in the `images` folder next to this page". Both still work after the folder moves to the web. A path from your own computer, such as `C:/Users/sam/forest-friends/styles.css` or one starting `file:///`, points at your own hard drive. It breaks online, and usually with Live Server too. And a path starting with `/`, such as `/styles.css`, looks at the top of the whole `github.io` address, not your site's folder, so it misses too.
**Spell every file name exactly**, capital letters included. Windows and macOS treat `Fern.png` and `fern.png` as the same file, so a mismatch works on your computer. A web server treats them as two different files, and the picture vanishes once it's online. Lowercase names with hyphens instead of spaces, such as `forest-friends.png`, avoid the problem.
```text
forest-friends/
├── index.html
├── styles.css
└── images/
├── fern.png
├── mossy.png
└── pip.png
```
## A free account and a repository
1. Go to **github.com** and choose **Sign up**. You'll need an email address, a password and a **username**. The username becomes part of your site's address, so pick one you'd be happy to put on a resume.
2. Confirm your email address with the code GitHub sends you.
3. Choose the **+** at the top right of any GitHub page, then **New repository**.
A **repository** (or "repo") is a project's folder on GitHub: its files, and a history of every change made to them.
4. Give it a short name in lowercase with hyphens, such as `forest-friends`. It becomes the end of your site's address.
5. Choose **Public**. (GitHub Pages is free only for public repositories.)
6. Turn **Add README** on (some screens call it *Add a README file*). A README is a page of notes about the project, and it gives the new repository a first file, so the upload button appears.
7. Choose **Create repository**.
## Upload your files
1. In your new repository, choose **Add file**, then **Upload files**.
2. Open your `forest-friends` folder on your computer and select **everything inside it** (Ctrl+A, or Cmd+A on a Mac): `index.html`, `styles.css` and the `images` folder. Drag them onto the upload area. Drag what's inside the folder, not the folder itself, or everything lands one folder down and `index.html` isn't at the top.
3. Under **Commit changes**, type a short note about what you're adding, such as *Add the Forest Friends cards*. A **commit** is a saved snapshot of the files, with a note saying what changed.
4. Choose **Commit changes**.
Your files now appear in the repository's file list, with `index.html` at the top level next to `README.md`. A single file can be up to 25 MB when you upload it this way, which is plenty for a page and its pictures.
## Turn on GitHub Pages
1. In the repository, choose **Settings** (along the top), then **Pages** (in the list on the left).
2. Under **Build and deployment**, set **Source** to **Deploy from a branch**.
3. Under **Branch**, choose **main** and **/ (root)**, then **Save**.
4. Wait a minute or two, then refresh the Pages screen. When the site is ready, it says **Your site is live at** your address, with a **Visit site** button.
The address looks like this, with your own username and repository name:
```text
https://your-username.github.io/forest-friends/
```
That's the link you send people. To change the page later, upload the changed file again with the same name (it replaces the old one), commit, and wait a minute. If your browser still shows the old version, reload with **Ctrl+F5** (**Cmd+Shift+R** on a Mac).
**If something's missing:**
- **"404: There isn't a GitHub Pages site here"**: wait another minute, then refresh.
- **Your README's notes show instead of your page**: GitHub Pages looks for `index.html` first and falls back to `README.md`. Check that `index.html` is at the top level of the repository, spelled in lowercase.
- **The words show but the page has no styles, or a picture is missing**: a path or a file name doesn't match. Open the developer tools' **Console**: it names each file it couldn't find. Compare that name with the file in the repository, letter by letter.
## What public means
**Public** means anyone can see two things: the page, at its address, and the repository, with every file in it and every earlier version of those files. Search engines may find it too. So before you upload:
- **Leave out anything private**: your home address, your phone number, your school schedule, passwords, and photos of other people unless they've said yes.
- **Use only pictures and text you're allowed to use**: your own, ones you have permission for, or ones whose license allows it.
- **Remember the history**: deleting a file later doesn't take it out of the repository's earlier versions. If something private slips in, delete the whole repository (**Settings**, then **Delete this repository**, at the bottom of the page).
None of that should put you off: a public page is exactly what a portfolio, a fan page or a class project should be. Every project in this course can go online the same way.
**Try it.** Put your Forest Friends page online with the steps above. Open the link on your phone, then send it to someone.
## Check yourself
2 questions to try on the lesson page.
## So what
A link turns your work into something you can show: to a friend, a teacher, or someone hiring. From here on, everything you build can be one upload away from the web.
## Key terms
- GitHub
- Repository
- [Static Website](https://www.ask-codey.com/glossary/static-website)
- [Relative Path](https://www.ask-codey.com/glossary/relative-path)
## Cheat sheets
- [Put Your Page Online for Free](https://www.ask-codey.com/cheat-sheets/css-share-your-page-online-cheat-sheet)
## Related
- [Exercise: Trading Cards](https://www.ask-codey.com/lessons/exercise-css-trading-cards)
Source: https://www.ask-codey.com/lessons/css-share-your-page-online