Jupyter notebook to Dashboard using GitHub

Sreeram Kashyap
2 min readJan 30, 2021

Hi guys, in this tutorial you’ll see how to convert all your work in Jupyter notebooks including interactive visualizations like maps and graphs into a dashboard which will make it more convenient to present your results to anyone. This particularly helps when you done have a lot of html and css experience to build a dashboard out of your work in python. It is a no brainer an even beginners can do it with ease.

This is made possible by using an inbuilt option in GitHub.

You’ll need
1. completed Jupyter notebook
2. GitHub account
3. a cup of coffee(because it is too easy)!!!!!!!!!!!

Step 1: Convert your Jupyter notebook to html file

To convert a Jupyter notebook to a dashboard you need to first convert it into an html file. This can be done in three ways:

First

→ open terminal
→ navigate to the folder where you saved your Jupyter notebook
→ type the following command

jupyter nbconvert <filename>.ipynb

Second

In your jupyter notebook type the following command

<filename>(“<name_you_want_to_save_it_with>.html”)

Third

In your jupyter notebook go to File → download as → html

Note: It is important to save it as index.html or it cant be rendered by GitHub.

Step 2: create GitHub repository

Now login to your GitHub account and create a repository. Here you need to initiate the repository with a readme file.

now go to add new file option and add the index.html file into the repository.

Step 3: Enable GitHub pages

Now, go to the settings option in this repository. If you scroll down you will see “GitHub pages” options. Select the branch and root you saved your index.html file at. (Usually it is branch:main and /root but you can set it as you have it)

A link for the dashboard you created will appear when you enable GitHub pages. Click on it to view your dashboard.

Congratulations!!!! now you can share your dashboards with everyone.

***************************************************************

Comments are welcome.

***************************************************************

--

--