Publishing your site with GitHub Pages

This is the moment you've been building towards. In this lesson your website goes live on the internet, with a real address you can send to anyone. And it's free.

GitHub Pages is a free hosting service built into GitHub. It takes the HTML, CSS and image files in a repository and serves them as a website.

It works for static websites, which means sites made of files that are the same for every visitor. That's exactly what you've built. Websites that need a server or a database, like an online shop with user accounts, need other kinds of hosting. You don't need to worry about that yet.

On a free GitHub account, Pages works for public repositories. That's why you made my-website public in the last lessons.

1. Open your my-website repository on github.com
2. Click Settings in the top menu of the repository (not your account settings)
3. Click Pages in the menu on the left
4. Under Build and deployment, set Source to Deploy from a branch
5. Under Branch, choose main and the folder / (root), then click Save

GitHub now builds your site. It usually takes a minute or two. Refresh the Pages settings and you'll see a message saying Your site is live at followed by your address. Click it.

There it is. Your website, on the internet.

The address follows a simple pattern:

So if your GitHub username is alexandersson, the address is https://alexandersson.github.io/my-website/.

There's a fun bonus: if you name a repository exactly your-username.github.io, GitHub publishes it at https://your-username.github.io/ without anything after the slash. Many developers use that for their main personal site. You can always rename your repository later in its Settings if you want that shorter address.

Remember from the first course that servers send index.html when no specific page is asked for? This is where it pays off. When someone visits your address, GitHub Pages looks for index.html in your repository and shows it. If your home page had a different name, visitors would see an error instead.

Here's the best part: you don't need to do anything special to update your website. Every time you push to main, GitHub Pages rebuilds the site automatically.

1. Change your files and check them with Go Live
2. Commit and push
3. Wait a minute and refresh your live site

That's how real websites are deployed every day, just at a bigger scale.

If a change doesn't show up, wait another minute and do a hard refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac). Browsers like to keep old versions of CSS files around for a while.

A few common problems, and their fixes:

• The page shows a 404 error: make sure your home page is called exactly index.html, all lowercase, in the root of the repository, not inside a folder
• The page has no styling: check that the href to styles.css is a relative path with matching spelling and capitalization. GitHub's servers care about capital letters even if your computer doesn't
• Images are missing: same thing, check the paths and the capitalization of the file names

You can also click the Actions tab in your repository to see each deploy. A green checkmark means it worked, and a red cross shows what went wrong.