I converted my site from RapidWeaver to Hugo and adopted the Academic theme. With a few tweaks, it delivered a nice site that is quite easy to maintain, including a list of publications with bibtex as a backend for the format.
Getting bibtex as a source
This is not as difficult as it may seem. The trick was to avoid server-side PHP and adopt, instead, a javascript implementation that renders the .bib file. This ca be found in the form of bibtex-js.js a nice library hosted on github.
Naturally, Hugo needs you to use its templating mechanism, and partials in particular to blend the necessary HTML
into a markdown page. That is not too hard. The first step is to create a normal page (e.g., allpubs.md
) with Hugo and insert a
custom_css and custom_js attributes into the meta-data of the page as follows:
+++
title = "All Publications"
date = 2017-07-23T14:10:07-04:00
draft = false
tags = ["pubs"]
# Does the project detail page use math formatting?
math = false
custom_css = ["css/pubjs.css"]
custom_js = ["js/bibtex_js.js"]
[header]
image = "headers/publish.jpg"
caption = "It needs a real caption 😄"
+++
Once that is done, deploy the CSS and the js into the static tree as follows:
static
├── css
│  └── pubjs.css
└── js
└── bibtex_js.js
Using Partials
The full content of the layout is:
layouts/
├── partials
│  ├── head_custom.html
│  ├── publist.html
└── shortcodes
└── importPartial.html
Each file is reviewed next.
The body of the allpubs.md
is quite simple, it uses a partial to bring in the custom HTML and headers that invoke the
javascript to build the full document. Here is what it looks like:
{{ < importPartial "publist.html" >}}
Yes, it is a one liner.
Note that there is no space between the two opening curly braces and the angle bracket. I was forced to add one to prevent it being expand by Hugo :smile:
The shortcode importPartial.html
itself is simple:
{{ partial (.Get 0) .Page }}
The publist.html
file is a partial that you must create in the layout/partials
folder. It is a bit longer though but
is completely generic.
head_custom.html
looks up the attribute defined in the page (e.g., custom_css) and pulls the necessary css and javascript.
It is a tiny template:
{{ range $.Param "custom_css" }}
<link rel="stylesheet" href="{{ $.Site.BaseURL }}{{ . }}">
{{ end }}
{{ range $.Param "custom_js" }}
<script src="{{ $.Site.BaseURL }}{{ . }}" type="text/javascript" charset="utf-8">
</script>
{{ end }}
With this, you create a decent looking page with all the publications without having to manually convert the .bib into Hugo. It all gets done automatically.
Files to grab
- CSS: pubjs.css
- JS: bibtex_js.js
- HTML Partial: publist.html