Files
fundor333.com/content/post/2025/hugo-blog-with-jupyter-notebook/index.ipynb
2025-09-01 01:33:29 +02:00

172 lines
5.4 KiB
Plaintext

{
"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
}