Fix Hugo Preview Build Failures and English 404s on Cloudflare Pages

Fixing a Hugo Version Mismatch and a Broken English Page on Cloudflare Pages Preview Deployments

After I published the English version under /en/ in Publishing an English Version of a Hugo Blog at a Separate /en/ URL , I tried to send non-main branches to Cloudflare Pages Preview and hit two problems in a row. main (production) was succeeding without issue, so at first I had no idea where the cause was. The Preview build fails with permalink ill-formed After deploy, clicking “English” in the menu returns 404 The root of both was that Cloudflare Pages manages environment variables separately for Production and Preview. I worked through them one at a time. [Read More]

Publishing an English Version of a Hugo Blog at a Separate /en/ URL

Publishing an English Version of a Japanese Blog at a Separate URL with Hugo's Multilingual Support

I had come to want my Japanese-language tech blog to be readable from the English-speaking world too. An easy way to do this is to run Google’s translation widget on the page and switch to an English display at the same URL. On another site that had been enough. This time, though, the goal was not “convenience for visitors already here” but discovery and indexing from English queries. I judged that a widget could not satisfy that. [Read More]

Migrating beautifulhugo from Legacy to Current: Dark Mode, Search and TOC

Redoing the theme upgrade in stages after the first attempt was reverted in 34 minutes

When I looked into the beautifulhugo repository, I noticed that the current master (referred to as the current version below), which is separate from the legacy version I have been using, bundles dark mode, search and a table of contents (TOC) all together. I had actually tried once before, in a commit called “Update Beautifulhugo”, to bump only the pin in go.mod, but 34 minutes later I reverted it. The commit log does not record what happened, but at that time I swapped only the pin without thinking about things like the breaking changes from Bootstrap 3 to 5, so the display probably broke and I rolled it back immediately. This time, as a rematch, I decided to redo the migration from the legacy version to the current version in separate stages. [Read More]

Qiita-Style Heading Anchors and note.com Line Spacing in a Hugo Blog

Redesigning Heading Anchor Links Qiita-Style and Tuning Paragraph Spacing to Match note.com in Hugo

The anchor link with an anchor icon (fa-anchor) that was permanently displayed at the end of the headings (h2 and so on) on this blog had started to feel a bit uncool to me. Referring to the heading design of Qiita (in Japanese), I decided to rethink how it is displayed, including the effect on SEO. While I was at it, I also adjusted the line height and margins of the body text to match the article style of note (in Japanese). This is a record of the work, in which I left almost all of the code changes to generative AI instead of doing them by hand, and checked the local appearance with Playwright MCP as I went. [Read More]

Generating llms.txt and llms-full.txt in Hugo with Output Formats

Adding llms.txt and llms-full.txt to a Hugo blog on Cloudflare Pages

I added llms.txt , a specification that lets LLMs retrieve the information on a website efficiently, to this Hugo blog. Environment Hugo v0.155.2 Theme: Beautifulhugo Cloudflare Pages What llms.txt is A Markdown-format text file placed at the root of a website, proposed at llmstxt.org . Like robots.txt or sitemap.xml, it provides an overview of the site and its main links in a form that is easy for an LLM to read. There are two main kinds of file: [Read More]

Making Hugo Post List Summaries Plain Text with plainify

Removing HTML tags from article summaries in Hugo using plainify

The summary display in the article list on the top page was being shown with the HTML notation still left in it, which felt wrong, so I fixed it ↓

Stripping the HTML also looks better for SEO, so I made the following change

layouts/partials/post_preview.html

<article class="post-preview">
    <a href="{{ .Permalink }}">
        <h2 class="post-title">{{ .Title }}</h2>
        {{ if .Params.subtitle }}
        <h3 class="post-subtitle">
            {{ .Params.subtitle }}
        </h3>
        {{ end }}
        {{ if .Params.image }}
        <img src="{{ .Params.image }}" alt="{{ .Title }}" class="img-title" />
        {{ end }}
        {{ if .Params.video }}
        <video loop autoplay muted playsinline class="img-title">
            <source src="{{ .Params.video }}">
        </video>
        {{ end }}
    </a>

    <p class="post-meta">
        {{ partial "post_meta.html" . }}
    </p>
    <div class="post-entry">
        {{ if or (.Truncated) (.Params.summary) }}
        {{ .Summary | plainify }}
        <a href="{{ .Permalink }}" class="post-read-more">[{{ i18n "readMore" }}]</a>
        {{ else }}
        {{ .Content }}
        {{ end }}
    </div>

    {{ if .Params.tags }}
    <div class="blog-tags">
        {{ range .Params.tags }}
       <a href="{{"tags" | absLangURL}}/{{ . | urlize }}/">{{ . }}</a>&nbsp;
        {{ end }} 
    </div>
    {{ end }}

</article>

Why Hugo Shows the Wrong Last Modified Date on Cloudflare Pages

Fixing GitInfo issues on Cloudflare Pages

On a blog site built with Hugo, I was stuck for a while on a problem where the “Last modified” date of each post was not displayed correctly. Every post ended up with the same date, and the actual update date of each post was not reflected. In this article I explain the cause of the problem and how to solve it. My environment uses Github and Cloudflare Pages. Symptoms The “Last modified” date shown in the post metadata was the same date on every post. For example, it was displayed like this: [Read More]

Updating Hugo and My Beautifulhugo Theme After a Year Away

Theme update and site improvements

Somehow this is my first post in a long time, and before I knew it more than a year had passed without an update. (^_^;) Lately I have been doing vibe coding with generative AI, so I had no time to write articles. As for the Hugo behind this blog, if I do not keep it updated then changes in its features start causing problems, so I updated it. While I was updating Hugo, I also changed the look of the Beautifulhugo theme. For the changes as well, making use of generative AI these days keeps the coding moving along easily. [Read More]

Migrating the Beautifulhugo Theme from a Git Submodule to Hugo Modules

Learn how to transition your Beautifulhugo theme from submodules to Hugo Modules.

Up to now I had been using Hugo’s Beautifulhugo theme on this site as a submodule, but I switched it over to the hugo modules format. Environment I work by cloning my own repository from Github. First, a look at the local environment Copy ❯ go version go version go1.22.6 darwin/arm64 ❯ hugo version hugo v0.131.0+extended darwin/arm64 BuildDate=2024-08-02T09:03:48Z VendorInfo=brew The theme is beautifulhugo, installed as a submodule Initialising hugo modules Copy $ hugo mod init github.com/user/scribble go: creating new go.mod: module github.com/user/scribble go: to add module requirements and sums: Fetching the beautifulhugo theme [Read More]

Getting an author Warning When Hugo Builds the Site

The author key in site configuration is deprecated. Use params.author.name instead

The following error started appearing when building with hugo

Start building sites …
hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended darwin/amd64 BuildDate=2024-01-26T15:54:24Z VendorInfo=brew

WARN  The author key in site configuration is deprecated. Use params.author.name instead.

Apparently the warning started being emitted from version 0.120

Fixing config.toml

  • Before
[params]
  author = "Hugo"
  • After
[params]
  author.name = "Hugo"

If there is no author inside [params], add it