Deploying Jupyter Notebook as a HTML 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.