Online with GitHub Pages

Learning objectives

Knows how to deploy an HTML document online where it can be viewed by others.

There exists a large number of services that can be used to host content. In the following example, we show how to move an HTML page to GitHub. Given an user account, we can create a new repository by clicking in New button on the GitHub site.

This opens up a page for creating a new repository. In the following example, we create a repository called deploy-demo.

deployment new repository — Creating a new repository with the name 'deploy-demo'.

When creating a new repository, set the repository as public and press Create repository. After this, you see a page that shows that the repository has been created. Now, one possibility is to upload files using git on the command line; we'll look into this later on in the course.

For now, for the purpose of copying an HTML document (and maybe a CSS document) online, we can upload the files directly from the user interface. This can be done by clicking the uploading an existing file link.

deployment upload an existing file link — An empty repository has been created. There is a link with the text 'uploading an existing file'.

When you click the link, you are shown a page that allows easy upload of files.

deployment easy upload — Clicking the 'uploading an existing file' link opens up a view where files can be uploaded easily.

Drag and drop the files you wish to show online to the upload area. These files should include at least a file called index.html.

This starts the upload of the files. Once the files have been uploaded, click the Commit changes button.

When the files have been processed and they are visible in the repository, the next step is to enable GitHub Pages for the project. GitHub Pages is essentially a service from GitHub that allows hosting content.

Start by clicking the Settings of the repository and choosing Pages. This should show a page similar to the following one.

deployment github pages — GitHub pages settings.

Under Branch under Build and deployment, click on the dropdown menu that reads None. Select main and press Save. Once pressed, the view should be similar to the following.

deployment pages built from main — Selected a branch to deploy from in GitHub pages.

When we see the text Your GitHub Pages site is currently being built from the main branch, the files that we previously copied to the repository will be deployed live and made visible for all.

In the case of the present demo, you can find the deployed page at https://fitech101.github.io/deploy-demo. Note that the page at the given address is actually related to the course Device-Agnostic Design, which will be available again during the spring.