This post lives in its own folder (content/posts/using-images-and-shortcodes/index.md),
alongside an image file. That folder is a Hugo page bundle: any asset
placed next to index.md can be referenced with a relative path, and it gets
copied to the right place automatically when the site builds.
The figure shortcode
{{< figure src="cover.svg" alt="Demo cover image" caption="A generated SVG, bundled with this post" >}}
renders as:
A generated SVG, bundled with this post
Why bundles are handy
- Move the folder, and the post keeps its images; no broken links.
- No separate
static/images/...path to keep in sync with the post. - Works for any file type: PDFs, diagrams, downloadable code samples.
Linking to other posts
Shortcodes like {{< ref >}} resolve internal links by filename instead
of a hardcoded URL, so renaming a post’s slug doesn’t quietly break links
from other pages; see the welcome post
for an example.