Tag: Hugo
Shader Canvas Hugo Shortcode
A Hugo shortcode to render GLSL in real time on your site
Do you want to add a canvas with a shader running in real time to your Hugo site? In this post I show how to create a Hugo shortcode to display a shader.
Hugo Picture Shortcode With Multiple Sources
A Hugo shortcode using the HTML picture element to enable different formats for the same image
A while ago I published this post about a better figure shortcode for Hugo that enabled lazy loading. Today, I bring you yet another update on the same shortcode. This time around, the focus is on leveraging the HTML picture element, which enables alternative versions of the same image in different formats, leaving the browser to decide which one to use. You can serve the same image in, for instance, JPEG-XL and plain old JPEG at the same time. The browser will read the tag, and select the appropriate image depending on its capabilities. If you use a JPEG-XL-capable browser (Thorium, Pale Moon, Basilisk, Waterfox, LibreWolf, Firefox Nightly), you will be served the smaller JPEG-XL version, otherwise you will get the plain JPEG version.
HTML Lazy Image Loading
Adding lazy image loading to Hugo's figure shortcode
The HTML <img /> tag has this handy attribute loading="lazy" that enables lazy image loading, so that images are only loaded whenever the user scrolls all the way down to their position. This makes page loading super-fast, and reduces the amount of wasted bandwidth, especially when browsing from page to page. In the past this was achieved by a few lines of custom JavaScript code, but it is supported by all major browsers, both for PC and mobile. It should always be used unless there’s a very good reason not to, to the point where it can probably be argued that it should be the default behavior of images.
Moving to Hugo
Bye bye paid web hosting + Drupal, hello GitLab + Hugo
Hugo SSG
The idea of ditching both my web hosting provider and Drupal has been at the back of my mind for a few months.
Bear with me. Since about 2011 I have been maintaining this website using the cheapest hosting tier my hosting offers – At least it was the cheapest at the time I got it. They call it The Essential and it costs over 300 bucks for 2 years. It is not a lot, but it is definitely too much for my purposes of hosting a small blog where I provide occasional updates on my projects, my portfolio and my CV.
Also, loading times are horribly long and the complexity of managing the Drupal installation (upgrades/updates) and also the database takes way too much of my time. Only the thought of updating to Drupal 8 sends shivers down my spine and ultimately got me searching for better options.