Hugo allows you to store your images with your content using a feature called page bundles.
I was loosely familiar with the feature, but Claude explained to me how I could use it to better organize posts on this site and the images I add to them.
Previously, I defined a _static directory at the root of this site and mirrored my entire content folder hierarchy inside _static/img.
This approach works ok and is pretty useful if I want to share images across posts, but jumping between these two mirrored hierarchies became a bit tedious while I was trying to add images to the markdown file I generated from a Jupyter notebook (.ipynb file).
Using page bundles, I could store the images right next to the content like this:
content/til/fastai/lesson2-rowing-classifier/
├── images
│ ├── lesson2-rowing-classifier_18_4.png
│ └── lesson2-rowing-classifier_27_4.png
├── index.md
└── lesson2-rowing-classifier.ipynb
With this structure, I can reference images in the post like this:
A bit nicer than needing to use the longer path
I ended up using a script to convert the notebook into a markdown file and manage the associated images, but this was a nice pattern to learn about.