Making a Free Webpage with GitHub Pages

Tool Logo

Making a Free Webpage with GitHub Pages

In this workshop, attendees will learn how to host free webpages on GitHub. The process to make a basic, single page site is surprisingly easy and provides an excellent alternative to paid hosting options as not only is it free, but it allows for full control over the site at all times and it will exist forever! This workshop is the third in the GitHub Workshop Series offered by the Brock University Digital Scholarship Lab.

A basic understanding of using repositories in GitHub is recommended for this workshop.

Estimated workshop length: 1.5 hours

Setup

In preparation for this workshop, you will need the following:

Helpful Materials

Markdown Cheat Sheet: This is a helpful cheat sheet showing the common Markdown syntax. Excellent for experienced users and beginners alike!

Workshop Tasks

Task Set 1

  1. Navigate to your GitHub repository and add an image of any kind using the “Add file” button
  2. Edit your README file and add at least two sizes of heading (Use #’s), some bold text (Use **), some italic text (Use *), a link to a web location of your choice (Use ), and add your image to your page (Use and remember that if the file is in a folder you need to use its full path)
  3. Try out some of the other elements shown in the Markdown Cheat sheet (I am personally a fan of using “Horizontal Rule” to break up pages and “Footnotes” for in text citations or references)
  4. Once you have finished editing your README file and are happy with the preview, commit your changes with an appropriate commit message
  5. Once you have done all that, type “MARKDOWN MASTERED!!!!” in the chat to let me know you are ready to move on

Task Set 2

  1. Go to the branches section of your repository and create a new branch
  2. Navigate to your new branch using the branch dropdown on the main page of your repository
  3. Make a change to a file on the new branch and commit that change (just changing the README is fine)
  4. Create a pull request from your new branch to your main branch and merge them (up to you if you want to delete the new branch)
  5. Once you have done this, type “BRANCH MERGED!!!!” in the chat to let me know you are ready to move on

Task Set 3

  1. Decide if you want to use your main branch or a new branch as the home for your site. If making a new branch, consider naming it gh-pages to have GitHub automatically deploy your site. Once you have decided, go to your repositories settings by clicking the “Settings” tab at the top of your repository and then go to the “Pages” section found in the menu on the left. If your site is not deployed yet, select the branch you want to use to host your site and then click the save button.
  2. Once your site is deployed, go check it out at the URL shown in the Pages section of the repositories settings.
  3. Return to your repository and create a new file called _config.yml. Navigate to https://pages.github.com/themes/ and choose a theme to try out. Copy the configuration code into your config file and then commit your changes.
  4. Once your new changes have deployed (this can be watched in the “Actions” tab of the repository) go to your site and check it out!
  5. Once you have admired your site, type “SITE CREATED!!!!” in the chat to let me know you are ready to move on.
  6. (Optional) Share the link to your site in the chat so others can see it!

Next Steps

After completing this workshop, the recommended next steps are:

This workshop is brought to you by the Brock University Digital Scholarship Lab. For a listing of our upcoming workshops go to Experience BU if you are a Brock affiliate or Eventbrite page for external attendees.