Upgraded to Hugo v0.135

Background

  1. 18 months ago, I used latest Docker image in GitLab container resgitry for Hugo extended at commit 168fe3d.
  2. Six years ago, I integrated static comments to this blog.
  3. Last week end, when my friend tested static comments here, she reported that @StaticmanLab’s GitLab token had been expired. As a result, I updated it and re-deployed my Staticman instance.

Problem

I wrote a sample comment containing math equations to test if it’s still working. The back-end processes were fine, but the site rebuilding wasn’t successful, as commit c531a0b reveals.

[Read More]
hugo 

Fixed Archetype Error for This Site

Background

In Customized Archetype for This Site, I was using

{{ slicestr .Name 11 | humanize | title }}

in the title attribute in my site’s archetypes/default.md, so that the first 11 characters (YYYY-MM-DD-) would be taken out if I type this command.

$ hugo new post/$(date -I)-<MY_POST_TITLE>.md

In practice, <MY_POST_TITLE> can be replaced to any title, like my-post-title.

Problem

I wanted to create my IntelliJ cheatsheet, so I typed this command.

[Read More]
Hugo 

Upgrade Font Awesome in Beautiful Hugo Theme

Technical adjustment to Font Awesome's official guide

Background

Beautiful Hugo comes with Font Awesome icons. However, it seems that it’s no longer maintained.

Goal

To upgrade Font Awesome to the current stable version (6.1.1).

Problem

The official guide for self-hosting Font Awesome Web Fonts + CSS suggests users to place the following files

filepath role
/fontawesome/webfonts/ Free Web Fonts
/fontawesome/css/all.min.css CSS file for using Free Web Fonts

into somewhere in my theme. The left column of the diagram features the folder assets/.

[Read More]

Deploy Hugo Theme exampleSite With Github Actions

Motivation

To test PRs on the upstream of a Hugo theme by setting up a testing branch.

Goal

To deploy a forked GitHub repo for a Hugo theme with exampleSite to GitHub Pages using GitHub Actions.

The whole article is based on my fork of Hugo Future Imperfect Slim.

References

  1. GitHub Actions for Hugo
  2. A Stack Overflow question showing pwd in GitHub Actions
  3. A Hugo Discourse post about testing exampleSite

Difficulties

I had failed for about ten times before I got the job done.

[Read More]

Site Maintenance for Hugo v0.60

Background

I lacked motivation to keep this tweaked theme up with Hugo’s development after last summer. When I came back yesterday, I saw that some pages using Font Awesome icons were broken. Apart from that, the ToC list level problem resurfaced.

Fixed ToC

The solution that I had adopted no longer worked. Luckily, some users provided a shorter code in the later discussions. The one from user501254 caught me. I first tried to copy his code into the partial layout for ToC. However, nothing changed.

[Read More]
Hugo 

Customized Archetype for This Site

Background

I prefer including the date into the Permalink of a post. Everytime I create a new post, I type

hugo new post/$(date -I)-post-title.md

to ensure that the date is correct.

Problem

The title field in the post’s front matter contained the date, which wasn’t something that I wanted because it’s already shown next to the icon.

Observations

Neither \d nor [\d] works for the PCRE character class \d.

[Read More]
Hugo 

Icon in Hugo Navbar

Motivation

The original navbar in words took up half of the horizontal spaces of the viewport. I couldn’t add new items like “Tags” to display the tag list.

Work

Thanks to the pre field in Hugo Menus, one can easily add the icon as an HTML element by some editing on the template file.

{{ range .Site.Menus.main.ByWeight }}
  {{ if .HasChildren }}
    <li class="navlinks-container">
      {{ if .Pre }}
        <a class="navlinks-parent" title="{{ .Name }}">{{ .Pre }}</a>
      {{ else }}
        <a class="navlinks-parent">{{ .Name }}</a>
      {{ end }}
      <div class="navlinks-children">
        {{ range .Children }}
          {{ if .Pre }}
            <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
          {{ else }}
            <a href="{{ .URL  | relLangURL }}">{{ .Name }}</a>
          {{ end }}
        {{ end }}
      </div>
    </li>
  {{ else }}
    <li>
      {{ if .Pre }}
        <a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
      {{ else }}
        <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
      {{ end }}
    </li>
  {{ end }}
{{ end }}
Hugo  icons  navbar 

Staticman With Introduction Theme

Goal

To port Huginn’s Staticman integration to Introduction.

Difficulties

I’ve used some class names from Minimal Mistakes since the modals in the original code clashes with Introduction’s mobile responsive card display for projects. If I had know the practice of prepending a CSS class to avoid overiding the CSS properties of other components of a web site, I wouldn’t have mixed this Jekyll theme with my template for nested comments.

Due to my existing work on my SASS file for Staticman + Introduction, I had decided to continue working with the class names in this SASS file. Changing the CSS class names in the JS script was easier than doing so in the SASS file since I was more familiar with the former.

[Read More]

More Static Nested Comments

Background

I’ve made nested comment support for Beautiful Hugo, which I’ve ported to other Hugo themes like Introduction, Hyde-hyde, etc.

Problem I

Some of those Hugo themes that I worked with did show the HTML form, but the CSS styles were gone on the GitLab Pages.

Reason I

This is due to the lack of resources/_gen/ in the indexed repo for themes making use of assets/.

Solution I

  1. Check that you have the required prerequisites. For example, Introduction requires autoprefixer and postcss-cli.
  2. Update submodule for the theme in the directory holding the source code of the static site.
  3. Type hugo [server] so that the resources are locally generated.
  4. Push the repo.

Problem II

The approach in my linked blog post is too complicated. It makes use of a mix of JavaScript and Hugo template. This can be hard to comprehend and port, since the file structure for JavaScripts isn’t the same in different themes. It’s better to make the internal referencing for nested comment display entirely in Hugo.

[Read More]

Huginn Theme With Staticman

Goal

To provide Staticman support to the Hugo theme Huginn.

Motivation

A Framagit user tried using the public GitLab instance but failed. Finally, he removed Staticman from his site and his Hugo theme.

If I had been notified, I would have explained that that was due to the constraint of gitlabBaseUrl, which could only take one GitLab instance.

In response to demand for Staticman from Framagit users, I set up another GitLab instance of Staticman API and forked some Hugo/Jekyll repo under the project page Staticman et GitLab Pages.

[Read More]