How to host your website on GitHub Page

Share this post:

In the previous article, we showed you how to convert a Jupyter Notebook (.ipynb file) into an HTML file, providing a portable and shareable format that can be easily sent or stored on a USB drive for viewing. In this article, we’d like to highlight another option: publishing the HTML file online. With the help of GitHub Pages, deploying an HTML file as a website becomes remarkably simple.

Demo: https://hkust-dh.github.io/jupyter-slides-demo/sample.slides.html

1. Create a new repository in Github

1. If you do not have a GitHub account yet, please create one before proceeding further.
2. Create a new repository https://github.com/new (see screenshot below)

Feel free to type in any repository name that you prefer when creating your GitHub repository.
Your website URL will follow the format: https://<your github username>.github.io/<repository name>/

While you can rename the repository name afterward, be mindful that changing the repository name will also affect the website URL. After renaming the repository, the URL to access your website will be updated accordingly.

2. Upload file to Github repository

If your HTML file is named index.html, you can access it directly using the URL:
https://<your github username>.github.io/<repository name>/

If your HTML file has a different name, you’ll need to include the file name in the URL to access it.
For example, if your HTML file is named hello123.html, the URL would be:
https://<your github username>.github.io/<repository name>/hello123.html

You may upload files to a Github repo by clicking “uploading an existing file”

In the example below, we uploaded an HTML file named sample.slides.html in the repository “jupyter-slides-demo”, the URL would then be:
https://hkust-dh.github.io/jupyter-slides-demo/sample.slides.html

You may also click “Add file” to create or upload files to a Github repo

3. Enable Github Pages

Click on the “Settings” located towards the right-hand side of the repository navigation menu.
Click “Pages” on the left-hand side for the Github Pages section.
Select main branch as the source for GitHub Pages.

4. Wait for a few minutes and refresh the page. You will see the message “Your site is live at …..”.
Your HTML file now goes live and accessible via the provided URL!