Migrated to Hugo

I’ve decided to decouple my portfolio from my blog, mainly to avoid maintaining a Jekyll template that works with both my portfolio content and my blog posts. It felt like this was a good time to try out Hugo. Confusing but refreshing.

I’ve decided to use page bundles and worked out a shortcode based on Hugo’s embedded figure shortcode. glob is either the file name of the image, or a glob.

// /layouts/shortcodes/pbfig.html
{{ $img := $.Page.Resources.GetMatch (.Get "glob")}}
<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
    {{ if .Get "link"}}<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>{{ end }}
        <img src="{{ $img.RelPermalink }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }}{{ with .Get "height" }}height="{{.}}" {{ end }}/>
    {{ if .Get "link"}}</a>{{ end }}
    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
    <figcaption>{{ if isset .Params "title" }}
        <h4>{{ .Get "title" }}</h4>{{ end }}
        {{ if or (.Get "caption") (.Get "attr")}}<p>
        {{ .Get "caption" }}
        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
            {{ .Get "attr" }}
        {{ if .Get "attrlink"}}</a> {{ end }}
        </p> {{ end }}
    </figcaption>
    {{ end }}
</figure>

And to use it in your markdown.

{{< pbfig glob="" alt="" >}}

The post Hugo Page Resources and how to use them is a great resource to understand Page Bundles.

Update 2019-05-01: I’ve put the sites back together, and replace my own shortcode with Kaushal Modi’s.