New post about Jupyter Notebook

archetypes/post.md

@@ -23,6 +23,7 @@ series:
 - Django tricks
 - Indiweb, webmentions and friends
 - Horror stories
+- Data and Data Tools
 reply:
 repost:
 like:

content/post/2017/jupyter-notebook-pelican-combo/index.md

@@ -11,6 +11,7 @@ feature_link: "https://unsplash.com/photos/VSNoQdimlQQ"
 feature_text: "Photo by Zahrin Lukman on Unsplash"
 series:
 - Pelican for my site
+- Data and Data Tools
 ---
 
 Si sta avvicinando il **Pycon 8** e io ci parteciperò. Questo vuol dire che ho raccolto i soldi e sto preparando la strumentazione necessaria per quest' anno.

content/post/2025/hugo-blog-with-jupyter-notebook/index.ipynb

@@ -0,0 +1,171 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "ec2a032c",
+   "metadata": {},
+   "source": [
+    "---\n",
+    "date: '2025-09-01T08:40:34+02:00'\n",
+    "title: 'Hugo Blog With Jupyter Notebook'\n",
+    "feature_link: \"https://www.midjourney.com/home/\"\n",
+    "feature_text: \"by IA Midjourney\"\n",
+    "description: 'How to integrate a Jupyter Notebook to your Hugo Blog'\n",
+    "isStarred: false\n",
+    "tags:\n",
+    "- hugo\n",
+    "- juppyter\n",
+    "- notebook\n",
+    "- datascience\n",
+    "- pydatave\n",
+    "categories:\n",
+    "- dev\n",
+    "images:\n",
+    "keywords:\n",
+    "series:\n",
+    "- Hugo tricks\n",
+    "- Data and Data Tools\n",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "518d9d99-fd20-4809-b9b4-bec288847794",
+   "metadata": {},
+   "source": [
+    "A long time ago, I wrote a [post]({{< relref \"/post/2017/jupyter-notebook-pelican-combo/\" >}}) 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..."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "05e4ab4b-9ee8-43a0-8ebb-2dc1a529f6e5",
+   "metadata": {},
+   "source": [
+    "![pydatave.jpg](pydatave.jpg)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c65e7340-d8ed-4fdb-abdb-2188247c352a",
+   "metadata": {},
+   "source": [
+    "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"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "32a98e54-f4c6-4fa5-bb8b-c3954c1d1565",
+   "metadata": {},
+   "source": [
+    "## Jupyter in my Hugo"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "fb51baa9-24c1-4650-919d-eb15b35d2d53",
+   "metadata": {},
+   "source": [
+    "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](https://github.com/soda92/hugo-nbconvert) 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.\n",
+    "\n",
+    "All this is made by launching this command for generate the notebook\n",
+    "\n",
+    "``` bash\n",
+    "hugo_nbnew content/post/test-hugo-page\n",
+    "``` \n",
+    "\n",
+    "And at the end of all the writing I launch this command\n",
+    "\n",
+    "``` bash\n",
+    "hugo_nbconvert content/post/test-hugo-page/index.ipynb\n",
+    "``` \n",
+    "\n",
+    "for generate/updating the markdown file for Hugo."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c61cc9d9-5b9a-46d3-9b6f-23a5f8fb6610",
+   "metadata": {},
+   "source": [
+    "## Other little things I have done"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "afbccfd1-6493-4e85-97f3-a482e2626879",
+   "metadata": {},
+   "source": [
+    "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..."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9f1a59c7-4989-4f3b-b473-0deda86abd58",
+   "metadata": {},
+   "source": [
+    "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."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "3744203c-5b9a-4e2c-8b90-8b02deabe463",
+   "metadata": {},
+   "source": [
+    "So I find a [JS script](https://www.bryanbraun.com/anchorjs/) for adding deep anchor links to my post and I set it to add a deep anchor for every paragraph of the posts."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "f8c770a5-dbd3-43a2-9f10-2bd1c1cf6399",
+   "metadata": {},
+   "source": [
+    "![mastodon.png](mastodon.png)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "d8151463-8854-43ba-9426-58a79bf616ac",
+   "metadata": {},
+   "source": [
+    "And after all I check if I implement the [meta tag for journalism for Mastodon](https://blog.joinmastodon.org/2024/07/highlighting-journalism-on-mastodon/) because I share a lot of stuff on Mastodon."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "c22dd14a-c42c-4e5b-aefa-f0ac63c7643d",
+   "metadata": {},
+   "source": [
+    "## Final consideration"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a4f227c8-6f18-4d7c-bbaa-920066efb08a",
+   "metadata": {},
+   "source": [
+    "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."
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.9"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

content/post/2025/hugo-blog-with-jupyter-notebook/index.md

@@ -0,0 +1,61 @@
+---
+date: '2025-09-01T08:40:34+02:00'
+title: 'Hugo Blog With Jupyter Notebook'
+feature_link: "https://www.midjourney.com/home/"
+feature_text: "by IA Midjourney"
+description: 'How to integrate a Jupyter Notebook to your Hugo Blog'
+isStarred: false
+tags:
+- hugo
+- juppyter
+- notebook
+- datascience
+- pydatave
+categories:
+- dev
+images:
+keywords:
+series:
+- Hugo tricks
+- Data and Data Tools
+---
+
+A long time ago, I wrote a [post]({{< relref "/post/2017/jupyter-notebook-pelican-combo/" >}}) 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](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](https://github.com/soda92/hugo-nbconvert) 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
+
+``` bash
+hugo_nbnew content/post/test-hugo-page
+```
+
+And at the end of all the writing I launch this command
+
+``` bash
+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](https://www.bryanbraun.com/anchorjs/) 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](mastodon.png)
+
+And after all I check if I implement the [meta tag for journalism for Mastodon](https://blog.joinmastodon.org/2024/07/highlighting-journalism-on-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.

make-post.py

@@ -64,7 +64,7 @@ def notebook_fc():
         rsh.write(
             """\
     #! /bin/bash
-    uv run hugo_nbconvert ../content/post/"""
+    uv run hugo_nbconvert content/post/"""
             + f"{year}/{title}/index.ipynb"
         )
     os.system(f"chmod +x  notescript/{title}.sh")

makefile

@@ -104,4 +104,4 @@ notebook: ## Run notebook script
 	@uv run python3 make-post.py notebook
 
 notebook_editor: ## Run notebook editor
-	@uv run jupyter notebook .
+	@uv run jupyter lab .

notescript/hugo-blog-with-jupyter-notebook.sh

@@ -0,0 +1,2 @@
+    #! /bin/bash
+    uv run hugo_nbconvert content/post/2025/hugo-blog-with-jupyter-notebook/index.ipynb

pyproject.toml

@@ -26,6 +26,7 @@ location = ".env"
 [dependency-groups]
 dev = [
     "hugo-nbconvert>=2025.5.24.3",
+    "jupyterlab>=4.4.6",
     "pre-commit>=4.1.0,<5",
 ]
 

uv.lock

@@ -336,6 +336,7 @@ dependencies = [
 [package.dev-dependencies]
 dev = [
     { name = "hugo-nbconvert" },
+    { name = "jupyterlab" },
     { name = "pre-commit" },
 ]
 
@@ -357,6 +358,7 @@ requires-dist = [
 [package.metadata.requires-dev]
 dev = [
     { name = "hugo-nbconvert", specifier = ">=2025.5.24.3" },
+    { name = "jupyterlab", specifier = ">=4.4.6" },
     { name = "pre-commit", specifier = ">=4.1.0,<5" },
 ]