Hugo on @johtaniの日記 3rd

ブログ記述環境としてのDev Container

Mon, 24 Jul 2023 09:10:32 +0000

このブログの生成には、Hugoを利用しています。ブログ移行日記（その1）に書いてありますが、当時はbrewでインストールしていました。また、Windowsに移行したタイミングで、WSL2のUbuntuにaptでhugoをインストールして利用していました。 WSL2の環境が壊れなければこのままでもいいのですが、最近Dev Containerを触っていたので、このブログを書く環境（おもにHugo）もDev Containerにできるのでは？と気づきました。

ということで、Hugo＋αの環境をDev Container化したので、そのメモです。

必要なもの

ブログを書いて、記事を構築して、公開するところまでに利用するのは次のようなものです。

git
Hugo
node
atomic-algolia

GitHubのプライベートリポジトリでHugoのプロジェクトを管理しています。また、GitHub Pagesで公開しており、生成したHTMLもgitコマンドを利用してGitHubにpushしています。このため、gitコマンドが必要です。

コンテンツの生成はHugoコマンドを利用します（テーマの適用とかいろいろ）。

あと、Algoliaでブログを検索できるようにしており（ブログ移行日記（その4）参照）、Algoliaへドキュメントのデータをアップロードするために、atomic-algoliaを利用しています。こちらは、nodeのモジュールであるので、nodeの環境も必要です。

ベースにするイメージ

Dev Container Templatesというリポジトリが公開されています。こちらを探すと、元となるdevcontainer.jsonが見つかることがあります。 Hugoのものがあるか探してみましたが、残念ながら見つかったのはJekyllのテンプレートでした。今回は、nodeの環境が必要なのでjavascript-nodeを元に編集していきます。

手元のUbuntuのnodeのバージョンが16だったので、バージョン16のイメージを指定します(devcontainer.jsonは後述)。

Hugoの追加

Hugoのテンプレートはなかったのですが、Dev Container FeaturesにHugoのfeatureが用意されていました。 featuresに1行追加するだけでコンテナにHugoをインストールしてくれる便利ものです。

Markdownの環境

Dev Container Templatesを探索していて見つけたMarkdownのテンプレートも参考にしてみました。 VS CodeのMarkdown向けの拡張機能がいくつかリストアップされていたので、ついでに追加です。 markdown-all-in-oneやmarkdownlintはこれまでも利用していたので、他のものも便利だろうということで。他の物はどんなものかを後で調べてみる予定です。

作った.devcontainerの設定はこちら

ということで、出来上がった設定は以下の通りです。

devcontainer.json

{
    "name": "Hugo - blog generator",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:16",
    "postCreateCommand": "/bin/sh ./.devcontainer/postCreateCommand.sh",
    "features": {
        "ghcr.io/devcontainers/features/hugo:1": {}
    },
    "customizations": {
		"vscode": {
			"extensions": [
				"yzhang.markdown-all-in-one",
				"streetsidesoftware.code-spell-checker",
				"DavidAnson.vscode-markdownlint",
				"shd101wyy.markdown-preview-enhanced",
				"bierner.github-markdown-preview"
			]
		}

    }
}

postCreateCommand.shでは、npm installで、必要なモジュールのインストールをコンテナビルド後に実行できるようにしました。（apt updateはなくてもいいな）

postCreateCommand.sh

#!/bin/sh
# postCreateCommand.sh

echo "START Install"

sudo apt update
sudo chown -R vscode:vscode .

npm install

echo "FINISH Install"

まとめ

ということで、ここ最近Dev Containerについて色々調べていたのでサクッとDev Container化ができました。まぁ、HugoのFeatureが用意されていて、他に大したことをやっていないというのが大きいのですが。このブログは今回構築したDev Containerで生成して公開した記事になります。

Hugoをアップデートした

Fri, 05 Aug 2022 17:59:14 +0900

Hugoを0.84から0.92にアップデートをする際に、これまでのブログ記事やレイアウトファイルを修正したので個人的にメモを残しておきます。

なんでアップデート？

うっかり魔がさして、メインのWSL2のUbuntuを20.04から22.04にアップグレードしました。。。新規に22.04を落としてきて移行ではなく。皆さんはまねしないほうがいいですよ！アップデートした後にGitの環境がおかしくなったりと大変でした。 WSL2のUbuntuではHugoでブログのビルド、いろんな確認のためのElasticsearchの起動、個人的なプログラムとかを書く環境として利用しています。

で、Ubuntuを上げたところ無事（？）Hugoもアップデートされたわけです。最初はGitでfetchが出来なくなって修正していましたが、そのほかの動作確認を行なう段階でHugoでブログがビルドできなくなっていることが判明しました。

バージョンアップに伴う修正

hugoコマンドを実行すると、いくつかのERRORとWARNが出力されました。次のようなものです。

