Using Templates


Now we are ready to use a template to quickly get the website set up.

Find a website template that you’d like to use. There are a lot of free ones from https://html5up.net/. Or, if you are already savvy with HTML or web design, you may choose to make your own website from scratch. You can also use Jekyll themes that are designed for GitHub Pages, too.

Some of the templates that we recommend for multiple-page websites include:

If you’d like a 1-page website, some templates include:

Regardless of your desired choice, the set-up remains the same.

  1. Download the template that you like.
  2. In an opened tab, make sure you are on your GitHub Page’s repository (e.g., “github.com/username/username.github.io”).
  3. Delete your index.html test file by clicking on the file, and on the re-directed page, click the button with three dots at the top left. In the drop-down, select “Delete file”. Select the green “commit changes…” button and then another green “Commit changes” button on the pop-up.
  4. Now we are ready to add in our template files. To start, select the “Add file” button.
  5. In the drop-down, select “Upload files”.
  6. Your page will re-direct, and there will be a section that says “Drag files here to add them to your repository Or choose your files”. If you have sub-folders in your template, dragging-and-dropping is the best way to go.
    1. If you’d like to drag your template files:
      1. In a separate window, navigate to your downloads folder.
      2. Open the template download folder.
      3. Select all of the items in this template folder. (On a Mac you can quickly do this with Cmd A).
      4. Drag these into the box that says “Drag files here…” and release.
      5. Click the green “Commit changes” button at the bottom of the screen.
    2. If you’d like to choose your template files:
      1. Select the blue “choose your files” link.
      2. In the pop-up, navigate to Downloads > the template folder.
      3. Select all of the items in the template folder. (On a Mac you can quickly do this with Cmd A). If you have sub-folders in your template folder, you will need to drag-and-drop instead.1
      4. Select the blue “Open” button.
      5. Select the green “Commit changes” button.
  7. After a few minutes, the build should be deployed and you should see this template hosted on your website now.

  1. Annoyingly, when choosing your files, GitHub does not allow you to select sub-folders. The best option is to drag-and-drop using the method above. If not, you will have to manually create subfolders inside of your GitHub repo and the add the items from the subfolders to each.↩︎