Hugo Tools, Tips and Tricks
This website is managed with Hugo, a site generator that is fed with templates and Markdown files. All files together generate static HTML, which I can publish by
rsyncing a directory my VPS). Easy, effective and best of all: there is nothing to hack or to continually update.
As a note to myself, and perhaps for others, here are some tools tips and tricks for Hugo. I am putting these on the web so at least I myself don’t have to reinvent the wheel :)
Hugo does not have many options to manipulate pictures, and particularly not for my workflow. In general, I take pictures with my phones, edit them sometimes with the GIMP and then use them here. With the page bundle concept, it’s quite easy to put in pictures, and have a gallery. In most cases, I keep the originals in the gallery directory. Images outside in pages are downsized to 1024x768. A good balance between image size (and therefore quick loading times) and quality.
However, not all pictures need the full resolution in order to be useful. Therefore I use these two commands from the
imagemagick package to combine several picutres into a collage.
Combine two pictures into one (don’t resize):
montage picture1.jpg picture2.jpg -geometry '1x1+0+0<' pictures1and2.jpg
Combine four pictures into one in a 2x2 grid, with a border in between - and don’t resize:
montage picture1.jpg picture2.jpg picture3.jpg picture4.jpg -border 5 -geometry '2x2+0+0<' pictures1234.jpg
Obviously, a border can also be added to the first example with the
-border 5 directive (use a different figure for a different size).
imagemagick pacakge can easily be installed on all modern operating systems, and can be download from its website if it’s or not provided in your distribution (which I’d find hard to believe ;) ).
Hugo uses Markdown files to generate pages from. These can be written with any editor, and so I started out with my old favorite
JOE as an editor, but now often write in
Geany. It works very nicely, particuarly with the Spell Check plug-in.