hugo v0.92.2+extended linux/amd64 BuildDate=2022-02-23T16:47:50Z VendorInfo=ubuntu:0.92.2-1
ERROR 2022/08/05 13:22:32 Page.URL is deprecated and will be removed in Hugo 0.93.0. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url
WARN 2022/08/05 13:22:32 The "tweet" shortcode will soon require two named parameters: user and id. See "/home/johtani/blog_generator/content/post/2020/2020-12-04-build_corne_choc.md:46:1"
...
ERROR 2022/08/05 13:22:33 Failed to get JSON resource "https://publish.twitter.com/oembed?dnt=fa...
If you feel that this should not be logged as an ERROR, you can ignore it by adding this to your site config:
ignoreErrors = ["error-remote-getjson"]
ERROR 2022/08/05 18:44:11 Page.UniqueID is deprecated and will be removed in Hugo 0.93.0. Use .File.UniqueID
ERROR 2022/08/05 18:44:11 Page.Dir is deprecated and will be removed in Hugo 0.93.0. Use .File.Dir

Page.URLなどがdeprecatedに

最初と最後2行のERRORがこちらになります。どうやら、Pageオブジェクトの変数に変更があったようです（まだdeprecatedであり、存在はしていそう？）。レイアウト（テンプレート）ファイルで「Previous Post」や「Next Post」といったリンクを作ったり、 Algoliaに登録するためのJSONファイルを生成するところでURL文字列を取得するために参照していました。

ログ出力でどのように変更すればよいのか？という記載があるので便利ですね。ただ、どのファイルにこの記述があるのかはログに出てなかったので少しだけ苦労しました。

実際には「UniqueID」という文字列でディレクトリ内を検索してあたりを付けた感じです。利用させていただいているテーマ（Clean White）がすでにアップデートに対応されていたのでそちらが参考になりました。

いくつか、テーマをもとに修正したテンプレートがlayoutsディレクトリにあったので、それらを修正した形です（参考のリンクはテーマのファイルになります）。

.URLを.Permalinkに変更（参考：single.html）
.UniqueIDを.File.UniqueIDに変更（参考：list.algolia.json）

tweetのshortcodeの引数が増えた

これまでは以下のようにIDだけで良かったのですが、userとidという2つの引数が必須になるという変更が入ったようです。

変更前：

{{ <tweet 1449214872143609860> }}

変更後：

{{ <tweet user="johtani" id="1449214872143609860"> }}

WARNにはファイル名、行番号が出力されていたので、1つずつ修正していきました。結構な量があったので、地味に大変でした、公開しているブログを見ながら、該当するツイートを見つけてはuserを指定していく部分が特に。自分のツイート以外もブログに貼っていたので画一的には対処できなくて。。。

なにかプログラムで機械的に対応ができたかもなぁ。

鍵付きツイートによるエラー

tweetのshortcode対応を行なった後でもビルドがエラーになっており、次のようなエラーが消えないままでした（エラーの一部は省略しています）。（幸いにも）1つのツイートだけ、ブログ記事を書いた後で鍵付きになってしまった方のツイートがあったようで、ツイート用のJSONが取得できなくてエラーになっていました。

ERROR 2022/08/05 13:22:33 Failed to get JSON resource "https://publish.twitter.com/oembed?dnt=fa...
If you feel that this should not be logged as an ERROR, you can ignore it by adding this to your site config:
ignoreErrors = ["error-remote-getjson"]

こちらもログに対処方法が出ています。 config.tomlにignoreErrors = ["error-remote-getjson"]を追加すれば、エラーが出力されなくなりビルドも成功するようになります。ただ、tweet以外でもエラーが出る可能性がありそうで、その場合に、ブログに書いたつもりが一部が出力されないまま公開されそうな気がします。なので、今回はconfig.tomlに該当の設定を追加するのではなく、ブログ記事から該当のツイートを消す対応をしました。幸いにも、ツイートを消してもブログ記事自体には影響がありませんでした。

.hugo_build.lockファイルが生成される

これは、エラーではないのですがgit addしようとした際に、ファイルが増えていたのでどういったファイルなのかを調べました。 0.89.0から追加されたロックファイルのようです（参考：0.89.0のリリースノート）。こちらは特に保管する必要もなさそうなので.gitignoreに追加して対処しました。

まとめ

ということで、気軽にUbuntuをアップグレードしないほうがいいですね。。。期せずしてHugoのアップグレードができたのは良かったかもなｗ

参考

【WSL2】Ubuntu 20.04.4 LTS を 22.04 LTS へアップグレードした

ブログ移行日記(その5) - Jugemのブログを移行

Fri, 21 Feb 2020 12:04:00 +0900

ブログ移行日記(その5)です。前回まではこちら

今回はこれまでとは異なる特殊な話です。

最初にブログを書き始めたときに利用していたのがJugemのブログでした。その後、Octopressに移行して、今年、Hugoに移行したという流れです。

