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.

Why publish notebooks?

• 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.

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

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>")

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
  }
}

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).

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! 🚀