Publish a Web Site with GitHub Pages

This page describes how to publish a site using GitHub Pages. The same information is presented both as a video walkthrough and as written instructions.

Video Walkthrough

Written Instructions

Publish a Web Site on GitHub Pages

GitHub allows you to publish your public repositories on the web using what they call GitHub Pages. This means you get free web hosting through GitHub!

1. Click on the Settings link from your repository’s home page.

First make sure you have your repository created on GitHub. If you don’t have a repository or there are no files in it, this won’t work.
You will also need to be signed-in to GitHub to complete this process.
Make sure you’re on the home page
Click on Settings

screenshot showing numbered steps described in text above to click on Settings

2. Scroll Down the Page

screenshot showing setting page to scroll down

3. Select a Source for your Pages

Stop scrolling when you get to the GitHub Pages section.

Under Select Source choose master branch (1).

screenshot showing master branch being selected as the GitHub Pages source

4. Save Your Changes

(1) Click the Save Button

On a side note, DO NOT use the Theme Chooser. This is a special way of using GitHub pages that does not just publish the pages you have in your repository.

screenshot clicking save button for GitHub Pages source.

5. Changes are Saved

When you save the changes the page will reload and you will get a message at the top of the page saying your changes are saved (1).

Scroll down to see your link to your pages (2)

Screenshot showing message after GitHub Pages are saved

6. Get your Pages Link

Your GitHub Pages link will now be shown under the GitHub Pages settings (1)

NOTE: There are a few reasons you might not see anything when you click the link.

It may take a few minutes for your pages to be published and for the link to be active.
If you don’t have a file named index.html in the root of your repository (it’s at the top level, not in any sub folders), then you will not see anything. See the next steps for how to go directly to pages in your repository

screenshot showing where to find the link to the Github pages site

7. Viewing Your Pages

Open your Pages link
If you also open your Repository you will see that the URL is different
By default the Pages Link will show the index.html file.

All of your github pages will be published with the URL starting https://YourUserName.github.io

If you don’t have navigation built in to index.html and want to view other pages in your respository then see the next step.

screenshot showing that the index.html file in the respository is shown when the Pages site link is clicked

8. Viewing pages other than index.html

If you built navigation into your site and the index.html page has the navigation then there is nothing to do. Your navigation should work as normal.

If your repository has pages that aren’t linked with a navigation bar, like assignments for a class or unrelated pages, then you can just add in your page file names to the base GitHub Pages URL and see those pages.

In the example below to view blah.html (1) in the repository, we added blah.html to the end of the GitHub Pages url (2)

If you had subfolders then you would add the folder names to the URL as well. Make sure to add slashes / after each folder name. For example if the base GitHub pages URL is

http://profstein.github.io/deleteLater/

and I want to see a file named about.html that is in a folder named portfolio I would use the following url

https://profstein.github.io/deleteLater/portfolio/about.html