Beautifulhugo

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]

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]

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]

On this site there is only one administrator, so going to the trouble of showing the author (Author name) has no meaning. Setting the Author field to display:none; with CSS might remove only the display, but since it is unnecessary I thought I might as well delete it outright. Looking into the files right away, I found it written in theme/beautifulhugo/layouts/partials/post_meta.html. Copy {{ if not .Site.Params.hideAuthor }} {{ if .Params.author }} &nbsp;|&nbsp;<i class="fas fa-user"></i>&nbsp;{{ .Params.author | safeHTML }} {{ else }} &nbsp;|&nbsp;<i class="fas fa-user"></i>&nbsp;{{ .Site.Author.name | safeHTML }} {{ end }} {{ end }} Usually I would delete the relevant part and bring it over to root/layouts/partials/post_meta.html, but looking closely, the condition is the truth value of hideAuthor. [Read More]

Beautifulhugo is the Hugo theme I still use today, and a symptom where the last modified date was not displayed showed up, so I dealt with it Incidentally, the hugo version is 0.80.0 Symptoms When I start the server locally, the last modified date is not displayed and the error below appears Copy $ hugo server -D .... Failed to get translated string for language "ja" and ID "lastModified": template: :1:22: executing "" at <.Count>: can't evaluate field Count in type string Since I deploy with Netlify, raising the hugo version in netlify.toml produces the same symptom Copy ... [context.production.environment] HUGO_VERSION = "0.80.0" HUGO_ENV = "production" HUGO_ENABLEGITINFO = "true" Cause Looking at the error message, the <.Count> notation seems to be the problem, and it is used in en.yaml, ja.yaml and the like inside beautifulhugo/i18n/. [Read More]

The beautifulhugo theme this site uses was pinned to a particular branch and was not being updated to the latest version, so these are my notes on switching it to master There had been updates on the official site and yet the theme inside the submodule was not updating; I wondered why, and it turned out to be because it was on a specific branch. (I thought I had set it to master when I first installed it…?) [Read More]

With the Hugo version upgrade it looks like some variable formats will stop working from now on, so I made the theme handle them. In Beautifulhugo they are not handled in versions from before May, so this may end up being only a temporary fix. Environment Hugo 0.57 Beautifulhugo :handled from 2019-05-08 onwards (the information below is from before 2019−05-08) Edited files layouts/_default/list.html layouts/index.html layouts/partials/footer.html layouts/partials/head.html Changes Before After {{ .Hugo.Generator }} {{ hugo.Generator }} {{ .RSSLink }} {{ with .OutputFormats.Get “RSS” }}{{ . RelPermalink }}{{ end }} {{ .Hugo.Version }} {{ .Site.Hugo.Version }} {{ .URL }} {{ .Permalink }}, {{ .RelPermalink }} .Data.Pages .Site.RegularPages Edited sections layouts/_default/list.html Copy @@ -47,12 +47,12 @@ <ul class="pager main-pager"> {{ if .Paginator.HasPrev }} <li class="previous"> - <a href="{{ .URL }}page/{{ .Paginator.Prev.PageNumber }}/">&larr; {{ i18n "newerPosts" }}</a> + <a href="{{ .Permalink }}page/{{ .Paginator.Prev.PageNumber }}/">&larr; {{ i18n "newerPosts" }}</a> </li> {{ end }} {{ if .Paginator.HasNext }} <li class="next"> - <a href="{{ .URL }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} &rarr;</a> + <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} &rarr;</a> </li> {{ end }} </ul> layouts/index.html Copy @@ -9,7 +9,7 @@ {{ end }} <div class="posts-list"> - {{ $pag := .Paginate (where .Data.Pages "Type" "post") }} + {{ $pag := .Paginate (where .Site.RegularPages "Type" "post") }} {{ range $pag.Pages }} <article class="post-preview"> <a href="{{ .Permalink }}"> @@ -49,12 +49,12 @@ <ul class="pager main-pager"> {{ if .Paginator.HasPrev }} <li class="previous"> - <a href="{{ .URL }}page/{{ .Paginator.Prev.PageNumber }}/">&larr; {{ i18n "newerPosts" }}</a> + <a href="{{ .Permalink }}page/{{ .Paginator.Prev.PageNumber }}/">&larr; {{ i18n "newerPosts" }}</a> </li> {{ end }} {{ if .Paginator.HasNext }} <li class="next"> - <a href="{{ .URL }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} &rarr;</a> + <a href="{{ .Permalink }}page/{{ .Paginator.Next.PageNumber }}/">{{ i18n "olderPosts" }} &rarr;</a> </li> {{ end }} </ul> layouts/partials/footer.html Copy @@ -17,10 +17,8 @@ {{ end }} {{ if .Site.Params.rss }} <li> - {{ if .RSSLink }} - <a href="{{ .RSSLink }}" title="RSS"> - {{ else }} - <a href="{{ .Site.RSSLink }}" title="RSS"> + {{ with .OutputFormats.Get "RSS" }} + <a href='{{ .RelPermalink }}' title='RSS'> {{ end }} layouts/partials/head.html Copy @@ -61,7 +61,7 @@ <meta property="og:type" content="website" /> <meta property="og:site_name" content="{{ .Site.Title }}" /> <!-- Hugo Version number --> - {{ .Hugo.Generator -}} + {{ hugo.Generator -}} References: [Read More]

In Beautifulhugo, the Hugo theme, mermaid.js, the library for drawing sequence diagrams, is already built in, so simply specifying the short tag and writing in the mermaid format is enough to display a sequence diagram. If it is not built into your theme, it is a good idea to refer to the article Hugoにmermaidを組み込んでみた (in Japanese). A simple sample graph LR A[Local] -->|git push| B(GitLab.com) B --> C{Netlify} Gantt chart Quoted from the official site gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d [Read More]

I tried building a site using Hugo, GitLab and Netlify Building the site Prerequisites A GitLab account is already registered A Netlify account is already registered hugo is already installed locally Steps Create a repository on GitLab git clone it locally Create a new site with hugo Copy the directories and files created in 3. into the directory from 2. Create .gitignore Copy .DS_Store public Install the theme Copy $ git submodule add https://github.com/halogenica/beautifulhugo.git beautifulhugo The theme has been decided in advance, so copy it under the root [Read More]