⚡️ Turn Jupyter Notebooks into Blog Posts
📔

⚡️ Turn Jupyter Notebooks into Blog Posts

July 15, 2024·
Chris Yee WONG, Ph.D., P.Eng.
Chris Yee WONG, Ph.D., P.Eng.
· 3 min read
Image credit: HugoBlox
blog

As a researcher or data scientist, your work often lives in Jupyter Notebooks. But sharing those insights effectively usually means taking screenshots, messy copy-pasting, or exporting to PDF.

Hugo Blox changes that. With the {{< notebook >}} shortcode, you can render your actual .ipynb files directly as beautiful, interactive blog posts or project pages. Keep your code, outputs, and narrative in one place.

Table of Contents

Why publish notebooks?

Tip

Reproducible Research: By publishing the actual notebook, you allow others to download and run your code, verifying your results and building upon your work.

  • No more screenshots – Render crisp code and vector plots directly from your source.
  • Theme consistent – Notebooks automatically adapt to your site’s theme (including dark mode).
  • Flexible sourcing – Display notebooks from your assets/ folder, page bundles, or even directly from a remote GitHub URL.
  • Interactive – Users can copy code blocks or download the full notebook to run locally.

Example: Data Science Workflow

Below is a live example of a notebook rendered right here in this post. Notice how the markdown, code, and outputs (text, HTML, and JSON) are all preserved and styled.

Launch Readiness Analysis

Python · Kernel: Python 3 · nbformat 4.5 · 6 cells

Download notebook
Language
Python
Version
3.11
Kernel
Python 3 python3
nbformat
4.5
Authors
Ownable CMS
Markdown

Ship Notebook Stories in Minutes

Hugo Blox Notebook renderer turns your .ipynb experiments into beautiful long-form posts. Use this sample to see how markdown, code, and outputs flow together.

Markdown
  1. Drop notebooks inside assets/notebooks/ (or import them as page resources).
  2. Reference them with {{</* notebook src="your.ipynb" */>}}.
  3. Control code, outputs, metadata badges, and download links via shortcode params.
In [1]
demo quickstart
1
2
3
4
5
6

import math
accuracy = 0.982
print("Collecting data...")
print("Training notebook-ready block...")
print("Done!")
accuracy
Collecting data...
Training notebook-ready block...
Done!

0.982
In [2]
1
2

from IPython.display import HTML
HTML("<div style='font-family:Inter,ui-sans-serif;'><strong>Launch Readiness:</strong> <span style='color:#22c55e;'>98.2% confidence</span><br><em>Notebook blocks are theme-aware and dark-mode friendly.</em></div>")
Launch Readiness: 98.2% confidence
Notebook blocks are theme-aware and dark-mode friendly.
In [3]
metrics
1
2
3
4
5
6
7
8

metrics = {
    'metrics': {
        'engagement_rate': 0.73,
        'read_time_minutes': 4.6,
        'subscribers': 1280
    }
}
metrics
{
  "metrics": {
    "engagement_rate": 0.73,
    "read_time_minutes": 4.6,
    "subscribers": 1280
  }
}
Markdown

Tip: Pair this block with Call-to-Action cards or the Embed shortcode to link to GitHub repos, datasets, or ARXIV preprints.

Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit

How to add a notebook

  1. Save your notebook. Place your .ipynb file in assets/notebooks/ (for global access) or inside a page bundle (like content/blog/my-post/analysis.ipynb).
  2. Add the shortcode. In any Markdown page, simply use: {{< notebook src="analysis.ipynb" >}}
  3. Customize. You can hide code cells for non-technical audiences (show_code=false) or just show the output (show_outputs=true).
Important

Hugo Blox respects your privacy. Notebook rendering happens statically at build time—no third-party services required.

Next steps

  • Try it out: Drop one of your existing notebooks into this site and see how it looks.
  • Link your papers: Use the Embed shortcode to link your notebook to your latest arXiv preprint or GitHub repository.
  • Get help: Join the community on Discord or check the documentation.

Happy researching! 🚀

Hugo Blox Jupyter Open Science Tutorials
Chris Yee WONG, Ph.D., P.Eng.
Authors
Chris Yee WONG, Ph.D., P.Eng.
Assistant Professor in Robotics

I am Chris Yee Wong, an assistant professor in the Department of Mechanical, Industrial and Aerospace Engineering (MIAE) and the director of the Living with Assistive and Interactive Robots (LAIR) Lab at Concordia University in Montreal, Canada.

The overall goal of my research is to develop robotic assistants for safe, comfortable, and intuitive autonomous physical and social human-robot interaction (psHRI) in the areas of home care, retail, manufacturing, or healthcare. My current research arc involves different aspects of psHRI with humanoid, mobile, and manipulator robots, particularly by examining a) how a robot can infer intention and react appropriately depending on the context by using a multimodal analysis of human posture, gesture, touch, emotional state, physiological signals, environmental signals, etc; b) how robots can be placed in the retail space to enhance and assist the shopping experience of those who might have visual or mobility impairments; and c) how virtrual reality can be used in psHRI.

I am also developing the foundations of Sensor Observability Analysis, a novel way of performing generalized kinematic analysis of distributed axial sensors on articulated robots. My past research involved automation of single cell micromanipulation, quadruped robot control, and hexapod robot leg design.

I am also passionate about teaching using evidence-based techniques, the scholarship of teaching and learning, mentoring, and helping people become better versions of themselves.

On my spare time, I’m a hobbyist maker with my own Etsy store (with corporate clients) and I’m involved in coaching elite youth and university-level dragon boat in the Montreal area. Although my blog Ramblings of a PhD is only occasionally updated, it has recorded some of my thoughts from having started a career in academia.

Feel free to contact me by email: christopheryee[dot]wong[at]concordia[dot]ca

(Note that this website is still a work in progress. Please use the links to my ResearchGate and LinkedIn profiles for a more detailed portfolio.)