Hugo Shortcodes screenshot

Hugo Shortcodes

Author Avatar Theme by Isqua
Updated: 19 Mar 2025
21 Stars

Easy-to-use set of snippets for Hugo websites. From Gumroad button to Codepen iframe.

Overview

This article provides an introduction to Hugo Shortcodes, explaining what shortcodes are and how to use them in a Hugo website. It also provides instructions on how to install all shortcodes as a theme or install only a few specific shortcodes. The article is aimed at Hugo users who want to enhance their website with additional functionality using shortcodes.

Features

  • Built-in and custom templates: Shortcodes can call either built-in or custom templates, providing flexibility in delivering content.
  • Content delivery efficiency: Shortcodes can help deliver content faster by simplifying the inclusion of complex functionality.
  • Theme installation: Shortcodes can be installed all at once as a theme, allowing for easy integration with existing Hugo websites.
  • Selective installation: Alternatively, users can install only the specific shortcodes they need, streamlining the installation process.

Installation

Install all shortcodes as a theme

  1. Add the Hugo Shortcodes theme as a git submodule:
git submodule add https://github.com/username/hugo-shortcodes themes/hugo-shortcodes
  1. Open your config.toml file.

  2. Locate the line that includes the current theme name, such as:

theme = "ananke"
  1. Surround the theme name with square brackets and append 'hugo-shortcodes' with a comma at the end:
theme = ["ananke", "hugo-shortcodes"]
  1. Restart your Hugo server to ensure proper integration.

  2. You can now use all the shortcodes on any content page of your site.

Install only a few shortcodes

  1. Find the specific shortcode you need.

  2. Scroll down the shortcode page.

  3. Click on the “Install only current shortcode” button.

  4. Follow the provided instructions.

  5. Restart your Hugo server to avoid unexpected behavior.

  6. You can now use the shortcode on any content page of your site.

Summary

Hugo Shortcodes is a collection of simple snippets that can be integrated into Hugo websites to enhance content delivery and add additional functionality. Users have the option to install all shortcodes as a theme or selectively install only the desired shortcodes. The installation process is straightforward and the usage of shortcodes can help improve the efficiency of content delivery. For any further inquiries, users are encouraged to open an issue or contact the author directly.