Way to export notebook as HTML in Jekyll for Blog Posts?

nbdev
4

Ok, folks, I figured it out. It turns out I don’t have to write any custom exporter or change any templates. Here is how you can embed interactive Jupyter notebooks with Altair in your GitHub Pages Jekyll blog.

  1. Copy this template locally. Name it altair_template.tpl . The reason for doing this is to include the dependencies for Altair in the HTML.

  2. Make a minor edit to this template. At the top, change

    {% extends "full.tpl" %}
    to
    {% extends "basic.tpl" %}

  3. Create a Jupyter notebook with interactive charts using Altair. Note: the docs state that Ipywidgets are also supported by this (but I haven’t tested it yet)

  4. Convert your Jupyter Notebook to HTML by referencing the custom template .

    jupyter nbconvert your_notebook.ipynb --to html --template altair_template.tpl

  5. You can copy and paste this HTML in your markdown file for your Jekyll blog post, and it will not break any styling or CSS in your theme. It is definitely possible to automate this so you don’t have to copy and paste anything, I’m just so excited that I wanted to share this before creating automation that can do this (There is a way to do this in Jekyll or GitHub Actions).

  6. Enjoy your super cool blog with interactive, charts, graphs, tooltips, etc.

P.S. anyone interested in learning Altair, This tutorial is amazing

7 Likes