I started to write a lot of Data Science projects using Jupyter Notebooks. I was hosting these projects on GitHub, which I continue to do. However, I also have this website, and I thought it would be great to also post these data science projects here. The idea is to keep the Jupyter Notebook format and just embed it within a blog post.
Convert Jupyter Notebook to HTML
This blog post assumes that you already have a Jupyter Notebook created. Once you have, a package called Nbconvert is used to convert the Jupyter Notebook (.ipynb) to HTML. Be aware that as of the time of writing, only Python 3.6-3.8 is supported and tested by Nbconvert. You can install Nbconvert via the command line if you have a pip or an Anaconda python environment already installed, see Figure 1.
Figure 1 - Install Nbconvert with either pip and conda
Once Nbconvert is installed, the process of conversion to HTML can now start. This is achieved easily by running the following command in the command line. The command must be run in the same directory as the "YourNotebook.ipynb" file:
Figure 2 - Convert .ipynb file to HTML
It is worth mentioning that at first I started by using Nbconvert to convert Jupyter Notebooks to Markdown, as my website uses Jekyll. I thought this would be the best approach. I was wrong. The markdown conversion did not look anything like the classic Jupyter Notebook style and format, and for me this is one of the best aspects of these notebooks.
IFrame
Once the notebook is now in HTML format the best way to embed it within a markdown blog post is by using an Iframe. Style problems occurred if I did not use an Iframe. By using the Iframe, all of the necessary styling that the Jupyter Notebook needs is contained within the Iframe, and does not interfere with your websites CSS.
Figure 3 - Embed the converted JupyterNotebook.html file into an Iframe
Conclusion
This blog post explained how to convert Jupyter Notebooks into HTML and embed them into a personal website or blog. This is achieved without destroying the style of either the Jupyter Notebook or the website. An example of this being used can be seen in one of my Data Science blog posts here.
