Hugo and the Academic Theme

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., 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"]

   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:

 ├── css
 │   └── pubjs.css
 └── js
     └── bibtex_js.js

Using Partials

The full content of the layout is:

 ├── partials
 │   ├── head_custom.html
 │   ├── publist.html
 └── shortcodes
     └── importPartial.html

Each file is reviewed next.

The body of the 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">
   {{ 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