Hugo | Democratizing Data

Wowchemyをv5.5.0からv5.7.0に上げた

Fri, 16 Dec 2022 17:23:22 -0800

毎年アドベントカレンダーの時期にHugoのテーマであるWowchemy (旧 Academic) のバージョンを上げています。

今年は、唯一参加したアドベントカレンダーもNotionで済ませてしまったので、恩恵にはあずかれませんでしたが、それでもまあ定期アップデートは大事ですね。

Wowchemyは、スタートするときはサクッとstarter kitから作成できるのですが、変更に追従し続けるのが結構厄介で破壊的変更をガンガン入れてきます。が、ドキュメントは最新のバージョンのものしかなく、 Release noteを見てあとはソースコードを見る羽目になります。正直面倒くさい。

というわけで、今回v5.5.0からv5.6.0、v5.7.0に上げたので何をしたかを備忘録的にメモしておきます。

v5.6.0

v5.5.0からは結構大きな変更が入りました

config.yaml (or toml) や params.yaml の構造が大幅に変わった
- そのままだと検索、Gravaterなどが無効になるので注意
go.modの依存するmoduleパスの変更
Algoliaを検索に使うと壊れる

config,params.yamlの変更は、特にどこにも記載がないのでソース読みながら根性で直していきます。特に、 “features” 系は適切に設定しないと、検索が消えたりして大惨事なのでお気をつけてください

多分、rootの設定はいくつか間違っている気もしますが、もう諦めました。

しかし、tomlの構造をパースするのは僕には難しいのでyamlのほうが楽かもしれませんね。

2個目については、ローカルで試すときは例によって hugo mod get をすればよいです。

hugo mod get github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy/v5@v5.6.0

Algoliaは試してみたのですが、エラーが止まらなくて諦めました。

v5.7.0

特に大きな影響もなくそのままいけました。過去一楽なアップグレードでした。

hugo mod get も6を7に変えるだけです。

hugo mod get github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy/v5@v5.7.0

Algoliaを試したけど挫折した

v5.6.0にも書いたのですが、Algoliaを試して辞めました。

検索自体はよさげなんですが

Hugoの生成するindex.jsonを取り込むとMedium由来の -- みたいなハイフンが複数つながるURLが - と一個に正規化されたperemalinkと解釈して、無限にredirectsを設定する羽目になる
Algolia Crawlerを使うNetlify pluginがあるのですが、それを使ってinstantsearchから検索をすると検索結果が空になる

特に後者が致命的でした。なんか、便利そうだけど壊れてて使えないという体験がつらかったので諦めました。

サポートに問い合わせをすればいいのかもしれませんが、もうその気力もなく…。

また、来年Wowchemyのアップグレードをしたいと思います。

3 configs add recommend articles into your Hugo blog by GitHub Actions

Tue, 25 Jan 2022 19:37:52 -0800

Hugo has a feature to show keyword based related articles.

Yeah, keyword based articles might be useful, for people who can manage keyword, category, etc, constantly. I’d love to add content based recommendation that doesn’t require to write explicit keywords by myself. Then, I found an open source named “Prelims” which is developed by takuti.

Prelims is a post-processing tool for Front matter of Hugo/Jekyll, that is a metadata of an article. The recommendation method which is implemented for now is classical, create a TF-IDF based word vector and find similar articles by consign similarity.

The reason why I love Prelims is it’s simple and flexible. Post-processing of front matter doesn’t break your articles nor blog system at all. You can remove extra meta data Prelims generated whenever you want.

Isn’t it practical, right?

One downside of Prelims is it requires to implement Python code for tokenizing or vectorizing TF-IDF. I don’t want to bring my laptop for blog writing and wanna use Netlify CMS and iPad without having Python environment.

So, I built a CLI tool for Prelims, named prelims-cli, which enables to add recommended articles just writing 1 configuration YAML file. It also runs with GitHub Actions.

The three things you need to prepare are:

Configuration YAML file for prelims-cli. e.g., scripts/config/myconfig.yaml
Hugo HTML partial layout, e.g., layouts/partials/page_related.html
GitHub Actions workflow for prelims-cli

Here is the example gist what you need to write.

where content/blog is the directory for English articles and content/post is the directory for Japanese articles.

Putting three files enables you to show recommended articles into your Hugo blog, like the screenshot in the top of this article.

Internally, for Japanese tokenization, it uses SudachiPy. Since keywords prelims generates are a-bit noisy and didn’t wanted to cleanup, so I stopped using it.

The good things I feel are, I can use my blog articles for my hobby recommendation project, and I don’t need to manage tags and categories seriously.

You can enjoy your recommendation without having Python environment, so you can write your articles on iPad with Netlify CMS!

3ファイル追加してGitHub ActionsでHugoにレコメンド記事を表示する

Tue, 25 Jan 2022 18:41:33 -0800

こんにちは、早いものでもう40の大台が迫ってくる誕生日を迎えました。前日にブースターショットを打ったので、一日中ほとんど寝込んでいました。必要な人のために、例のリストを置いておきます。

さて、Hugoにはキーワードベースの関連記事の表示をする機能があります。

しかし、キーワードベースの関連記事も悪くはないのですが、折角なので自分で関連記事のレコメンドをしてみたくないですか？そう思っていたら、 takuti さんの Prelims というオープンソースを見つけました。

Prelimsは、Hugo（やJekyll）のFront matterと呼ばれるメタデータの部分にキーワードやレコメンド記事を足してくれるものになります。

レコメンドの方式自体は、今実装されているのは古典的なTF-IDFを用いたコンテンツベースの類似文書を出してくる方式ですが、Front matterを後から処理してレコメンド記事を追加するというシンプルだけどスマートな方法に感銘を受けました。

ただし、Prelimsはflexibilityを重視しているため、例えば日本語のtokenizerやstop wordsなどは自分で設定をする必要があります。

このあたり、ちょっと慣れていないと難しいかなとも思ったので、prelims-cliというCLIツールを作り、config用のYAMLファイルを用意すればGitHub Actionsでrecommendできるようにしました。

用意するものは以下の3つです。

prelims-cli用の scripts/config/myconfig.yaml
関連ページを表示する layouts/partials/page_related.html
prelims-cliを実行する GitHub Actions

実際の例をgistに貼りました。

myconfig.yaml については、 content/blog が英語の content/post が日本語の記事をおいている想定です。この3つのファイルを追加すればHugoであれば関連記事が、冒頭の画像のように出てくるはずです。

内部的には日本語のtokenizerはSuachiPyのfull辞書を使い、最も長いCモードで形態素単位を設定しています。ただし、prelimsが生成する keywords は少しノイジーだなと思ったので、自分のサイトでは recommendations のみを利用しています。

僕はものぐさなので、タグやカテゴリを豆にメンテナンスできないのですが、レコメンドのおかげで過去の関連記事のリンクも出せるので便利だと感じています。また、自分の記事は自分の持ち物なので、それに対してレコメンドしてML的なsandboxとして遊ぶのは楽しいなと感じています。

この環境を使うことで、Netlify CMSでの執筆等Python環境を用意することができないところでも執筆して、レコメンド記事を作成することができます。もしよければ、 prelims を使ったレコメンドを試してみてください。