Display Jupyter Notebooks with Academic
In this guide, we’ll learn how to blog in Academic using Jupyter Notebooks.
Here’s a snippet from a Jupyter notebook, for example:
print("I am a Jupyter Notebook!")
I am a Jupyter Notebook!
Install Python and Jupyter
Install Anaconda which includes Python 3 and Jupyter notebook.
Otherwise, for advanced users, install Jupyter notebook with
pip3 install jupyter.
Create a new blog post as usual
Run the following commands in your Terminal, substituting
my-post with the file path to your Academic website folder and a name for your blog post (without spaces), respectively:
cd <MY_WEBSITE_FOLDER> hugo new --kind post post/my-post cd <MY_WEBSITE_FOLDER>/content/post/my-post/
Create or upload a Jupyter notebook
Run the following command to start Jupyter within your new blog post folder. Then create a new Jupyter notebook (New > Python Notebook) or upload a notebook.
Convert notebook to Markdown
jupyter nbconvert Untitled.ipynb --to markdown --NbConvertApp.output_files_dir=. # Copy the contents of Untitled.md and append it to index.md: cat Untitled.md | tee -a index.md # Remove the temporary file: rm Untitled.md
Edit your post metadata
index.md in your text editor and edit the title etc. in the
front matter according to your preference.
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.
Alternatively, a Jupyter notebook can be embedded in a page by following one of the approaches below:
Upload your notebook as a GitHub Gist and click Embed to copy and paste your hosted notebook into the body of content in Academic
Convert your notebook to HTML using
jupyter nbconvert --to html <NOTEBOOK_NAME>.ipynb. Then move the resulting HTML file to your page’s folder and embed it into the body of the page’s Markdown file using:
<iframe src="./<CONVERTED_NOTEBOOK_FILENAME>" width="90%" height="1000px" style="border:none;"> </iframe>
Upload your notebook to a cloud notebook service such as Microsoft Azure, Google Cloud Datalab or Kyso. Then click their Embed button, pasting their custom embedding code into the body of your page’s Markdown file
Copy snippets of code from your notebook and paste them into the body of your page using Academic’s code highlighting