Hugo Custom Shortcodes

Before going to custom shortcodes, you need to unnderstand what is a shortcode in Hugo.

Shortcodes

Shortcodes are a way to insert templates into your content files, as explained on Hugo website. They allow you to add features that are not supported by Markdown, such as YouTube videos, images, info cards, and more. Instead of using raw HTML, which breaks the simplicity of Markdown syntax, you can use shortcodes to achieve the same results. Shortcodes are also easy to update and modify, as Hugo will apply the changes when building your site.

In addition to cleaner Markdown, we can update the shortcode anytime with new changes and Hugo will reflect the same in the time of building.

Custom Shortcodes

There are few shortcodes is readily available in the Hugo like figure, gist, tweet, vimeo, etc for various purposes. Hugo’s built-in shortcodes cover many common, but not all use cases. Luckily, Hugo provides the ability to easily create custom shortcodes to meet your website’s needs.

To create a custom shortcode, place an HTML template in the layouts/shortcodes directory of your source organization.

Below are some of the custom shortcodes I created for my website. Please feel free to check the below and use the same if you like it.

• Card shortcode

Shortcode for displaying card with text and links as shown below.

Read this for more details and code.

• Image shortcode

Image shortcode which will replace existing figure shortcode and render the image with caption and link.

Read this for more details and code.

• Alert box shortcode

Card for displaying information in the blog post.

Read this for more details and code.

I hope I will create and share more custom shortcodes as the new requirements is coming.