Deploying Jupyter Notebook as a HTML Web Page
Tags: python, jupyter, webdev, showdev
Published: 2021-04-18 15:52:27

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](https://parthketandoshi.github.io/Production-Application-Test/)

###Problem Statement 📄 (Source: [Intercom](https://www.intercom.com/blog/how-we-hire-engineers-part-1/))
> 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](https://en.wikipedia.org/wiki/Great-circle_distance) 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](https://gist.github.com/shadab16/ebf141802f90a51c42350ca2dd98ec7c).

###Implementation 🏗
* [Google Colaboratory ⚗️](https://colab.research.google.com) to implement the Python Script
* [Folium 🗺](https://python-visualization.github.io/folium/) to render Maps and Markers for Office and Customer Locations
* [URLlib Module 📁](https://urllib3.readthedocs.io/en/latest/) to fetch and process customer data
* Built-in [JSON Package 🧾](https://docs.python.org/3/library/json.html) to process the data after initial pre-processing
* [Pandas 📊](https://pandas.pydata.org) to work with the processed customer data
* Built-in [UnitTest Library 📋](https://docs.python.org/3/library/unittest.html) to implement basic unit-testing
* [GitHub Pages 💻] (https://pages.github.com) for hosting the generated Web-page

###Deployment 🚀
####Jupyter Notebook to HTML

I used [**jupyter nbconvert**](https://nbconvert.readthedocs.io/en/latest/) to convert the ipynb script to html

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

[Supported output formats](https://nbconvert.readthedocs.io/en/latest/usage.html#supported-output-formats) are HTML, PDF, LaTeX and many more. 

Additional [Configuration Options](https://nbconvert.readthedocs.io/en/latest/config_options.html) 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 📥
{% github ParthKetanDoshi/Production-Application-Test %}