Code Snippet: How to Embed a Jupyter Notebook in Your Hugo Static Website

code-snippet hugo python

While I like to use R-Blogdown for this website in order to be able to knit R-markdown documents into Hugo pages, I found an additional render engine for Jupyter notebooks to overcomplicate things.

Therefore, how about just rendering your Python notebook to html with nbconvert, copying it to /static and writing a Hugo shortcode for embedding it into your website?

> jupyter nbconvert --to html my_notebook.ipynb

The Shortcode

<!--pybook.html--> 
<h3><a href="/pybooks/{{ index .Params 0 }}.html">Click here to view this notebook in full screen</a></h3>
 <iframe src="/pybooks/{{ index .Params 0 }}.html"
        style="height:{{ index .Params 1}}px;width:100%;border:none;overflow:hidden;" scrolling="no"></iframe>

For each notebook, put the name of your file as first argument. Then, you have to adjust the second argument until the whole notebook is displayed (or you just enable scrolling, but I personally find that inconvenient).

Example use, remove space between “{{” and “}}”

{ {< pybook sample 2750 >} }

Click here to view this notebook in full screen

Questions? Thoughts? Generate a Comment to this Post!


Enter Name:


Enter a Title for Later Reference:


If Applicable, Enter Reply Reference:


Enter Comment:



JS Code to Create and Format Comments in Static Websites like Hugo

hugo js

Code to automatically generate a search bar in JS from XML page content in Hugo

hugo js r

Permutation Test for F-score Differences in Python

code-snippet python stats

Search this Website