💾 Archived View for republic.circumlunar.space › users › johngodlee › posts › 2021-10-20-new_website… captured on 2024-08-31 at 12:59:40. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

New website

DATE: 2021-10-20

AUTHOR: John L. Godlee

I have finally redesigned my website. Previously I was running the website using Jekyll[1], and uploading to Github. I was using a slightly modified version of the minima theme[2], 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.

1: https://jekyllrb.com/

2: https://github.com/jekyll/minima

I've decided to build the website using Hugo[3], 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.

3: 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[4].

4: 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