🚀

Hugoでトップページにも好きな内容を書く話

2023/08/12に公開

本記事では、Hugoを使用して(ブログっぽくない)「普通の」Webページを生成する方法を書きます。ブログのトップページには記事リストや最新の記事などが表示されることが多いですが、「普通の」Webページではトップページ自体にも適当な内容を記述したいことが多いと思います。 index.md をトップレベルに配置すれば良いようにも思うかもしれませんが、Hugoの Page Bundles の機能により、 index.md をトップレベルに配置するとその下にある他のページが生成されなくなってしまいます。

今回やった方法

今回やった方法の概要は以下のようになります。

  • markdownファイルのヘッダーで url を指定
  • hugo.toml で記事リストのホームページの生成を無効化

Hugoでは、markdownファイルのヘッダー部分に url を指定することで、好きな場所にファイルを生成することができます。例えば以下のように記述すると、 /posts/001/ に当該ページが生成されます。

---
url: "/posts/001/"
---

今回はトップレベルにページを生成したいので、 main.md などの適当なファイルの先頭に

---
url: "/"
---

と記述することで、 main.md の内容がトップページに生成されます。

但し、デフォルトでは通常のトップページも生成されてしまうため、この方法で生成したトップページと干渉して問題が起こることがあるようです。この問題を解決するために、 hugo.tomldisableKinds = ["home"] などを追加することで、通常のトップページを生成しないように設定します。

今回やらなかった方法

もう一つの方法として、 layouts/index.html を生成して、そこで色々とカスタマイズする方法もあるようです。

参考記事

Discussion