How to Embed Interactive Jupyter Notebooks in Static Websites for Free

4,361 views
Skip to first unread message

Skiel Cast

unread,
May 1, 2019, 6:25:41 PM5/1/19
to Teaching with Jupyter Notebooks
Hello everyone!

After a lot of research on the internet, I found no practical tutorial explaining how to embed Jupyter Notebooks in Static Websites using only free technologies. I found a way to do it using Github Gists, MyBinder and NBInteract along with IPython Widgets and I want to share it so no one has to reinvent the wheel.


This is a step by step guide to embed Jupyter Notebooks in a static website. There is also an official tutorial available in the docs of NBInteract.

This guide will cover some points that aren't fully explained in the official tutorial, such as:

- Use Gists instead of Repositories
- Reduce the size of the output HTML
- Specify dependencies for Binder
- Use only some cells and insert them in a webpage via IFrames

Hope you can find it useful!

Ezequiel Leonardo Castaño

Wes Turner

unread,
May 1, 2019, 10:12:17 PM5/1/19
to Skiel Cast, Teaching with Jupyter Notebooks
Cool!

- You can `git clone` gists, but gist git repos don't support branches or pull requests; which users may prefer to work with.
- Nbdime integrates with git diff.
- It may be possible to get nbsphinx working with Tinkerer (a Sphinx-based static site generator). IIRC, nbsphinx can add a binder badge to each .ipynb included in the RST TOC; but IDK whether there's yet any support for sharing single (or multi) cell embeds?
- Hugo (a fast static site generator written in Go) supports Jupyter notebooks with Pandoc. IDK why Pandoc instead of `nbconvert --to html`

Does this create a new Binder instance for every site visitor? Or does it display static HTML with an option to launch binder?
--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-education+unsubscribe@googlegroups.com.
To post to this group, send email to jupyter-education@googlegroups.com.
Visit this group at https://groups.google.com/group/jupyter-education.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/25e980c3-5c64-4ca0-b839-0c26fbfaa3af%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Chris Holdgraf

