Deploying Jupyter Notebook as a Web Page

I am writing this post to demonstrate how I deployed a Jupyter Notebook as an HTML Web-page. When provided with a problem statement for which I decided to implement the solution in Python, I was exploring different ways to share my Python Script displaying the code snippets with its output when I found out this method.

You can check out the final output here

Production Application Test - Project Webpage

Problem Statement (Source: Intercom)

We have some customer records in a text file, one customer per line, JSON formatted lines. We want to invite any customer within 100km of our Dublin office for some food and drinks on us. Write a program that will read the full list of customers and output the names and user ids of matching customers (within 100km), sorted by User ID (ascending).

• You must use the first formula from this Wikipedia article to calculate distance. Don't forget, you'll need to convert degrees to radians.
• The GPS coordinates for our Dublin office are 53.339428 and -6.257664.
• You can find the Customer list here.

Implementation

• Google Colaboratory to implement the Python Script
• Folium to render Maps and Markers for Office and Customer Locations
• URLlib Module to fetch and process customer data
• Built-in JSON Package to process the data after initial pre-processing
• Pandas to work with the processed customer data
• Built-in UnitTest Library to implement basic unit-testing
• GitHub Pages for hosting the generated Web-page

Deployment

Jupyter Notebook to HTML

I used jupyter nbconvert to convert the ipynb script to html

jupyter nbconvert <input-file> --to <output-format>

Supported output formats are HTML, PDF, LaTeX and many more.

Additional Configuration Options can be used to enrich the experience of converting notebooks to other forms. One option which I used was changing the theme of the notebook which is set to Light by default. It can be done using HTMLExporter.theme CLI flag.

Usage Eample:

jupyter nbconvert script.ipynb --to html --HTMLExporter.theme=dark 

After generating the HTML file, I made changes to the HTML code like adding a navbar to navigate to sections and changing the background colour jp-Notebook class from Black to Grey20 colour (#333333). I hosted it using GitHub Pages directly from its GitHub Repository.

GitHub Repository