This page looks best with JavaScript enabled

Embedding Shadertoy in Hugo Websites - Custom Hugo Shortcodes

 ·   ·  ☕ 2 min read

Hugo Shortcodes are a way to use short snippets in your Hugo site that embed custom parameterized objects. Some built-in shortcodes can embed GitHub Gist code snippets, YouTube videos or Twitter posts. If Hugo does not provide a built-in shortcode for you however you’ll need to create your own shortcode. Luckily, this is relatively straightforward.

Creating a custom shortcode begins by creating an html file in the layouts/shortcodes directory. The file should be named after the shortcode you’d like to create. For example example.html will create the example shortcode. Once you’ve created the file you can fill it with a combination of hugo’s markup language and standard html. The markup language hugo provides allows you to access parameters or otherwise modify the behavior of the shortcode you’re creating. In our case we’d like to embed a Shadertoy shader. Every shader on Shadertoy has a unique embed link based upon its ID so we can create a shortcode that accepts a shader id and plop the value into an iframe. Embed… done.

The source for the custom shader shortcode I use is in this gist:

Hugo is a really easy to use static website generation tool ( that can turn your Markdown files into websites. Some documentation on custom Hugo shortcodes:

Join the World of Zero Discord Server:

Sam Wronski
Sam Wronski
Maker of things and professional software engineer. Lets make something awesome together!