01-05-2021

Hugo Jupyter Notebook



  1. UPDATE (March 2018): For a more modern solution that uses an interactive JavaScript widget, please go to my new post: Embedding Matplotlib Animations in Jupyter as Interactive JavaScript Widgets.In.
  2. Jupyter offers a great literate programming environment for multiple languages and so being able to publish Jupyter notebooks as Hugo blogposts would be a huge plus. I have been looking for a way to incorporate Jupyter notebooks into my blogging workflow for a while now and I narrowed my options down to the following.
  3. Jupyter Notebooks¶. Any notebooks that you create will need front matter for hugo to know how to render the content. Once you edit the name of the jupyter notebook to something other than Untitled.ipynb, hugo-jupyter will automatically edit the notebook’s metadata to enable rendering with jupyter.

Learn how to blog in Academic using Jupyter notebooks

Notebook

Anaconda Download

Use this tutorial to learn how to create your first Jupyter Notebook, important terminology, and how easily notebooks can be shared and published online.

Embed

Install Python and JupyterLab

Install Anaconda which includes Python 3 and JupyterLab.

Hugo Academic Jupyter Notebook

Alternatively, install JupyterLab with pip3 install jupyterlab.

Create or upload a Jupyter notebook

Run the following commands in your Terminal, substituting <MY-WEBSITE-FOLDER> and <SHORT-POST-TITLE> with the file path to your Academic website folder and a short title for your blog post (use hyphens instead of spaces), respectively:

The jupyter command above will launch the JupyterLab editor, allowing us to add Academic metadata and write the content.

Hugo Jupyter Notebook Download

Edit your post metadata

The first cell of your Jupter notebook will contain your post metadata (front matter).

In Jupter, choose Markdown as the type of the first cell and wrap your Academic metadata in three dashes, indicating that it is YAML front matter:

Jupyter Notebook Download

Edit the metadata of your post, using the documentation as a guide to the available options.

To set a featured image, place an image named featured into your post’s folder.

For other tips, such as using math, see the guide on writing content with Academic.

Convert notebook to Markdown

Example

This post was created with Jupyter. The orginal files can be found at https://github.com/gcushen/hugo-academic/tree/master/exampleSite/content/post/jupyter