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

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
│   ├── 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.