Adventures with Hugo and the Academic template

Introduction

I am trying to build a web page with Hugo and the Academic theme. All I’m doing here is documenting various technical problems that occurred in the hope that this helps somebody.

Install Hugo

On Macos if you have homebrew installed then you can simply do

brew install hugo

What I did not realise is that there are two versions of hugo. You need to install hugo extended for the academic theme to work. Homebrew by default installs hugo extended. While on Ubuntu you have various choices. The snap package is more up to date, but is not the extended version of hugo. I installed the slightly older version using apt-get

sudo apt  install hugo

Clone the repo.

I am a command line person. So I followed the instructions from the documentation. Basically because I do not really understand sub modules when you clone your forked repository you should use

git clone --recursive git@blah/homepage.git

This will force the academic theme to be cloned into your themes/academic/ directory.

Modifying the about widget

The demo website and the academic theme is geared towards creating an online CV, at least that is what it seems to me. The homepage can be populated with widgets. The about widget grabs data from content/authors/admin/_index.md and displays it on the homepage. Personally I do not think that people care where I went to university or where I got my degree from. Instead I wanted a simple homepage about widget with a list of research interests and a list of courses that I teach. In the end I had to create a new widget. You’ll need to do something like

mkdir -p layouts/partials/widgets/
cp /themes/academic/layouts/partials/widgets/about.html layouts/partials/widgets/newabout.html

In contents/home you can modify about.md to use your new widget. Change the line

widget = "about"

to

widget = "newabout"

In newabout.html you can add a section that will pick you your research interests

 {{ with $person.teaching }}
      <div class="col-md-5">
        <h3>Teaching</h3>
        <ul class="ul-teaching">
          {{ range . }}
          <li>{{ . | markdownify | emojify }}</li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

Put this after the section

     {{ with $person.interests }}
      <div class="col-md-5">
        <h3>Research Interests</h3>
        <ul class="ul-interests">
          {{ range . }}
          <li>{{ . | markdownify | emojify }}</li>
          {{ end }}
        </ul>
      </div>
      {{ end }}

In the _index.html file in content/authors/admin you can then add a block

teaching:
 - Machine Learning
 - Software Testing
 - Algorithms and Data structures II