– Jupyter Notebooks in ‘tree mode’
– Jupyter Notebook terminal or Linux terminal
– A Github account
– A WordPress account
– The ‘Gist’ extension
This guide will first help you to create a ‘gist’ of your notebook, which will then be embedded into your wordpress post.
Installing the gist extension on my Windows machine
To get the gist extension up and running on my Windows machine I ran the following code in the Anaconda terminal:
pip install jupyter_contrib_nbextensions
pip install jupyter_nbextensions_configurator
Installing the gist extension on my Linux machine
The windows installation method did not work for my Linux machine. To achieve the same thing, I used the following code in my Linux terminal:
conda install -c conda-forge jupyter_contrib_nbextensions
Enabling the Gist extension
Next, make sure that you’re viewing the Jupyter Notebook you want to embed in your WordPress in ‘tree mode’.
Second, we are going to enable the ‘Gist’ extension. To do this, go to the Edit > nbextensions config. This will open a new window with a list of extensions. Look for ‘Gist-it‘. When you click on ‘Gist-it’. You’ll be able to set the parameters for the extension.
The first parameter we need to set is the ‘Github personal access token‘. To get this token, you’ll need to go to your personal Github account. This token can be generated at: https://github.com/settings/tokens. Click on ‘generate new token‘. Then fill in a name for the token in the ‘Note‘ textbox. After that, select ‘gist‘. Right after creating the token, you’ll see your own personal access token. Copy it. DO NOT share this token with other people.
After copying the personal access token from your Github account, go back to the nbextension config window and paste the token into the first parameter field ‘Gitbub personal access token‘. Next, check the ‘Gists default to public‘ box.
Sharing the notebook to gist
Go to the notebook you would like to add to your Github gist (in tree mode). And click on the Github logo that is now present in the Jupyter Notebook task bar.
When you click on the logo a new window will appear that asks for a gist id. If this is the first notebook your adding to your gist, you won’t need to fill in an id. So skip this field. Check the ‘make the gist public box‘. And add a description, this will be the title of your gist.
Go to your gists on Github. You can easily access these by clicking on your profile picture in the righthand corner. A dropdown menu will appear. Click on ‘your gists‘. If it went well, you’ll see your Jupyter notebook on this page.
Embedding your gist on WordPress
Open the gist by clicking on it. Then copy the URL from your browser. This is the URL to your gist. Make a new WordPress post. Make sure your WordPress ‘block’ is switched to HTML. Paste the URL into the HTML block. And you’re done. Publish your post and look at your site. Your first Jupyter notebook on WordPress.