Hugo on Solarized Sublime Sekai

Upgraded to Hugo v0.135

Mon, 07 Oct 2024 13:05:16 +0200

Background

18 months ago, I used latest Docker image in GitLab container resgitry for Hugo extended at commit 168fe3d.
Six years ago, I integrated static comments to this blog.
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.

Fixed Archetype Error for This Site

Tue, 11 Apr 2023 15:51:05 +0200

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.

Upgrade Font Awesome in Beautiful Hugo Theme

Tue, 07 Jun 2022 13:02:33 +0200

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/.

Deploy Hugo Theme exampleSite With Github Actions

Sat, 06 Mar 2021 13:39:05 +0100

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

Difficulties

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

Site Maintenance for Hugo v0.60

Tue, 14 Apr 2020 16:33:31 +0200

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.

Customized Archetype for This Site

Sat, 10 Aug 2019 16:28:46 +0200

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.

Icon in Hugo Navbar

Sat, 10 Aug 2019 14:53:00 +0200

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 }}

Staticman With Introduction Theme

Fri, 02 Aug 2019 19:01:07 +0200

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.

More Static Nested Comments

Tue, 30 Jul 2019 21:05:35 +0200

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

Check that you have the required prerequisites. For example, Introduction requires autoprefixer and postcss-cli.
Update submodule for the theme in the directory holding the source code of the static site.
Type hugo [server] so that the resources are locally generated.
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.

Huginn Theme With Staticman

Sun, 19 May 2019 19:26:28 +0200

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.

Improved Integration of Hugo and $\KaTeX$

Mon, 29 Apr 2019 09:48:32 +0200

Problem

There’s no custom $\KaTeX$ macro in local preview since I’ve merged some recent commits from the upstream of this blog’s theme, in particular, Beautiful Hugo’s pull requests #246 and #255, which allowed self-hosting the theme’s static JS, CSS and font files. This self-hosted option is particularly useful in case of slow response from Cloudflare’s CDN.

Even they do appear on the public GitLab site, the final rendered Markdown + $\TeX$ code would be succumb to syntax errors due to their absence in the preview process.

Replacing Deprecated Hugo Syntax in Blog Theme

Thu, 25 Apr 2019 12:45:08 +0200

Problem

Since the recent Hugo upgrade to v0.55.3, the following messages popped up after each local site regeneration with hugo server.

WARN 2019/04/24 18:07:00 Page's .URL is deprecated and will be removed in a futu
re release. Use .Permalink or .RelPermalink. If what you want is the front matte
r URL value, use .Params.url.
WARN 2019/04/24 18:07:00 Page's .Hugo is deprecated and will be removed in a fut
ure release. Use the global hugo function.
WARN 2019/04/24 18:07:00 Page's .RSSLink is deprecated and will be removed in a 
future release. Use the Output Format's link, e.g. something like: 
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
Total in 136 ms

GitLab’s online runner also gave the same type of warnings. This was reported in Beautiful Hugo issue #261.

Comparaison of Two Docker Images for Hugo

Fri, 21 Dec 2018 21:56:57 +0100

Having importing the repo for the Hugo theme Introduction from GitHub to GitLab, I added the automatically generated GitLab CI config file and I ran job #135854407.

$ cd exampleSite
$ hugo --themesDir=../.. -d ../public
hugo: /usr/lib/libstdc++.so.6: no version information available (required by hugo)
hugo: /usr/lib/libstdc++.so.6: no version information available (required by hugo)

The build succeeded with the above message. To suppress it, a switch to another CI runner will do. The associated GitLab CI config file was copied from Hugo’s documentation with some customizations for Hugo sample sites

Staticman Lab New Logos

Wed, 21 Nov 2018 08:31:23 +0100

StaticmanLab's new logo

GitLab logo recreated from Wikimedia's logo by Darby under CC-BY-SA 4.0 and Staticman logo on GitHub by Erlen Masson under MIT.

The old icon for Staticman Lab was made by GIMP from Staticman’s icon in PNG in the GitHub repo. Recently, I’ve found the SVG version of this icon. To serve customers better, I’ve recreated the logo from this SVG file so that the edges in the logo become sharper.

Nested Comments in Beautiful Hugo

Sat, 17 Nov 2018 15:12:50 +0100

Quick links

Motivation

For the mathematical ones, please see my previous post.

As a math student, it’s inefficient to reinvent the wheel like engineering students. Thanks to three existing examples, I had convinced myself that I could bring this to the theme Beautiful Hugo.

Zongren’s Hexo theme (worked best)
Made Mistakes Jekyll theme
Network Hobo’s customization of Beautiful Hugo (inspired by the second one, but contains a logic error)

Interactive Blog on Static Web Host

