TITLE: New website
DATE: 2021-10-20
AUTHOR: John L. Godlee
====================================================================


I have finally redesigned my website. Previously I was running the
website using Jekyll, and uploading to Github. I was using a
slightly modified version of the minima theme, but it was still
just a list of blog posts, very bare bones. As I'm starting the
next chapter of my career in a couple of weeks, as a post-doc
researcher at the University of Edinburgh, I thought it was time
for a refresh of my website.

 [Jekyll]: https://jekyllrb.com/
 [minima theme]: https://github.com/jekyll/minima

I've decided to build the website using Hugo, which is faster to
compile than Jekyll and doesn't appear to suffer from the same
crazy Ruby dependency issues that Jekyll suffers from on my
machine. So far, I've found it fairly simple to migrate the website
across to Hugo, and I've found that Hugo offers a great deal more
control and possibilities for automation than Jekyll.

 [Hugo]: https://gohugo.io/

The website now has a personal blurb at the top of the homepage,
along with some links to other pages and profiles around the web,
including Gopher and Gemini, and a list of the ten most recent blog
posts I've written. My CV is as before, but I've added a new
section called "Works" which lists articles I've authored or
contributed to, as well as some presentations and R packages I've
written. My recipes are now held in the same Git repo as the
website, and I figured out a neat way to automatically index the
recipes based on their category (dessert, drinks, etc.) using
Hugo's list pages. I'll explain more comprehensively how this
works, because I think it might be useful for other people.

The directory structure for my [recipes]({{< ref "/recipes" >}}) is
as follows:

   content
   └─ recipes
      ├─ _index.md
      ├─ bread
      │  ├─ _index.md
      │  ├─ beer_rolls.md
      │  ├─ ciabatta.md
      │  └─ potato_bread.md
      ├─ dessert
      │  ├─ _index.md
      │  ├─ chocolate_brownies.md
      │  ├─ elderberry_pie.md
      │  └─ victoria_sponge_cake.md
      └─ mains
         ├─ _index.md
         ├─ bean_chilli.md
         ├─ braised_leeks.md
         └─ yorkshire_pudding.md

I have a layouts/recipes/list.html that looks like this:

   {{ if (eq .Title "Recipes") }}
     <ul class="postlist">
       {{ range .Sections.ByTitle }}
         <li>
           <a href="{{ .RelPermalink }}">{{ .Title }}</a>
           {{ partial "recursive.html" . }}
         </li>
       {{ end }}
     </ul>
   {{ else }}
     <ul class="postlist">
       {{ range .RegularPages }}
       <li>
         <a href="{{ .RelPermalink }}">{{ .Title | markdownify
}}</a>
       </li>
       {{ end }}
     </ul>
   {{ end }}

and layouts/partials/recursive.html looks like this:

   {{ $child_pages := union .Sections .Pages }}
   <ul>
     {{ range $child_pages.ByTitle }}
     <li>
       <a href="{{ .RelPermalink }}"> {{ .Title }} </a>
       {{ if or (.Sections) (.Pages) }}
       {{ partial "recursive.html" . }}
       {{ end }}
     </li>
     {{ end }}
   </ul>

Each sub-category of recipes has a "title" in the YAML frontmatter
of its own _index.md, like this:

   ---
   title: "Drinks"
   ---

This title is used to populate the first level of the list in the
recipes index, using this snippet from layouts/recipes/list.html:

       {{ range .Sections.ByTitle }}
         <li>
           <a href="{{ .RelPermalink }}">{{ .Title }}</a>
           {{ partial "recursive.html" . }}
         </li>
       {{ end }}

I got some inspiration on how to deal with this problem from this
other Hugo website.

 [this other Hugo website]:
https://github.com/gbmhunter/blog/blob/master/layouts/partials/menu_
recursive.html

Another thing that gave me some trouble was serving images. On my
old website I used low-resolution dithered images in blog posts,
and each image could be clicked to open a full resolution version
of the image. In markdown, using Jekyll, I did this by nesting the
low resolution image inside a link to the full resolution image:

   [![alt text]({{ site.baseurl }}/img/test/test.png)]({{
site.baseurl }}/img_full/test/test.jpg)

But when I ported this over to Hugo, it was garbling the file path
for the full resolution image, replacing > with &gt and so on. I
found that Hugo shortcodes offered a much better way of
constructing these image calls. I used the default Hugo figure
shortcode as a base to create my own img shortcode:

   <figure>
     {{- if .Get "link" -}}
       <a href="{{ .Get "link" }}">
     {{- end -}}
         <img
           {{- if or (.Get "alt") (.Get "caption") }}
             alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get
"caption" | markdownify| plainify }}{{ end }}"
             title="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get
"caption" | markdownify| plainify }}{{ end }}"
           {{- end -}}
           src="{{ .Get "src" }}"
         />
     {{- if .Get "link" -}}
       </a>
     {{- end -}}
   </figure>

Then I can call this shortcode in a markdown file like this:

   {{</* img link="/img_full/test/test.jpg"
src="/img/test/test.png" alt="alt text" */>}}

Finally, I should also mention that the RSS feed URL has changed
slightly, the new RSS feed is:

https://johngodlee.xyz/index.xml