Importing static HTML content with large number of images/Jupyter notebook to Ghost blog post

I have a research content piece, available as an interactive Jupyter Notebook. I'd like to make this notebook available as a blog post, and do the necessary conversions automatically.

I can use command line and programmatic tools like nbconvert to convert the notebook file to static HTML content with exported images first.

What would be the best option to import static HTML with images to Ghost, sourced from the file system or URL, so that I do not need to manually re-edit/place images, as there is a large number of charts as images (>30).

Even better would be if Ghost could import SVGs (better for chart readability), but in a pinch, normal PNG will do.

Or if there is a simple manual way like copy-pasting HTML with images included please let me know.

Solution

It seems you can simply export the Jupyter notebook as static HTML with inline images, open this HTML file in your web browser and then copy-paste into Ghost editor. Some minor tune-ups in Jupyter output is required.

Ghost editor will correctly upload inline images.

Ghost does not support some basic HTML formatting like nested lists, so might need to rewrite your content after trying with the first import.

First make sure how have some settings correctly set up for matplotlib and other figure backends you use:


    # https://stackoverflow.com/a/58393562/315168
    logging.getLogger('matplotlib.font_manager').disabled = True

    # Plot larger and high DPI images
    matplotlib.rcParams['figure.figsize'] = (12, 12)
    matplotlib.rcParams['figure.dpi'] = 400

    # Disable scientific notation on axes
    # https://stackoverflow.com/a/28373421/315168
    matplotlib.rcParams["axes.formatter.limits"] = (-99, 99)

    # English decimal separator
    matplotlib.rcParams["axes.formatter.use_locale"] = True

    # Matplotlib developer interface and memory management are unideal
    # https://stackoverflow.com/questions/27476642/matplotlib-get-rid-of-max-open-warning-output
    matplotlib.rcParams.update({'figure.max_open_warning': 0})

    # Get rid of all matplotlib warnings,
    # as there are some that are irrelevant
    warnings.filterwarnings("ignore", module = "pandas\..*" )
    warnings.filterwarnings("ignore", module = "matplotlib\..*" )

    # Because we use a special font
    # we want to raster theimage output,
    # even though this will make image quality lower 
    # on various devices
    matplotlib_inline.backend_inline.set_matplotlib_formats("png")

Then we can render the notebook, either in Jupyter itself or Visual Studio Code by running it. Save the resulting notebook with inline images.

Run nbconvert to output static HTML:

jupyter nbconvert --to=html --no-input --embed-images --output-dir html-export research.ipynb

Open html-export/research.html in a web browser. I used Firefox.

Create a new blog post in Ghost editor.

Copy-paste all content from the static web page to Ghost editor.