Building a new website

By Maurits van der Veen in website design hugo markdown

December 15, 2021

First steps

I have long been a fan of static websites, which are portable, compact, and do not require a lot of server overhead. Since it was time to update my woefully inadequate website, I did some research into different static website options.

Hugo is a powerful and widely-used framework for building static websites and offers a number of attractive themes.

Blogdown makes it easy to edit a website’s files within RStudio.

I settled on Hugo Apéro an excellent theme developed by Alison Hill, a data scientist working at RStudio.

Initial build

The initial build was straight-forward, following the instructions at the Hugo Apéro site.


Configuration

The Apéro theme is endlessly customizeable. My first change was to change the default font to Baskerville, and to reduce the size of the standard header text, so that my name would not spill onto a second line on the landing page for normal screen widths. This change was made in the file index.html inside hugo-apero/layouts. Specifically, this header tag: <h1 class="f2 f1-m f-subheadline-l fw5-ns mv4 lh-solid"> was changed by replacing the last letter in f-subheadline-l to m: f-subheadline-m.

Additional changes will be described in further posts in this series.