Creating Custom Hugo Shortcodes

adam@koszek.com (Adam Koszek) — Mon, 15 May 2023 00:00:00 +0000

Today I learned how to create custom shortcodes in Hugo to make content creation more efficient.

What are Shortcodes?

Shortcodes are simple snippets inside your content files that Hugo will render using predefined templates. They’re a great way to add custom HTML or reusable components without writing raw HTML in your Markdown files.

Creating a Basic Shortcode

To create a shortcode, add an HTML file to the layouts/shortcodes/ directory. For example, to create a “notice” shortcode:

Hugo on Adam Koszek - Personal Website

Creating Custom Hugo Shortcodes

What are Shortcodes?

Creating a Basic Shortcode