barefoot notes

I’ve been running this site for a couple of months now and wanted to implement some form of footnoting.

When I write, I tend to include a lot of text in parentheses (just like this) as they indicate a side thought. An alternative way of rendering that side thought is via a footnote¹

I’d come across a site also created in Hugo by But She’s a Girl which had quite elegant footnotes. I wanted something similar. BSAG pointed me in the direction of Bigfoot but while I was looking into that I came across references to littlefoot and barefoot which are a little more lightweight and/or vanilla.

I opted for barefoot and then spent some time getting to grips with how to install it on my site. The steps for posterity are:

1. download both the barefoot.min.js and barefoot.min.css files from the barefoot github site
2. copy the barefoot.min.js to the static/js folder where the site is created and maintained (Dropbox ownCloud in my case)
3. copy the barefoot.min.css file to static/css where the site is created
4. edit the themes/“theme”/layouts/partials/footer.html file to include the following:

<link rel="stylesheet" href="/css/barefoot.min.css">

<script src="/js/barefoot.min.js"></script>
<script>
  lf = new BareFoot();
  lf.init();
</script>

In my case I directly edited the layout files under the theme. This means my changes could be overwritten if I ever update the theme, but that’s when this post will come in handy.

My understanding is that Hugo utilises blackfriday as its rendering engine. blackfriday by default renders footnotes correctly. What barefoot does is take that and make it neater and more elegant.

After that, to create a footnote all you need do is include it like this in the text - with unique numbering/lettering:

this is the primary text[^2]

And the footnote text is added as follows:

[^2]:this is the footnote text

This will render as:

this is the primary text²

I think barefoot (and bigfoot and littlefoot) are elegant solutions that neaten up a site. It took me some time to get it working on this site, but that’s more a reflection on my limited understanding of hugo and html than the footnoting applications themselves. I’m sure there were quicker and easier ways of getting this running, but I’m here now.