unread,
May 1, 2019, 10:15:51 PM5/1/19
to Wes Turner, Skiel Cast, Teaching with Jupyter Notebooks
Thanks for all of that info! You may also be interested in Jupyter Book, which also has some functionality for interactivity ( https://jupyter.org/jupyter-book/features/interactive_cells.html)

On Wed, May 1, 2019 at 7:12 PM Wes Turner <wes.t...@gmail.com> wrote:
Cool!

- You can `git clone` gists, but gist git repos don't support branches or pull requests; which users may prefer to work with.
- Nbdime integrates with git diff.
- It may be possible to get nbsphinx working with Tinkerer (a Sphinx-based static site generator). IIRC, nbsphinx can add a binder badge to each .ipynb included in the RST TOC; but IDK whether there's yet any support for sharing single (or multi) cell embeds?
- Hugo (a fast static site generator written in Go) supports Jupyter notebooks with Pandoc. IDK why Pandoc instead of `nbconvert --to html`

Does this create a new Binder instance for every site visitor? Or does it display static HTML with an option to launch binder?

On Wednesday, May 1, 2019, Skiel Cast <skie...@gmail.com> wrote:
Hello everyone!

After a lot of research on the internet, I found no practical tutorial explaining how to embed Jupyter Notebooks in Static Websites using only free technologies. I found a way to do it using Github Gists, MyBinder and NBInteract along with IPython Widgets and I want to share it so no one has to reinvent the wheel.


This is a step by step guide to embed Jupyter Notebooks in a static website. There is also an official tutorial available in the docs of NBInteract.

This guide will cover some points that aren't fully explained in the official tutorial, such as:

- Use Gists instead of Repositories
- Reduce the size of the output HTML
- Specify dependencies for Binder
- Use only some cells and insert them in a webpage via IFrames

Hope you can find it useful!

Ezequiel Leonardo Castaño

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-educat...@googlegroups.com.
To post to this group, send email to jupyter-...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-educat...@googlegroups.com.
To post to this group, send email to jupyter-...@googlegroups.com.

Visit this group at https://groups.google.com/group/jupyter-education.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/CACfEFw8Uid1--o%2BMz%3Dn%2Bi5XG4yucn79%2B3Nnku1uD%2BX%3D3epK8CA%40mail.gmail.com.

Skiel Cast

unread,
May 1, 2019, 10:34:24 PM5/1/19
to Teaching with Jupyter Notebooks
Hi Wes!

First, thank you for you feedback. Let me answer your comments.

- The idea is that the user doesn't interact with the gist directly but rather to have a git-like way to host the notebook. Most likely the suggestions can be expressed via comments in the gist.
- Nbdime is great! But in this particular scenario version control per se isn't necessary since the whole guide assumes one has a fully working notebook. In case there is an update a simple copy and replace of the .ipynb file is enough. It is more of a single-user (or very few users) environment, otherwise a repositoriy would be more suitable
- Nbsphinx can generate static sites but without working cells or interactive widgets. The idea here is to insert a notebook (or some cells of a notebook) inside a another site, such as a blog or a webpage and that the notebook wouldn't be the whole page.
- There are multiple tools to convert notebooks to static site but one miss the interactive component when doing so. Even the official docs of Ipywidgets doesn't have working widgets! So the idea is to have an easily embedable HTML that works and performs computation WITHOUT redirecting the user to Binder.


On Wednesday, 1 May 2019 23:12:17 UTC-3, Wes Turner wrote:
Cool!

- You can `git clone` gists, but gist git repos don't support branches or pull requests; which users may prefer to work with.
- Nbdime integrates with git diff.
- It may be possible to get nbsphinx working with Tinkerer (a Sphinx-based static site generator). IIRC, nbsphinx can add a binder badge to each .ipynb included in the RST TOC; but IDK whether there's yet any support for sharing single (or multi) cell embeds?
- Hugo (a fast static site generator written in Go) supports Jupyter notebooks with Pandoc. IDK why Pandoc instead of `nbconvert --to html`

Does this create a new Binder instance for every site visitor? Or does it display static HTML with an option to launch binder?

On Wednesday, May 1, 2019, Skiel Cast <skie...@gmail.com> wrote:
Hello everyone!

After a lot of research on the internet, I found no practical tutorial explaining how to embed Jupyter Notebooks in Static Websites using only free technologies. I found a way to do it using Github Gists, MyBinder and NBInteract along with IPython Widgets and I want to share it so no one has to reinvent the wheel.


This is a step by step guide to embed Jupyter Notebooks in a static website. There is also an official tutorial available in the docs of NBInteract.

This guide will cover some points that aren't fully explained in the official tutorial, such as:

- Use Gists instead of Repositories
- Reduce the size of the output HTML
- Specify dependencies for Binder
- Use only some cells and insert them in a webpage via IFrames

Hope you can find it useful!

Ezequiel Leonardo Castaño

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-...@googlegroups.com.
To post to this group, send email to jupyter-...@googlegroups.com.

Skiel Cast

unread,
May 1, 2019, 10:41:21 PM5/1/19
to Teaching with Jupyter Notebooks
Hello Chris!

I didn't know about Jupyter Book, it is a really interesting project, it reminds me a lot to GitBook.

I believe the key difference is the target audience, Jupyter Book would be most suitable for a single-purpose guide, course, project. In my particular case, I want to have a personal blog and insert jupyter notebooks inside the posts I publish but there may be no relationship between the posts so having everything in a "manual like" structure could be a bit confusing. I would recommend Jupyter Book for docs or courses as UC Berkley uses it.

But for a collection of independent projects or a case such as mine I think my approach is better.

Skiel Cast

unread,
May 1, 2019, 10:44:48 PM5/1/19
to Teaching with Jupyter Notebooks

Does this create a new Binder instance for every site visitor? Or does it display static HTML with an option to launch binder?

Each group of cells is completely independent (Iframe) and asks the user to run the "hidden" cells, this triggers a "headless" instance of binder, the iframe interacts with that intance and shows the results.

At the end of the guide you can see some examples

The user never notice Binder (or even Python) was used, no redirections needed. This is I believe the best part. 

Chris Holdgraf

unread,
May 1, 2019, 10:46:36 PM5/1/19
to Skiel Cast, Teaching with Jupyter Notebooks
Ah - one more thing you may wanna check out is Voila ( https://github.com/quantstack/voila) - it lets you generate an HTML "dashboard" from a Jupyter Notebook. Still requires a Jupyter server under the hood, but maybe one day that can be de-coupled so you can run it on a website and request the server on-demand.

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-educat...@googlegroups.com.
To post to this group, send email to jupyter-...@googlegroups.com.

Visit this group at https://groups.google.com/group/jupyter-education.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/571f2e6c-174c-43a1-85ec-1e0e82115be7%40googlegroups.com.

Skiel Cast

unread,
May 1, 2019, 10:52:28 PM5/1/19
to Teaching with Jupyter Notebooks
Actually, NBInteract (one of the technologies I used in the guide) does exactly that! 

It allows you to decouple a JupyterServer and just send the cells to excecute and returns the output. NBInteract uses a Jupyter Through Binder so no installation is required for the end user and it could also run in a static site with only a web server since MyBinder is used for the computation

I'm sure Voila would provide much more control and would be excellent for locally run Jupyter servers. But my intention was to keep it free and without using any servers for the notebooks, just the github pages for the static HTML.

Chris Holdgraf

unread,
May 2, 2019, 3:05:39 PM5/2/19
to Skiel Cast, Teaching with Jupyter Notebooks
I'm not trying to say any of those tools is better than another tool, just trying to give some helpful links :-)  the workflow that you shared is great!

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-educat...@googlegroups.com.
To post to this group, send email to jupyter-...@googlegroups.com.
Visit this group at https://groups.google.com/group/jupyter-education.

William Stein

unread,
May 2, 2019, 3:12:19 PM5/2/19
to Chris Holdgraf, Skiel Cast, Teaching with Jupyter Notebooks
Readers of this thread might also find the Sage Cell Server, which
also allows for embedding code/widdgets (of some form) in any static
website relevant:

https://sagecell.sagemath.org/

In particular, see the instructions for embedding:
https://sagecell.sagemath.org/static/about.html?v=66c8a2df011da3aea3dfa789fc6117f4

For context, long ago the Sage Cell server was the thing that Jason
Grout and I dreamed up a sort of little test project during a
workshop. I did basically not work on it afterwards, but Jason did a
ton to finish it, and I think immediately afterwards he started
writing ipywidgets... But it is evidently independently useful.

-- William
> To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/CAD7kTDECbxi0FpYE0nBxRwSr0fGo9iwss-JCx2M1hJy-Pbzj4A%40mail.gmail.com.
> For more options, visit https://groups.google.com/d/optout.



--
William (http://wstein.org)

samuel....@gmail.com

unread,
May 2, 2019, 4:25:41 PM5/2/19
to Teaching with Jupyter Notebooks
Thu 2019-05-02 19:12:19 UTC, William Stein:
>
> Readers of this thread might also find the Sage Cell Server, which
> also allows for embedding code/widdgets (of some form) in any static
> website relevant:
>
>
> In particular, see the instructions for embedding:
>
>
> For context, long ago the Sage Cell server was the thing that Jason
> Grout and I dreamed up a sort of little test project during a
> workshop.  I did basically not work on it afterwards, but Jason did a
> ton to finish it, and I think immediately afterwards he started
> writing ipywidgets...  But it is evidently independently useful.
>
> --  William 

See also PreTeXt:

Aashita Kesarwani

unread,
May 2, 2019, 7:13:34 PM5/2/19
to Teaching with Jupyter Notebooks
Hello,

This is very helpful, I was looking for exactly this - the option to embed interactive code cells in my blogs, that were originally written in Jupyter Notebook. Thanks for sharing it!

Best,
Aashita 

Vincent Nijs

unread,
May 3, 2019, 12:05:33 AM5/3/19
to Teaching with Jupyter Notebooks
Also take a look at the work by @ines on GitHub that, I think, does what you are after.

Wes Turner

unread,
May 3, 2019, 2:30:24 AM5/3/19
to Vincent Nijs, Teaching with Jupyter Notebooks
Is it yet possible to run (some; which?) notebooks in the browser with pyodide (LLVM + emscripten + WebAssembly (WASM))? They have have a lot of the SciPy Stack (numpy, SciPy, pandas, sympy) already compiled AFAIU

"The Python scientific stack, compiled to WebAssembly" 

- If the e.g. requirements.txt or environment.yml are a subset of these packages, could repo2docker optionally just serve pyodide?


"Adding a WebAssembly platform"
--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-education+unsubscribe@googlegroups.com.
To post to this group, send email to jupyter-education@googlegroups.com.

Wes Turner

unread,
May 3, 2019, 2:36:38 AM5/3/19
to Skiel Cast, Teaching with Jupyter Notebooks


On Wednesday, May 1, 2019, Skiel Cast <skie...@gmail.com> wrote:
Hi Wes!

First, thank you for you feedback. Let me answer your comments.

- The idea is that the user doesn't interact with the gist directly but rather to have a git-like way to host the notebook. Most likely the suggestions can be expressed via comments in the gist.

Yeah but when I want to save my modifications what do I do?
 
- Nbdime is great! But in this particular scenario version control per se isn't necessary since the whole guide assumes one has a fully working notebook. In case there is an update a simple copy and replace of the .ipynb file is enough. It is more of a single-user (or very few users) environment, otherwise a repositoriy would be more suitable
- Nbsphinx can generate static sites but without working cells or interactive widgets. The idea here is to insert a notebook (or some cells of a notebook) inside a another site, such as a blog or a webpage and that the notebook wouldn't be the whole page.
- There are multiple tools to convert notebooks to static site but one miss the interactive component when doing so. Even the official docs of Ipywidgets doesn't have working widgets! So the idea is to have an easily embedable HTML that works and performs computation WITHOUT redirecting the user to Binder.

I think the colaboratory team had getting ipywidgets working with their fork on their roadmap. IDK where they are with that with the new Google Cloud AI Platform Notebooks (which has a web IDE that does support Save)
 


On Wednesday, 1 May 2019 23:12:17 UTC-3, Wes Turner wrote:
Cool!

- You can `git clone` gists, but gist git repos don't support branches or pull requests; which users may prefer to work with.
- Nbdime integrates with git diff.
- It may be possible to get nbsphinx working with Tinkerer (a Sphinx-based static site generator). IIRC, nbsphinx can add a binder badge to each .ipynb included in the RST TOC; but IDK whether there's yet any support for sharing single (or multi) cell embeds?
- Hugo (a fast static site generator written in Go) supports Jupyter notebooks with Pandoc. IDK why Pandoc instead of `nbconvert --to html`

Does this create a new Binder instance for every site visitor? Or does it display static HTML with an option to launch binder?

A static HTML render that optionally gets replaced with an IFrame attached to a binder docker image instance would be one way to minimize wasted energy
 

On Wednesday, May 1, 2019, Skiel Cast <skie...@gmail.com> wrote:
Hello everyone!

After a lot of research on the internet, I found no practical tutorial explaining how to embed Jupyter Notebooks in Static Websites using only free technologies. I found a way to do it using Github Gists, MyBinder and NBInteract along with IPython Widgets and I want to share it so no one has to reinvent the wheel.


This is a step by step guide to embed Jupyter Notebooks in a static website. There is also an official tutorial available in the docs of NBInteract.

This guide will cover some points that aren't fully explained in the official tutorial, such as:

- Use Gists instead of Repositories
- Reduce the size of the output HTML
- Specify dependencies for Binder
- Use only some cells and insert them in a webpage via IFrames

Hope you can find it useful!

Ezequiel Leonardo Castaño

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-...@googlegroups.com.
To post to this group, send email to jupyter-...@googlegroups.com.
Visit this group at https://groups.google.com/group/jupyter-education.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/25e980c3-5c64-4ca0-b839-0c26fbfaa3af%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout. 

--
You received this message because you are subscribed to the Google Groups "Teaching with Jupyter Notebooks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter-education+unsubscribe@googlegroups.com.
To post to this group, send email to jupyter-education@googlegroups.com.

Visit this group at https://groups.google.com/group/jupyter-education.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter-education/6514540b-9164-47ff-8c50-953ba51a4e15%40googlegroups.com.

Nicolas M. Thiery

unread,
May 3, 2019, 12:53:58 PM5/3/19
to Teaching with Jupyter Notebooks


> Readers of this thread might also find the Sage Cell Server, which
> also allows for embedding code/widdgets (of some form) in any static
> website relevant:
>
> https://sagecell.sagemath.org/

Yup, and its Jupyter-based generalization ThebeLab:

https://thebelab.readthedocs.io/

It still misses some nice optimizations of the Sage Cell Server for
fast startup (kernel preheating, ...), but works with any Jupyter
kernel and software stack and can use an arbitrary Jupyter server as
backend, including Binder (the default) or a local server.

Context: this was first implemented by Oreilly to make their online
books interactive by forking the Jupyter notebook code base. Then
Benjamin RK (and friends) reimplemented it as a thin layer upon the
JupyterLab library for sustainability.

Cheers,
Nicolas
--
Nicolas M. Thiéry "Isil" <nth...@users.sf.net>
http://Nicolas.Thiery.name/

Dean Pond

unread,
May 12, 2019, 9:52:26 AM5/12/19
to Teaching with Jupyter Notebooks
Hi, Nicolas

It is amazing that I have found a free website which could satisfy your requirements. You only need to register, and then kick it off.

So just go to this url:
https://www.kesci.com/home/workspace/help


Hope it would be helpful

Dean
Reply all
Reply to author
Forward
0 new messages