How can I display an jupyter notebook on a homepage built with django?

user_7207183 0
Viewed 1920

Environment:

Python 3.6
Django 1.11

I saved a .ipynb file as .html because I want to implement this html to show it on my homepage (that is not yet online).

I use Bootstrap 4.0 beta as a style on my homepage. I have a navbar that is inherited into any html file of this project which works perfectly fine.

But the HTML file of the jupyter notebook can only be displayed correctly when I do not inherit the navbar. If I try to inherit, the navbar is not displayed correctly any more.

My plan is to build my own blog where I post either markdown files (when I do not include Python or R code) or jupyter notebook or rmarkdown notebook.

Both RMarkdown or Jupyter Notebooks can be converted to html, markdown or also pdf. But having tried the first 2, it does not work. If opened in a browser, they are displayed perfectly as you all know. But of course I want to maintain the navigation that I already implemented.

So I hope you can give me a hint how I can do that; I am still a beginner, especially with Django. But I tried a lot of things:

  1. I first had my homepage ready and used the Django app zinnia. I could post the RMarkdown with useable results but not the Jupyter notebooks (because of the same problem).
  2. I tried converting into Markdown and use that in Zinnia but the result was worse.
  3. Tried to manipulate the html files of the notebooks but this did not change anything.
  4. Tried to convert manually with nbconvert in the terminal (I think this is the same conversion method because there was no difference)
  5. Build a new page from scratch (this time using bootstrap 4 whereas first I used 3). But same problem remains.

The only thing that worked is to either leave out the navbar or to leave out the styling. But obviously other people have found perfect solutions as there are many pages online that have jupyter notebooks nicely implemented.

I have a base.html in which the navbar is created and the bootstrap styling is loaded. All other html files inherit from this file like this:

{% extends 'base.html' %}
{% block content %}

(here is the individual html content or the html code of the jupyter notebook)

{% endblock %}

EDIT: I just found this: https://nipunbatra.github.io/blog/2017/Jupyter-powered-blog.html

It looks like this guy found a way to do it when he ran into the same problem but I cannot understand everything.

If you have a hint for me please let me know. For all who ran into the same problem, maybe you can solve the problem using the info from that blog post.

django-1.11 jupyter-notebook django html
1 Answers

While I don't have a perfect solution, I think it's just a matter of somebody spending some time cleaning up the appearance on the front end. I'm not good with js etc. but on the backend I have done a few things.

  • Use the nbconvert with the basic template as discussed in your blog
  • Use a FileField model in Django to upload this
  • Create a view for these; likely a list and detail view

Left to be figured would be:

  • Create a template along that takes the basic html file and dresses it up as you'd like with a stylesheet

As I said, I have the first three steps accomplished but the output is ugly. You can also try to use ipypublish for the HTML conversion. It's interesting to me that Jupyter has a blog but I cannot find any documentation around how or if they use notebooks to make it...

user_63719800
Related