Sat, 17 Nov 2018 10:09:12 +0100

Vision

gain autonomy: freedom is the basis of moral actions. No freedom, no morality.
transcend ourselves: change/improve our lives through free thoughts

Goal

Convert our free thoughts into free code.

Free code allows users around the world to run and/or improve them. This would bring real enhancement to our tools.

For example, beautiful math writing used to be a complicated process. A decade ago, this required the installation of a typesetting engine called $\LaTeX$. Thanks to freely available scripts like MathJax and $\KaTeX$, it’s now possible to write math viewable by any modern web browser by writing the content in the middle.

Custom $\KaTeX$ Macros

Thu, 27 Sep 2018 19:32:58 +0200

Background

Same as the last section in Beautiful Hugo Improvements.

Goal

To write math efficiently by automatically loading longer code with shorter macro code.

For example, when I wrote Some Infinite Cardinality Identities, it would be ten times more quicker and efficient to type \card{C} than to write \mathop{\mathrm{card}}(C) all the time.

Changes committed to my repo

The current version of Beautiful Hugo is still using $\KaTeX$ v0.7, which doesn’t support macros in auto-rendering. It would be inconvenient to include the macros after invoking $\KaTeX$’s render function.

Better Hugo ToC Fix

Thu, 27 Sep 2018 18:56:40 +0200

Background

I applied a fix to Hugo’s ToC ten days ago.

Drawbacks

To make the script non-render blocking, one has to place it in the footer. As a result, it takes about 0.2 seconds to remove the excess <ul> tag.

Solution

Thanks to Beej126’s Hugo template code, this site delivers table of contents processed by Hugo during GitLab’s continuous deployment.

Fix Hugo Table of Contents

Mon, 17 Sep 2018 12:31:03 +0200

Background (TL;DR)

While setting up the new version of Staticman for my demo GitLab pages, I’ve read developers’ documentations, setup guide and some community blog posts so as to come up with my own guide. It’s originated and inspired from a variety of sources, and refined according to hours of testing. Consequently, despite the original intention to keep things simple, I’ve finally come up with a post with over a thousand words.

To pass my ideas in this post to visitors, it’s better that they have an overview of the contents before actually looking into the details. Therefore, a table of contents is nice-to-have feature for this blog.

Beautiful Hugo Improvements

Wed, 12 Sep 2018 09:17:39 +0200

Fixed issue #142

Two weeks ago, Google Webmasters complained about the broken urls in this blog’s Tags page. This was reported by Joakim Vivas as issue #142 half a year ago. Pascal had submitted pull request #165 to fix this. However, he self-closed his PR.

Since the last commit by Michael Romero, Beautiful Hugo’s owner, was five months ago, it seems that he has abandonned his project. Therefore, I used Kaushal Modi’s solution to fix this at commit ff536782.

Brighten Image With GIMP

Thu, 23 Aug 2018 13:36:44 +0200

Motivation

One loves adding colors to his/her life by adding stunning photos to his/her social media profile. However, due to various constraints, such as weather, budget and time, it’s possible that the photos taken look dark and somber.

Eglise St Martine

Photo taken at Pont-du-Château, Puy-de-Dôme (63) on 30th June, 2017

Despite a suboptimal choice of camera angle, a right tool enables you to take the best out of the photo. Let’s go GIMPing.

Hugo Image Path Refactoring

Sat, 14 Jul 2018 14:18:28 +0200

Goal

To set up a reasonable content structure for my blog.

Before Hugo

In my old Octopress blog, images and posts were placed under source/images/posts and source/_posts folders respectively. They were so far apart that I needed to use copy and paste the URL’s so as to get them right. As the size of the blog grew, I could hardly retrieve an image without first listing the files in the post image folder. This significantly reduced the efficiency of blog writing. In my hometown, people take efficiency seriously.

Configure UFW for Hugo

Fri, 29 Jun 2018 06:36:21 +0200

Easy Linux tips project recommends users to enable their firewall. However, this blocks all incoming traffic by default. If one wants to test the site on mobile devices, one will need to add a few rules to UFW.

$ sudo ufw allow ssh
$ sudo ufw allow http
$ sudo ufw allow https
$ sudo ufw allow 80/tcp
$ sudo ufw allow 1313/tcp comment "hugo server"

I learnt the last line from 竹内電設.

My First Post

Sun, 24 Jun 2018 02:05:00 +0200

Introduction

Hello World! This is my new GitLab page powered by Hugo. I’m setting up this blog to practise my math, foreign languages and IT skills.

Why Hugo?

My original goal is to set up a personal blog for posting math.

I used to work with Octopress, but resolving the dependencies and other technical issues had actually took much more time and effort than expected. As a result, I digressed a lot from my studies to look into those problems.