WordPress Blogging with Jupyter Notebook in Five Simple Steps

Jupyter Notebook is such a great tool for scientific programming and data analysis. I would like to be able to show some of my notebooks easily on this WordPress powered blog. After looking around the web and tweaking a little, I have figured out how to easily embed the contents of a notebook. In fact, this entire post was written in the notebook.

1. Writing the contents

First let’s try to use the notebook to do some analysis and plotting:

In [1]:
import re
from pandas import Series
import matplotlib.pyplot as plt
%matplotlib inline

Here we have a protein sequence of HLA-A*01. We are going to clean it up a little and plot the frequcies of each unique amino acid residue in the sequence:

In [2]:

#remove line breaks and spaces
HLA_A1 = re.sub('\s', '', HLA_A1)

#turn it into a pandas Series object
HLA_A1 = Series([x for x in HLA_A1])

#count the frequency of each unique amino acid residue
freq = HLA_A1.value_counts()/len(HLA_A1) * 100
In [9]:
#plot the frequency data
plt.figure(figsize=(10, 2))
freq.plot(kind='bar', alpha=0.8, color='orange')
plt.title("Amino acid frequencies: HLA-A*01", fontsize=18)
plt.xlabel("AA residues", fontsize=14)
plt.ylabel('Percentage (%)', fontsize=14)
<matplotlib.text.Text at 0x81d0e87b8>

2. Save and download the notebook

After we finish the above analysis, save the notebook, and download it as an IPython Notebook (.ipynb). Don’t download it as an HTML file, unless you want to embed it as an iframe. Here this file is saved as notebook_blog.ipynb.

3. Convert and embed the notebook

Navigate to the directory where the notebook is saved. Run the nbconvert command below to convert the downloaded notebook into a simple HTML file.

jupyter nbconvert –to html –template basic notebook_blog.ipynb notebook_blog.html

The source text in the notebook_blog.html file can now be copied and paste straight into the WordPress post/page editor.

4. Update the WordPress style.css file

The following css allows you to mimic the typical look of a jupyter notebook. From the WordPress Dashboard, navigate to Appearance -> Editor then paste the following code to the end of the styel.css file.

5. That’s it, you are done!

The major downside of this approach is that this is a static version of the notebook, it cannot be re-run or shared easily. You should keep a copy of the downloaded .ipynb on GitHub for the ease of reusing the notebook and keeping track of any changes.

If you are using plugins such as Crayon Syntax Highlighter. The <pre> tag must be set to class=”crayon:false” or something similar to disable the rendering by the plugin.

6 thoughts on “WordPress Blogging with Jupyter Notebook in Five Simple Steps

  1. Thank you for the article. I have been trying step by step, but unsuccessful. When I tried to run nbconvert, it tells me “invalid syntax”. Also I could not find the “appearance – editor” on my blog. BTW, is your site WordPress platform? If so, it give me more confidence.

  2. This is fantastically helpful- definitely the best tutorial on iPython / WordPress that I’ve run across! However, my notebook still needs a lot of styling, and nbconvert also removed the [Out] 1: fields. Would you be able to share your nbconvert template and style.css, perhaps on github?

Leave a Reply

Your email address will not be published. Required fields are marked *