Making a Website Using GitHub Pages
Overview
Learn how to make a static website using the free resource GitHub Pages
Creating a Website Using GitHub Pages
Last updated September 3, 2023
This tutorial will help you use GitHub Pages to create a website. This tutorial should take between 30 and 60 minutes to complete. At the end of the tutorial, you will have the basis for your own website.
Tools
A GitHub account, which is freely available
Any HTML, CSS, or other files you would like to include on your website
What is GitHub?
GitHub is a platform for sharing, collaborating, and managing projects that allows developers to store and manage code in an open environment. GitHub is frequently used to host open source software development projects and, as of June 2023, is the largest source code host. It allows for people to freely share and publish their work online. You can also use GitHub to create static web publications, which you can learn more about in works like Chris Diaz's Static Web Publishing for Digital Scholarship, and you can use GitHub Pages to create websites.
GitHub Pages is a static site hosting service offered for free by GitHub. Users are allowed one site per GitHub account or organization and can also create unlimited project sites.
In this tutorial, we will work through the steps to create a user website using GitHub Pages.
Steps
Step One: Create a GitHub Account
To complete this project, you will need to register for a free GitHub account. If you are a student or teacher, there are special benefits available to you through GitHub Education.
Step Two: Create a Repository
A repository is where you will collect and share all of the code and documents associated with your project. You can create a site in an existing repository, but for the purposes of this tutorial we will be working from a new repository.
To begin, create a new repository. You can create a new repository by clicking on the + symbol in the upper-right corner of any page and selecting New Repository.
If this is your first time creating a repository, you can click on the left side of the screen under Create your first project and select Create repository.
If you have created a repository before, then you can go to the Repositories tab at the top of the page, then select New from the upper right hand corner of the Repositories page.
Step Three: Name Your Repository
Name this repository username.github.io, where username is your username on GitHub. Make sure that this exactly matches your username. If your username contains uppercase letters, you must lowercase the letters.
Step Four: Set your repository visibility to public
Setting your repository visibility to public will ensure that people can view all of the materials in your repository. They will also be able to fork your code. Forking means creating a copy of source code.
Step Five: Create your entry file
The entry file is the home page for your site. You will want to use an index.html, index.md, or README.md file as the entry file. For the purpose of this tutorial, we will use an index.html file.
To create a new file, click on Create New File under the Add File tab.
If you have created an HTML file that you would like to use as your landing page, then you can upload it using the Upload Files selection. You can then rename the file index.html.
Whenever you make a change to a file, make sure to select Commit changes in the upper right corner to save your work. You can add an extended description to each change to help you remember what edits you made.
Step Six: Add More Files
You can use the Upload files tool to upload all of the files that you want to display on your website, including any CSS that you will be applying to your HTML pages.
Step Seven: Apply CSS
If you have created CSS files that you would like to use with your HTML, you can add those to your repository using Upload files. You will then use the address of the CSS file in your HTML documents to apply CSS to those pages.
Step Eight: Visit your site
To visit your site, go to username.github.io where username is your username.
Making Future Changes
Editing Pages
To edit pages on your site, open the file. Then click on the pencil icon edit this file. When you have finished editing, make sure to Commit changes.
Unpublishing and Republishing Your Site
To unpublish your site, go to Settings, then Pages. At the top of the page, where it says your site is live, select Unpublish site.
To republish your site, go to Actions at the top of the page. Click on pages build and deployment. Then at the top of the screen select Re-run all jobs.
It may take a moment to republish your site. To check on the status, go to Actions. Here you can view if the job is still in progress.
Additional Information
The GitHub Pages documentation can provide you with information about other ways to customize your site, as well as troubleshooting information.
This OER was funded by the VILLA: Working in the Open Virtual Information Literacy Library Atelier sponsored by Iwasaki Library at Emerson College, held May 11-19, 2023.