Blog tuning in Hugo

I’ve been trying to get the blogs set up in a reasonable way. The most reasonable way would be to have separate domains for each: doctroid.xyz, analogoutput.xyz, and so on, or at least separate subdomains: doctroid.richholmes.xyz, analogoutput.richholmes.xyz, and so on. But I know the former and I think the latter would cost more than I want to pay with the hosting service I want to use, so I’m just putting them at richholmes.xyz/doctroid, richholmes.xyz/analogoutput, and so on.

I’m using Hugo to generate the website, with the Gokarna theme, and that combination is designed with a single blog in mind, not four. Following are notes on how I’ve set it up for multiple blogs… subject to change!

Instead of one blog directory called posts I have four: analogoutput, doctroid, mathematrec, and walkinginspace.

If you set that up as in the Gokarna example site, with each directory containing just blog posts as Markdown files, it kind of works, but when you look at the blog page, the H1 header is evidently a guess as to the capitalized plural form of the name of the directory:

“Analogoutputs”, “Doctroids”, “Mathematrecs”, and “Walkinginspaces”. (Other directory names get it very confused: ess leads to a header that says “EssESSes”…)

To get control of the H1 header there has to be an _index.md file in the directory, with a type of post:

---
title: "Doctroidal Dissertations"
date: 2023-07-09T08:47:09-04:00
type: post
draft: false
---

Then the title gets used for the H1. The content below the YAML header is ignored.

When you have a site with a single blog, you probably have an About page or some explanation on the front page that adequately explains the blog. But with multiple blogs, I wanted to have an explanation at the top of each blog’s page.

To do that, I copied themes/gokarna/layouts/partials/list.html to layouts/partials/list.html, and I added “{{ .Content }}” after the H1 header:

<div class="container list-posts">

    <h1 class="list-title">{{ .Name }}</h1>
    {{ .Content }}

    {{ range (where .Pages "Params.type" "post" ).GroupByDate "2006" }}

    <h2 class="posts-year">{{ .Key }}</h2>

    {{- range .Pages -}}
        {{- partial "list-posts.html" . -}}
    {{ end }}
    {{ end }}

</div>

Now the content in _index.ml below the YAML header is included in the blog page:

This was almost what I wanted. But notice the https link: It’s undecorated. That’s because of the CSS for the div class list-posts; it’s appropriate for the list of blog post links, but for links embedded in text it’s better to have them underlined.

So I fixed that as follows:

I made a new file static/css/list-content.css:

/* LIST CONTENT */
.list-content a {
  text-decoration: underline;
}

I put <link rel="stylesheet" type="text/css" href="/css/list-content.css"> in the customHeadHTML in the config file.

Then I changed /layouts/partials/list.html to:

<div class="container list-content">

    <h1 class="list-title">{{ .Name }}</h1>
    {{ .Content }}
</div>
<div class="container list-posts">

    {{ range (where .Pages "Params.type" "post" ).GroupByDate "2006" }}

    <h2 class="posts-year">{{ .Key }}</h2>

    {{- range .Pages -}}
        {{- partial "list-posts.html" . -}}
    {{ end }}
    {{ end }}

</div>

That gives me underlined links in the description but not in the posts list.

---

<– 2023-07-08_i_i_i_i_i — 2023-10-15_bathroom-scope-creep –>