Travis Beckham UX and system design

This past year I've been spending a lot of time building Hugo sites. One of my favorites is the docs site for Buoyant. While there's limited visual design, it's been very rewarding building out the front-end architecture, coding Go templates, and working with Customer Support to structure the content in a way that's intuitive and helpful for our customers. My favorite part has been iterating on internal processes so it's easier for our developers to maintain documentation. The primary Hugo feature they interact with are shortcodes, which provide a way to include elements and functionality in Markdown that are not natively supported.

Recently I've created a collection of Hugo shortcodes on Github that illustrate various techinques that help when building out a shortcode library. It's not meant to be an exhaustive list of shortcodes you might need in your Markdown content, rather just a starting point.

These techinques include: validating parameters (button), using a partial within the shortcode so both layout and content can use the component (icon), using conditional content (ifparma), and passing parameters from a child shortcode to the parent for rendering (tabpane). Go check them out!

If you're just learning Hugo like me, you may want to start with Go's template documentation. The conditional sytax tripped me up for a minute. If you're accustomed to writing conditionals like this:

if ($x == $y)
if ($x && $y)
if ($x == $y || $x == $z)

This is how it would look in a Go template:

{{ if eq $x $y }}
{{ if and $x $y }}
{{ if or (eq $x $y) (eq $x $z) }}

In a Go template, eq is a function that you pass arguments to, not a comparison operator like you would use in JavaScript.

Welp, this site has just been switched over to Hugo! There's still some template cleanup I want to do, but overall it was fairly simple to migrate from Jekyll.

I gave Hugo a test run today, and I'm loving it so far. It seems very powerful, and so easy to setup. I may be switching from Jekyll soon.