Hugo で普通の Web サイトをつくる。
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.asia にほとんど入れてしまったので
ふうせん🎈 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 のメニュー機能に準拠しています。
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
