Skip to content

5. Deploying to GitHub Pages

GitHub is a platform where developers can store and manage their code in projects called repositories. In this guide, you will learn how to:

  • Create a GitHub repository
  • Upload your website files to the repository
  • Publish your website using GitHub Pages
  • Access and view your deployed website

Warning

This guide assumes you have created a GitHub account and have logged in.

5.1 Creating a GitHub Repository

The following instructions will show you how to create a GitHub repository, to prepare to upload your website files.

5.1.1 Instructions

  1. Using your web browser of choice (Google Chrome, Microsoft Edge, FireFox, etc..), visit https://github.com/.

  2. Locate the Create new... button at the top of the screen and click on it

    Preview Image - Click to view

    Create Repository Button

  3. Select the New repository option from the menu that appears

    Preview Image - Click to view

    Select New Repository Button

  4. Fill in the repository form You need to give your repository a name and enable the Add README option.

    Warning

    It is important that you enable the Add README option, otherwise you will not be able to upload files.

    Preview Image - Click to view

    Create Repository Fields

  5. If you have followed these steps correctly you should see a repository with a single file in it called README.md:

    Preview Image - Click to view

    Repository with README.md file

5.2 Uploading Site Files

5.2.1 Instructions

  1. Click the Add file button

    Preview Image - Click to view

    Add file button

  2. Select the Upload files option

    Preview Image - Click to view

    Upload files option

  3. Click the choose your files link

    Preview Image - Click to view

    Choose files link

  4. Select the website files you have created in a previous activity Select any index.html and other html files you created in a previous activity and click the open button. !!! This probably needs a screenshot !!!

  5. Click the Commit changes button to upload the files

    Preview Image - Click to view

    Commit changes button

  6. If you have done these steps correctly you should see your files uploaded to your repository:

    Preview Image - Click to view

    Site files in repository

5.3 Deploying to GitHub Pages

5.3.1 Instructions

  1. Click on the Settings tab in the navigation bar

    Preview Image - Click to view

    Settings tab button

  2. Click on the Pages tab in the sidebar navigation

    Preview Image - Click to view

    Pages sidebar tab button

  3. Click on the Branch drop-down menu

    Preview Image - Click to view

    Branch dropdown button

  4. Select the main branch

    Preview Image - Click to view

    Branch main option

  5. Click on the Save button

    Preview Image - Click to view

    Branch save button

5.4 Viewing your Deployed Website

5.4.1 Instructions

  1. Click on the Actions tab in the navigation bar

    Preview Image - Click to view

    Actions tab button

  2. Wait for the action to complete You will need to wait for the website to be deployed by GitHub, you will know when it is complete when the action changes from orange to green.

    Preview Image - Click to view

    Action running

    Preview Image - Click to view

    Action completed

  3. Click on the action name This will take you to the completed action (the GitHub deployment)

    Preview Image - Click to view

    Action completed link

  4. Click on your deployed pages link

    Preview Image - Click to view

    Deployment link

  5. If you have done the steps correctly you should see the website that you made in a previous activity show up (your website may look different to mine):

    Preview Image - Click to view

    Choose files link

    If you do see your website then your site is now live and you can share your website link with your peers and visit it from any computer / network with an internet connection.

5.5 Troubleshooting

If you are experiencing issues with your deployed GitHub Pages website, refer to the frequently asked questions below for help:

5.5.1 I only see the name of my repository with an empty site

If your website looks like the following after deploying your site and opening the link, then you have not correctly setup your index file:

Preview Image - Click to view

Choose files link

Make sure you have a html file in your repository named index.html. If you do not have this file, then the web browser does not know how to get to your page.

Remember: Web browser look for the index.html file by default when you do not specify a page in the address bar.