2.7Lesson 2.7: Publishing a website with GitHub Pages

The idea

A web page is, at the very least, an HTML file: text with tags that say what each thing is. A heading, a paragraph, a button.

GitHub Pages takes the files in a repository and publishes them at an address: https://YOUR-USERNAME.github.io/my-game/. For free.

A minimal page

Create index.html in my-game:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My game</title>
  </head>
  <body>
    <h1>Hi, I'm Ana</h1>
    <p>This is my first page.</p>
  </body>
</html>

• head: what you don't see. charset lets you use accents and symbols, and title is the tab's name.
• body: what you see. h1 is the heading and p, a paragraph.

HTML has its own stage, Front end, which is on its way. For now this is enough.

The name matters: index.html is the page that opens when nobody asks for another.

Seeing it on your computer

Double-click index.html: it opens in the browser. That's how you test before publishing.

Publishing it

First, upload it to GitHub:

$ git add index.html
$ git commit -m "feat(page): add the page"
$ git push

Then, on GitHub, in your repository:

1. Settings → Pages.
2. Under Source, choose Deploy from a branch.
3. Under Branch, choose main and the / (root) folder. Click Save.

In a minute or two it will be at https://YOUR-USERNAME.github.io/my-game/. On the free plan, the repository has to be public.

Try it

Summary

• A website is, at the very least, an HTML file.
• index.html is the page that opens by default.
• GitHub Pages publishes a repository at YOUR-USERNAME.github.io/repository.
• Every git push updates the website.