Hugo Blog With Jupyter Notebook

Fundor333 | | Reading time 2 minutes | Word count 424

######


A long time ago, I wrote a post about writing a post for the Pelican static site generator made with a Jupyter Notebook. I did it because, at the time, I was a huge fan of the Notebooks and I had the blog generated by Pelican so…

pydatave.jpg

And now, after a PyDataVe (the 22nd event), I make a Jupyter Notebook after a lot of time and I feel the need to have a solution for make a Jupyter Notebook one of the post of my blog so I find a way to do it. This time in Hugo

Jupyter in my Hugo

So first I search for a way to convert a Jupyter Notebook to a Markdown file with the headers for Hugo. So I find a python module   to generate a Notebook with a starting metadata for my blog. All the metadata are inside the first cell set as a Markdown type cell.

All this is made by launching this command for generate the notebook

hugo_nbnew content/post/test-hugo-page

And at the end of all the writing I launch this command

hugo_nbconvert content/post/test-hugo-page/index.ipynb

for generate/updating the markdown file for Hugo.

Other little things I have done

After testing all of this stuff I make some script for my personal writing pipeline (if I don’t make some automation I feel bad) I fix some CSS of my site for the code part. I am a Backend Dev, so I don’t share my CSS edit because it is something working but not so pretty to share…

After that I find myself wanting to have some way to cite a part of the post with a link (because I want to share a specific part of the post as a response to post/tweet/tooth on the web) and I search for something clean and usefull.

So I find a JS script   for adding deep anchor links to my post and I set it to add a deep anchor for every paragraph of the posts.

mastodon.png

And after all I check if I implement the meta tag for journalism for Mastodon   because I share a lot of stuff on Mastodon.

Final consideration

I like my new configuration with the possibility to add Jupyter Notebook in my blog and this is the first Notebook I had to my Hugo Blog. I also like the idea that I can work for something else, make a Notebook and, only changing the data, make multiple article about something with the updated data every time I need to add the blog with the latest report for the dataset.

This post is part of the Hugo Tricks series
  1. Hugo With Lazy Loading and Webp
  2. WebP and Avif With Hugo's Static Site Generator
  3. How I implement Indieweb, Webmention and H Entry in My Blog
  4. More Stuff I Do With Webmention, Micropub and Brid.gy
  5. New Render Image For Hugo
  6. Add Photo Page in your Hugo Site
  7. Github Action for Syndication Links
  8. Generate Post With Img for Hugo
  9. Hugo Blog With Jupyter Notebook
This post is part of the Data and Data Tools series
  1. Jupyter Notebook Pelican Combo
  2. Hugo Blog With Jupyter Notebook



Comments

To reply to this post, you can send a Webmention or you can toot me at [email protected]

With an account on the Fediverse or Mastodon, you can respond to this post. Since Mastodon is decentralized, you can use your existing account hosted by another Mastodon server or compatible platform if you don't have an account on this one. Known non-private replies are displayed below.

Learn how this is implemented here.


See Also