How to add (embed) Jupyter notebooks to WordPress blog posts

Jupyter notebooks are an effective way to share research, ideas, steps, and other information to others. Sharing single notebooks or entire folders to collaborators is straightforward via GitHub but sharing the notebooks with the public through a blog post needs a few more steps (people read blogs not GitHub (unless they are software developers)). In the following we will outline the steps to embed Jupyter notebooks in a blog post.

Sharing non-interactive Jupyter notebook as static HTML

There are a few ways a non-interactive Jupyter notebook be shared as static HTML as long as they do not have interactive elements like pywidgets in them. They will still be exported as HTML but the interactive elements will not work. We will discuss embedding of interactive Jupyter notebooks in a later section.

Method I (simplest method)

1. Upload file to Google Colab
2. File -> Save a copy as GitHub Gist. It will ask for login permissions to GitHub first time ti is run.
3. Go to GitHub. Then go to your Gists by clicking your profile pic at the upper right corner and selecting Your gists from the menu.
4. Locate the Google Colab file just shared with Gist and open the Gist.
5. Copy the Gist ID. For example, if the address bar shows https://gist.github.com/saugatach/100a28eb7dc353feb1ed3bf18f251443 then the Gist ID is 100a28eb7dc353feb1ed3bf18f251443.
6. Go back to WordPress editor.
7. In the WordPress post start a new paragraph.
8. Edit as HTML.
9. Add the line {gist]<Gist ID>[/gist]. For the Gist ID example above the line would be {gist]100a28eb7dc353feb1ed3bf18f251443[/gist]. Change the { before gist to a [. It is not a typo. WordPress will attempt to interpret the command if [ is used instead of {.
10. Revert back to Edit visually. Wait for the Jupyter notebook to load with the Google Colab badge on it. If it doesn’t load within 30 seconds hit refresh.

Method II (slightly more hands-on)

1. Export Jupyter notebook as a IPYNB file directly from JupterLab (or Jupyter interface).
2. Open the IPYNB file in a text editor and copy the code.
3. Go to GitHub and start a new Gist.
4. Paste the IPYNB code in the code section.
5. Manually name the file in Gist ending with .ipynb, for example, test.ipynb.
6. Click edit at the top and after the page loads, change the privacy setting at the lower right corner of the code snippet to Public.
7. Copy the Gist ID. For example, if the address bar shows https://gist.github.com/saugatach/100a28eb7dc353feb1ed3bf18f251443 then the Gist ID is 100a28eb7dc353feb1ed3bf18f251443
8. Go back to WordPress editor.
9. In the WordPress post start a new paragraph.
10. Edit as HTML.
11. Add the line {gist]<Gist ID>[/gist]. For the Gist ID example above the line would be {gist]100a28eb7dc353feb1ed3bf18f251443[/gist]. Change the { before gist to a [. It is not a typo. WordPress will attempt to interpret the command if [ is used instead of {.
12. Revert back to Edit visually. Wait for the Jupyter notebook to load with the Google Colab badge on it. If it doesn’t load within 30 seconds hit refresh.

Method III (no extra frills, confusing steps)

1. Export Jupyter notebook as a HTML file directly from JupterLab (or Jupyter interface).
2. Open the HTML file in a text editor and copy the code.
3. Go back to WordPress editor.
4. In the WordPress post start a new paragraph.
5. Edit as HTML.
6. Paste the HTML code.
7. Revert back to Edit visually. Wait for the Jupyter notebook to load. If it doesn’t load within 30 seconds hit refresh.

To access the HTML editor in WordPress

For older WordPress editor, there is a HTML editor tab. For the new WordPress editor, start a new paragraph, start typing random letters, stop after a few letters, move and hover the mouse over the text, a horizontal menu will appear, click on the 3 horizontal dots and select Edit a HTML. Clear the random letters, paste the HTML code from the Jupyter file, click on the 3 horizontal dots again, and select Edit visually.