jekyll   jupyter_notebook  

I'm finally content with how my Jupyter notebooks are formatted/displayed in my Jekyll site so i figured I'd share what I do in case someone is curious.

All you'll need is the nbconvert package which can be installed by using either pip or conda as follows:

  • pip install --user nbconvert
  • conda install nbconvert

My procedure is as follows:

  1. Save your Jupyter notebook into whatever directory you want.
  2. Navigate to that direcrory using the command prompt.
  3. Use the following code to convert your .ipynb to .html
    4. jupyter nbconvert --to html yournotebook.ipynb
    That's the barebones conversion from .ipynb to .html. For my website, I'm also including the following flags to customize my output further:
    jupyter nbconvert --to html yournotebook.ipynb --theme jupyterlab_miami_nights --template lab --embed-image
    The entry above is converting my .ipynb to .html, using the lab template (built-in feature of nbconvert), embedding images as base64 URLs in the HTML file, and using the custom notebook theme "jupyterlab_miami_nights" for the output.
  4. Place your HTML file into the _posts folder of your Jekyll website.
  5. Add the standard YYYY-MM-DD- to the beginning of the file name of your html file. (i.e., if your html file was named hi.html and you want the post to correspond to August 11,2022 then rename the file to 2022-08-08-hi.html
  6. Add the standard .yaml header to the beginning of your html file.
    7. ---
    layout: post
    title: "Importing Jupyter Lab Notebooks into Jekyll Site"
    subtitle: "Displaying my work with style"
    date: 2022-08-08 05:53:13 -0400
    tags: jekyll jupyter_notebook
    background: '/img/posts/bgp1.jpg'
    ---

After this, you can play with the HTML and CSS of your template to further customize things.

You can see an example of the output using this method here

I'm thinking of writing a python/shell script that will enable me to automate this process a bit further.

Hopefully this is useful to you!

Updated: