DEV Community

loading...
Cover image for Deploying Jupyter Notebook as a HTML Web Page

Deploying Jupyter Notebook as a HTML Web Page

parthketandoshi profile image Parth Doshi ใƒป2 min read

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 ๐Ÿ—

Deployment ๐Ÿš€

Jupyter Notebook to HTML

I used jupyter nbconvert to convert the ipynb script to html

jupyter nbconvert <input-file> --to <output-format>
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿ“ฅ

Discussion (0)

pic
Editor guide