Static Site Generator Advent Calendar 2020 - Day 4

ふうせん🎈 FU-SEN です。
予告していた Hugo の記事です。

最近は robots.txt や Sitemap が大事！ という事で、
Hugo での robots.txt とサイトマップを先日ご紹介していました。

🎈 Hugo の robots.txt と Sitemap。| ふうせん🎈 FU-SEN

Hugo は「ブログを構築するツール」と認識されがちですが、
単なる Web サイトを構築するための Hugo を使った場合でも
サイトマップを自動生成してくれたり、Markdown で記載できたりと、
なかなか便利だったりするのです。

自分はいくつか Hugo で Web サイトを作ってあります。
ここ balloon-jp.vercel.app にほとんど入れてしまったので
ふうせん🎈 FU-SEN では他に風船関連のみですけど……
ブログで新規に記事ページを作る代わりに
ページを更新して hugo でデプロイしているだけです。

コンテンツ一覧機能を生かす

Hugo がブログに使われる一因は、記事の一覧表示機能が搭載されているからですね。
テーマもこれに対応している事が多いです。

例えば、content/ 内に入れる 記事.md を最小限に入れます。

---
title: "記事"
date: 2020-12-02T12:34:56+09:00
---

概要

<!--more-->

🍩(・～・)mogmog

この時リストで表示されるのは title の 記事 と
本文の <!--more--> 直前までにある 概要 までで、
🍩(・～・)mogmog は表示されません。
概要の装飾が適用されるかされないかはテーマによります。
もちろんテーマによって日時の表示もあります。

通常は date の新しいページ→古いページで一覧されていきますが、
この並びを固定する場合は weight を加えます。

---
title: "記事"
date: 2020-12-02T12:34:56+09:00
weight: 10
---

weight の小さい順→大きい順で並びます。 これは date よりも優先されます。
でもこの場合でも date は入れて、本文と一緒に更新して下さい。
サイトマップや RSS に日時が付記されるためです。

トップページもテキスト表示にしたい

 Hugo 公式サイト の  Themes は使っている人なら見た事があるでしょう。
実はよく見ると、Web サイト向けのテーマがあるんです。
そのようなテーマを使うのが一手段です。

任意のページで一覧表示を使用せず、通常のテキスト表示にしたい場合、
layouts/index.html を生成する必要があります。
layouts/_default/simples.html を layouts/index.html へ
コピーするだけで大丈夫の場合がありますが、
細かく修正を要するかもしれません。

……あ、一応説明しておきますが、
該当ファイルがない場合は themes/ 内から持ってくるのですが、
themes/ は git clone や git submodule のテーマ更新により上書きされてしまうので、
themes/テーマ名/layouts/ 内から layouts/ 内にコピーします。
必要なファイルのみで良いです。
これは Hugo に慣れてくるとよく行うようになります。

つまり、上の説明を正しく記載すると、layouts/_default/simple.html にはないので
themes/テーマ名/layouts/_default/simple.html を
layouts/index.html へコピーしてみる、という事になります。

その上で content/_index.md を作成します。
（テーマによって content/～/_index.md とディレクトリを挟む必要があります）
これが index.html つまり、トップページのコンテンツそのものとなります。
他のページ同様に title や date を付けて下さい。

メニュー

多くのメニューは Hugo のメニュー機能に準拠しています。

 Menus | Hugo

config.toml にメニューを一覧させるか……

[[menu.main]]
    name = "トップ"
    url = "/"
    weight = 1

[[menu.main]]
    name = "Q&A"
    url = "/faq/"
    weight = 8

[[menu.main]]
    name = "問合せ"
    url = "/contact/"
    weight = 9

content/～/ページ.md として weight と menu を作成します。

---
title: "ページ"
date: 2020-12-08T15:00:00+09:00
weight: 3
menu: "main"
---

menu: "main" であれば、config.toml 内の [[menu.main]] が共通です。
（どちらも main なので。これを変更して他のメニューも作れます）
なので並びは左・上より トップ ページ Q&A 問合せ となります。

カテゴリー・タブの削除

Web サイトとして使うのであれば、カテゴリー・タブは不要でしょう。
config.toml に次を追加します。

disableKinds = ["taxonomy","taxonomyTerm"]

これを付けないと public/ で中身のない
category/ や tags/ が無駄に生成されてしまいます。
これはサイトマップに含まれるので、クローラーで参照されてしまいます。

ここでは Hugo でテーマに関係なく共通した機能で紹介しているので、
多くのテーマで使用できるのですが、
テーマによって独自の実装を行っている場合がありますので、
テーマの説明や GitHub プロジェクトの README、ドキュメントを参照して下さい。

Static Site Generator Advent Calendar 2020

 Static Site Generator Advent Calendar 2020 | Qiita