November 11, 2022

A CMS with Hugo shortcode support

Recently CloudCannon introduced Hugo shortcodes. Shortcodes were already supported, but CloudCannon made them even more accessible to content editors by adding some buttons in the editor.

Buttons for shortcodes is a good idea, because it guides editors on how to write these shortcodes. However, I was less enthousiastic about the implementation CloudCannon chose. They clearly copied the shortcode implementation from Gutenberg (Wordpress), which makes it feel clunky. They also require you to configure your shortcodes in a ‘CloudCannon.config.yml’ file, which Gutenberg does not.

As you may or may not know, I have built my own CMS for Hugo. I do not resell it, so I built it purely for myself and my customers. This CMS follows the ‘zero config’ principle, because I like convenience. This means that you just point the CMS to your repository and it works immediately, like magic. There are no configuration files and there is nothing to set up.

I really liked the idea of adding shortcodes, but I wanted a better implementation. First, I thought of a smart way to set up which shortcodes you can see in the editor. I chose for comments in the head of my shortcodes. A shortcode that starts with a commented code example gets included, while a shortcode without a code example remains hidden. Easy, portable and zero config. Secondly, I had to determine what happens when somebody clicks on the shortcode button in the CMS. I chose to simply insert the (commented) code example in the content. This is some code, that looks like this: {{<vimeo id="" >}}. Although it may look a bit weird, it is actually simple, quick and a little geeky… and that’s exactly how we like it.

Improved shortcodes

Hugo delivers a few standard shortcodes: Instagram, Twitter, Vimeo and Youtube. However, they are all not very good. Instagram requires you to setup an API key and they all load third party content without consent. This last thing can be fixed easily, as I have explained in my post Embedding Youtube correctly. An additional advantage is that these improved shortcodes load much faster. All my Hugo projects contain these improved shortcodes (as I do not want to risk any privacy penalties). All I had to do is add a commented usage example in the head of these files. Now I can just copy them from project to project and the CMS will pick them up automatically. Isn’t that the best DX possible?

()  Joost van der Schee