How to use Jupyter Notebooks with Hugo

We can’t directly put the notebook in the content directory of our website. Instead, we’ll convert the notebook to markdown.

First, we need to add the YAML front matter, just like any markdown post in hugo. We put it in the first cell (in markdown).

+++
title = "How to use Jupyter Notebooks with Hugo"
date = 2023-10-26T12:57:14+02:00
lastmod = 2023-10-26T12:57:14+02:00
draft = false
+++

To convert the notebook to markdown we use the command

jupyter nbconvert --to markdown notebook.ipynb

We then move the output file into the content/posts/ directory of the hugo site.

If the notebook contains images, they will be stored in the directory notebook_files. We copy this directory to the static/ directory of the hugo site.

Then, we need to fix all the links in the notebook.md by adding a / at the beginning of the path.

We can use sed to do it for the whole file.

# notebook_files/ -> /notebook_files/
sed -i 's,notebook_files/,/notebook_files/,g' notebook.md