Put Your Page Online for Free

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:

<link rel="stylesheet" href="styles.css">
<img src="images/fern.png" alt="Fern the Fox, an orange fox with a bushy tail, grinning">

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.

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:

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
• Relative Path

Cheat sheets

• Put Your Page Online for Free

Related

• Exercise: Trading Cards