で、よくよく考えると、Jugemのブログも移行できるんじゃないか?となりました。じゃあ、やってみるかと。なので、今回のブログは自分の備忘録です(興味のない人が大多数じゃないかな)。一応、Pythonで書いたプログラムはGitHubに上がっています。文字列置換と正規表現のオンパレードです。

JugemからExport

まずは、移行元のデータが取り出せるかどうかを調べたところ、text形式もしくはXML形式でエクスポートが可能でした。

変換処理が必要なはずなので、XMLでダウンロードします。独自のXMLですが、記事ごとにXMLのタグ(<entry>)でまとめられているので、処理が楽です。

XMLをMarkdownに

<entry>タグの下に次のような項目が入っているので、抜き出します。

ヘッダ部

title - 記事タイトル
author - 著者
category - タグ
date - 投稿日付
description : 本文(先頭部分)
sequel : 本文(つづき)

titleからdateまでをHugoのMarkdownのヘッダ部分として出力します。日付は形式が違うので合わせるように変換し、 titleは(Jugemより移植)という文字列を追加しました。

また、Hugoの個別のコンテンツにするためにそれぞれをMarkdownのファイルに変換しています。ファイル名は変換後のdateの先頭10文字(yyyy-MM-dd)に-を付け加えて、タイトルを追加しました。ホントは英語のファイル名にしたかったんですが、ちょっと手抜き。ファイル名に使用できないような文字は-に置換しています。

本文

本文部分はもう少し複雑です。まずは、descriptionとsequelから抜き出した文字列を結合します。

で、内部の文字列に次のようなものがあるので、それぞれMarkdownに変換したりという処理を書いてます。

などです。アフィリエイトタグは、数行に渡るの複数のHTMLタグで記述されているので、 ASINと商品タイトルだけを抜き出しています。 Hugoでアフィリエイトのリンクを作るために、hugo-amazon-jpという公開されているshortcodeを元に、カスタマイズしたものを使っています。これ用に、必要なASINとタイトルを別ファイルに出力したりしています。

また、いくつか画像を使っている記事があったのですが、これが曲者でした。 XMLに入っているimgタグに画像へのURLがあるのですが、アクセスしても存在しないURL担っています。。。ブログで公開している画像のファイル名に似たものがXMLに入っていたので、URLを組み直して、ダウンロードするという処理も書いています。

あとは、昔ちょっと凝った書き方(spanタグで章みたいなことやってた)をしていた部分の処理を加えて完成です。

まとめ

元のXMLを見たり、抜き出したファイルを見ながら、トライアンドエラーでプログラムを書きました。なんとなく変換できたなかっていうところで、取り込んで公開しました。まだ、全部の記事をチェックしてないですが、なんとなく移植できたので一旦これでいいかなと。昔の記事を見たときにおかしい場所があったら手で治すつもりでいます。

なんか、もうちょっとうまくプログラムかけた気もしますが、書き捨てのプログラムだと思うのでこんなもんかな。

1点気になっているところは、コメントの部分です。ブログにコメントをいただいていたのですが、その部分は移植できてないです。

Octopresに移植していこうは、Disqusのサービスでコメント部分を提供しています。ここに移植するのも変な話だなぁと思っているので、本文にコメントを取り込む感じかなぁ？

もともとのJugemのサイトもそのまままだ残してあるので、そのうち気が向いたらで。

OctopressからHugoへ移行中(まだ途中)

Thu, 16 Jan 2020 18:23:37 +0900

5年くらい、Octopressを使用していましたが、更新されなくなっているのと、コンテンツの生成に時間がかかることもあり、ほかのプラットフォームを使用するように変更しました。

とりあえず、今回の移行で参考にした記事とかURLをリストアップしてみました。詳細についてはまた明日以降で。

参考記事
- 移行関連 : https://iriya-ufo.net/blog/2018/12/27/octopress-to-hugo/#github-pages-
- 移行関連 : https://gam0022.net/blog/2016/09/25/migrated-from-octopress-to-hugo/
- Hugo自体の日本語紹介記事 : https://knowledge.sakura.ad.jp/22908/
Hugo概要
- https://gohugo.io/
テーマ
- 一覧 : https://themes.gohugo.io/
- 利用したテーマ : https://github.com/zhaohuabing/hugo-theme-cleanwhite
データ移行
- 作ったスクリプト : https://github.com/johtani/from-octopress-to-hugo
favicon
- 作ったサイト : http://emblemmatic.org/markmaker/#/
Algoliaセッティング
- 参考 : https://blog.uni-3.app/2019/01/02/hugo-algolia-search/
GitHub Pagesでの運用
- https://gohugo.io/hosting-and-deployment/hosting-on-github/#types-of-github-pages

残タスク

Amazonのアフィリンクをきれいに表示するlayoutか何かを用意する?