Publish your website with GitHub pages

Now that you’re an HTML/CSS wizard, let’s actually put your page online, so that everyone else can admire it! We’ll do this with a tool called GitHub Pages. In order to use it, you will have to sign up for an account with GitHub. (If you don’t want to do that, please talk to me about alternatives.)

Here, I explain more about what GitHub is and why I’ve chosen GitHub Pages for you to learn.

1. Sign up for a GitHub account

Go to GitHub and sign up for an account. You may have to verify that you’re a human, and on the next page, please select the free account and press Continue. You can enter your interests on the next page or just skip that step.

2. Create a repository

On GitHub, repositories (“repos”) are something like folders. People create them to hold projects or chunks of code. We’ll create a repo for our website.

Click on Create a repository. You may need to verify your email address before you proceed.

3. Give your repo a (very specific!) name

GitHub is set up so that if you put HTML files in a repo with a very specific name, GitHub will understand that you want to create a website.

In the field labeled Repository name, name your repo according to this pattern:

 yourusername.github.io

In the name above, replace yourusername with your actual username. So, for example, I would name my repo

 miriam-test.github.io

The .github.io part is important, as is using your exact username before .github. My username is miriam-test, which is why I named the repository as I did.

Be sure this is exactly right, or your page won’t work.

You can leave the other fields as they are and press Create repository.

4. Add your HTML and CSS to your repo (1)

Now you have a place where you can put the HTML and CSS files you created earlier. Let’s upload those files.

Click on uploading an existing file.

5. Add your HTML and CSS to your repo (2)

Drag both your index.html and your style.css files to the box labeled Drag files here to add them to your repository.

6. Commit your changes

Once you’ve dropped your files in the box, you need to Commit changes. This is a Github thing. Every time you save changes to a repo, you write a “commit message” that summarizes what you’re changing. Here are some examples:

  • Fix typos
  • Add documentation
  • Add CSS styling

They should be fewer than 50 characters. When you first upload something to a repo, you can use the commit message Initial commit. You can expand on your message in the body text box. When you’re done, press the Commit changesbutton.

7. Look at your website

Now your website is live! The URL of your site will be yourusername.github.io, where yourusername is actually your username. For example, my website is now miriam-test.github.io.

You may need to give your website a few minutes to go live. If you’ve waited more than five minutes or so and it still isn’t working, it’s probably related to a specific problem GitHub Pages sometimes have in finding your index page. Try entering yourusername.github.io/index.html.

8. Make changes (1)

If you’d like to make changes to your website, there are a couple ways to do it. The first is to edit the file directly from GitHub. You can do that by clicking on the file and then pressing the edit button. (It looks like a little pencil.) When you’re done making changes, you’ll need to write a commit message again.

9. Make changes (2)

The second way to make changes is to edit the files on your computer, in your text editor. When you’re done making those changes, upload the file to GitHub (in the same way you did in Step 5), making sure that the files have the same names as they did when you uploaded them the first time. Again, you’ll write a commit message.

Now you’re an HTML/CSS/GitHub Pages expert! (Almost!) This is a lot of manual fiddling, though. There’s actually an easier way to build and publish a website, and we’ll investigate that now.