Uncategorized

How to embed your Jupyter Notebook into a WordPress post. No plugin needed. [beginner’s guide]

You’ll need:
– 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.

Set the parameters for the gist extension in your nbextension config window.

Get your personal access token on your Github account. Click “generate new token”.

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

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s