Hugo

I suspect the symptom had been happening for a while, but I noticed that the hamburger menu displayed in responsive mode on the Hugo theme “Tranquilpeak” was not working, and I ended up spending almost a whole day tracking down and understanding the cause. The symptom With this phenomenon, there was no problem as long as BaseURL was the top directory; it occurred when a subpath (subdirectory) was configured. Specifically, [Read More]

Migrating a site built with Hugo to GA4 In my environment I use the Beautifulhugo and Mainroad themes, so the customization here is limited to those Also, this assumes the GA4 code for Google Analytics has already been obtained, so I will skip the explanation of Google Analytics itself Beautifulhugo Copy head.html into the root folder and edit it Copy $ pwd /hugo $ cp themes/beautifulhugo/layouts/partials/head.html layouts/partials/. head.html (changed lines only) Copy - {{ template "_internal/google_analytics_async.html" . }} + {{- partial "analytics" . -}} Create /layouts/partials/analytics.html with the following content Copy {{ if not .Site.IsServer }} {{ with .Site.GoogleAnalytics }} <!-- Global site tag (gtag.js) - Google Analytics 4--> <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{{ . }}'); </script> {{ end }} {{ end }} Write the GA4 code into config.toml (changed lines only) Copy googleAnalytics = "G-XXXXXXXXXX" Mainroad In the mainroad theme at the time of writing, analytics is loaded in layout/_default/baseof.html, and looking at the code below it seems as though GA4 is already supported [Read More]

Three years are about to pass since this site moved to Hugo. I configured the HTTP security headers for the site, which had been left alone for a while. They are directives used by web applications to configure security measures in the web browser, and they are used to defend against things like cross-site scripting and clickjacking This article covers the configuration for the Hugo + Netlify environment that this site uses Also, I will leave out explanations of the configuration terminology [Read More]

I updated the Hugo Tranquilpeak theme on a site I run elsewhere from 0.4.x to 0.5.x From 0.5BETA onwards a number of fixes were required, so here are my notes The current Tranquilpeak The theme is managed as a submodule, and I was using 0.4.x Copy $ pwd ~/hugo/tranquilpeak $ git submodule status e1d2c5d5cb1efb687ed698782f99df576e7db084 themes/tranquilpeak (0.4.8-BETA) Updating to 0.5-BETA Copy $ git submodule update --remote remote: Enumerating objects: 496, done. remote: Counting objects: 100% (493/493), done. remote: Compressing objects: 100% (164/164), done. remote: Total 496 (delta 308), reused 472 (delta 296), pack-reused 3 Receiving objects: 100% (496/496), 214.68 KiB | 7.95 MiB/s, done. Resolving deltas: 100% (308/308), completed with 90 local objects. From https://github.com/kakawait/hugo-tranquilpeak-theme e1d2c5d..37550aa master -> origin/master + 4243bcf...8223447 develop -> origin/develop (forced update) * [new branch] fix-fancybox-3-data-model -> origin/fix-fancybox-3-data-model a065336..902f360 gh-pages -> origin/gh-pages * [new tag] 0.5.0-BETA -> 0.5.0-BETA Submodule path 'themes/tranquilpeak': checked out '37550aa165eec033e34f2e0f89cb0720d72a4c34' Changes and key points To show posts on the front page, mainSection has to be specified explicitly (I was showing the list of posts on the front page, so nothing appeared unless mainSection was filled in) highlight, jQery, prism and font-awesome have each been upgraded, so entries that load the CDN URLs via [[params.customJS]] are needed The notation changed because font-awesome went from 4 to 5 (v5 notation) A timezone parameter was added in hugo0.87, so I added timezone = "Asia/Tokyo" (it is not mandatory, and you need to have updated hugo to 0.87 or later) Fixing config.toml The quickest way is to copy the config.toml inside themes/tranquilpeak/exampleSite and change only the parts you need [Read More]

On this site I manage the Hugo Beautifulhuigo theme as a submodule on Gitlab. From time to time the upstream submodue theme gets updated, but git clone and git push do not update the submodule automatically So it has to be updated by hand, and since this is work I do often, I am writing it down as a note Cloning my own repository Copy $ git clone --recurse-submodules --depth 1 https://gitlab.com/user/repo.git $ cd repo Updating the submodule The only thing you actually have to do is git submodule update --remote [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]

I posted a similar article before in GCC error with hugo on CentOS7 , but recently the build from source failed, so I worked on it. Incidentally, the version of hugo I am trying to build is 0.82 Environment Copy # cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) # git version git version 1.8.3.1 # go version go version go1.15.5 linux/amd64 Building hugo from source Copy $ vim from-gh.sh mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended $ sh from-gh.sh Error Copy Cloning into 'hugo'... remote: Enumerating objects: 50309, done. remote: Total 50309 (delta 0), reused 0 (delta 0), pack-reused 50309 Receiving objects: 100% (50309/50309), 93.65 MiB | 9.80 MiB/s, done. Resolving deltas: 100% (34542/34542), done. go: github.com/sanity-io/[email protected] requires github.com/pmezard/[email protected]: invalid version: git fetch --unshallow -f origin in /root/go/pkg/mod/cache/vcs/b66720d7c9f6776b1690ab6c7de6bd08fe64d74a3eaff8dbdef6603dac225370: exit status 128: fatal: git fetch-pack: expected shallow list When I updated git to the latest version, this time I got the error below [Read More]

To insert an image in Hugo you write the standard Markdown , which renders as <img src "~">, but I had been wanting to build native lazy-load into the img tag. Incidentally, native lazy-load means that You can configure lazy loading of images easily just by adding the HTML loading attribute, without needing Javascript At first I thought it could only be inserted by using the figure tag or a shortcut and went through some trial and error, but when I looked into it I learned that it becomes possible by using Hugo’s Render hooks. If you want to know Render hooks in detail, see the official documentation. [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]

Recently, after fixing Hugo settings or creating and editing articles, the build started failing and I could no longer update the site. Symptoms Failed to get JSON resource “https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BGvuInxxxx/&maxwidth=640&omitscript=true" : Failed to retrieve remote file: Bad Request Looking at the deploy log, Failed was displayed at the Instagram API part and the build was being aborted. It seems that in Hugo, when an instagram shortcode is inserted, the build now fails. [Read More]