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.
- 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
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.
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.
Top comments (0)