Hugoサイトをつくる

Obsidian Hugoを進める上でチャレンジしている。 ブログ記事もObsidian上で管理できるので、加筆／修正しやすい心理的効果がある。

目的・やりたいこと HugoのContentフォルダをObsidian Vaultに指定することで、HugoのコンテンツファイルもObsidianで閲覧・編集できるようにする Obsidianを外部公開用のメタ・ノートとして使う 実装方法 Obsidian VaultにHugoのContentフォルダを指定する 気付き ObsidianだとVault内でフォルダを分けても、リンク先の.mdには階層構造が付与されない おそらく、設定の問題と思われる これによって、あとからフォルダ移動が容易になる Hugo側も.mdを直接読み取るようにできる 課題 HugoのShortcodesは、Obsidianで展開されない もしかしたらObsidianのプラグインで解決できるかもしれない

インストール npm install -D --save prettier prettier-plugin-go-template prettier-plugin-tailwindcss 設定ファイル .prettierrcファイルにprettierの設定を記述する。複数のプラグインも同時に扱えるようだ。 prettier-plugin-go-templateは、Go Templateのためのprettierプラグイン prettier-plugin-tailwindcssは、TailwindCSSのためのprettierプラグイン { "plugins": [ "prettier-plugin-go-template", "prettier-plugin-tailwindcss" ], "overrides": [ { "files": [ "*.html" ], "options": { "parser": "go-template" } } ] } 保存時に自動的にフォーマットされるようにした。

ObsidianのためにFrontMatterのaliasesを追加した場合、Hugoのエイリアス機能が意図しない動作になるケースがあった。disableAliasesをtrueに設定してエイリアス機能を無効化した。

事象 Partial Templateを関数代わりに使おうとしたときに、returnを複数記述するとエラーになった。 {{ if isset .Params "img" }} {{ return .Params.img }} {{ else }} {{ return "images/nopicture.png" | absURL }} {{ end }} ドキュメント Partial templates を確認すると、確かに1つのpartialファイルに1つのreturnだけが許されていると明記されていた。

XTwitterのサムネイルなど Open Graph protocolの画像をimages.Textで作成する。 英語だと自動でテキストを折り返してくれるが、日本語だと分かち書きされていないため折り返されない。 以下のTwitter Card Image Generatorは、指定したWidthで折り返し設定ができた。 Ladicle/tcardgen: Generate a TwitterCard(OGP) image for your Hugo posts.

Obsidian VaultにHugoのContentフォルダを指定するを発展させ、Private RepositoryのObsidian VaultをHugo Moduleとして読み込みサイトをビルドする。 今日（2025/08/24）時点の全体像は下図のとおり。