⚡️ Turn Jupyter Notebooks into Blog Posts

Mon, 15 Jul 2024 00:00:00 +0000

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: HugoBlox Studio

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

Drop notebooks inside assets/notebooks/ (or import them as page resources).
Reference them with {{</* notebook src="your.ipynb" */>}}.
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.

How to add a notebook

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).
Add the shortcode. In any Markdown page, simply use: {{< notebook src="analysis.ipynb" >}}
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 or check the .

Happy researching! 🚀

Tutorials |

⚡️ Turn Jupyter Notebooks into Blog Posts

Why publish notebooks?

Example: Data Science Workflow

Ship Notebook Stories in Minutes

How to add a notebook

Next steps