Notion+Hugoのブログにslugを設定できるようにする

概要

Notion-Hugoで構築したブログの各ポストにslugを設定する方法を解説します。

結論

この記事は以下の記事の続きです。

前回、NotionとHugoを使ってブログを構築する方法を解説しました。

今回は各ポストにslugを設定する方法を解説しようと思います。

slugとは、URLの末尾の部分になります。例えば以下の記事であれば、yoast-api の部分がslugになります。特定のグループ(今回であればposts)内での識別子のようなものだと思っていただければいいと思います。

前回のブログに沿って設定をした状態では、slugはタイトルになってしまいます。(以下のような感じ)

今回の記事ではNotionのプロパティからslugを設定することで、記事のslug(URL)を変更できるようにすることを目標にします。

Hugo公式のURL管理について記載されているページを確認してみます。

上記ページを見ると、以下のことがわかります。

これをもとに、slugを設定する方法を見ていきましょう。

手元のソースコードを確認すると、config/_default/permalinks.toml というファイルが存在し、以下のような記載になっていました。

1
2


'/' = ":title"
posts = ":sections/:title"

なるほど。この設定によって、

のように動いていたのですね。このファイルを以下のように変更します。

1
2


'/' = ":title"
posts = ":sections/:slug"

これで、posts以下のページに対しては、slugがURLに使われるようになりました。

また公式ページを確認したところ、slugフロントマターが設定されていない場合、記事タイトルが:slug の箇所に入るようなので、変更前後で過去の記事にアクセスできなくなるようなこともなさそうですね。

以下の画像のように、各記事にslugプロパティを追加していきます。重複しないように注意してください。

これで無事、各記事が/posts/<slug> で表示されるようになりました。

今回はNotion+Hugoで構築したブログについて、各ポストにslugを設定する方法を解説しました。

SEO的に効果があるかはわかりませんが、URLの見栄えがすっきりするので今後は設定するようにしていきたいとおもいます！