Hugoでwebサイト構築(6) publicへの記事出力について

2015-08-24

written: kengo

tag:

hugo

1. サイト作成時の出力について

前回まででHugoの基本的な部品構成をひととおり紹介しました。ここまで準備すればHugoコマンドを入力してサイトを生成できるのですが、publicの出力には少し癖があるため、これを説明します。この記事のHugoのバージョンはHugo v0.14です。

1-1. 記事は基本的にindex.htmlになる

これまでの紹介にのっとり、たとえば下記のような構成でサイトを生成したとします。

archetypes/
config.toml
content/
- ~~~.md (記事A)
- +++.md (記事B)
- xxx.md (記事C)
layouts/
- _default/ (サイトの基本レイアウト)
  - single.html (基本レイアウト)
- partials/ (部品レイアウト）
  - site_header.html
  - site_footer.html
  - ~~~.html
  - …
- index.html (ホームページのレイアウト)
static/
- favicon.ico
- css/
  - main.css
- images/
  - site_logo.png
- js/
  - test.js

この場合、出力されるpublicの中身は以下のようになります。

public/
- index.html (layoutsのindex.htmlから生成)
- ~~~/
  - index.html (content/~~~.mdから生成)
- +++/
  - index.html (content/+++.mdから生成)
- xxx/
  - index.html (content/xxx.mdから生成)
- favicon.ico (staticからコピー)
- css/
  - main.css (staticからコピー)
- images/
  - site_logo.png (staticからコピー)
- js/
  - test.js (staticからコピー)
- sitamap.xml (自動生成)
- 404.html (自動生成)

記事はすべてフォルダとindex.htmlの組み合わせで生成され、フォルダ構成が変わります。 http://sample.com/~~~/ といった形でアクセスできるようにするためと思われます。リンクの相対パスなどを利用する場合、フォルダ構成が変化するため注意が必要です。

1-2. index.mdの作成

記事は基本的に上記のようにフォルダに展開されますが、content内に手動でフォルダをつくって中に index.mdを作った場合、例外的に動作が変わります。

content/
- ~~~/
  - index.md (記事A)
- +++/
  - index.md (記事B)
- xxx/
  - index.md (記事C)

上記のように、content内で先にフォルダに分けておき、中にindex.mdを置く形にします。するとこれによって出力されるpublicは、

public/
- ~~~/
  - index.html (content/~~~/index.mdから生成)
- +++/
  - index.html (content/+++/index.mdから生成)
- xxx/
  - index.html (content/xxx/index.mdから生成)

1-1で示したフォルダ構成と同様に出力されます。index.mdである場合のみ、フォルダを作らず同じ階層にindex.htmlを出力する処理になるようです。フォルダ構成が変化することが都合が悪い場合、index.mdの使用を検討するのも良いかと思います。

(※ただしindex.mdを使用すると、Hugoがサイトの構成上自動出力したindex.htmlを上書きすることがあるので注意が必要です。今後説明していく予定ですが、Hugoには指定したグループのリストページを自動出力する機能があります。それらのファイルとindex.mdで出力されるファイルの位置が重複した場合、どちらが適用されるかは定められていません)

なお、弊社でHugoを使用する場合、リスト化の必要がない記事についてのみindex.mdを利用しています。

2. UglyURLs

すべてindex.htmlで出力することを避けたい時、config.tomlにUglyURLsを設定し、これをtrueにすることで出力を変化させられます。

config.toml

BaseURL = "http://example.com"
UglyURLs = true       # URL出力を変化させる
Title = "Hugo Example Site"

[Params]
site_name_jp = "てすとサイト"
author = "Taro Yamada"
description = "Welcome!"

UglyURLsをtrueにすると、contentからpublicへの出力は以下のように変わります。

content/
- ~~~.md (記事A)
- +++.md (記事B)
- xxx.md (記事C)
public/
- ~~~.html
- +++.html
- xxx.html

フォルダ構成が変わらず出力される形になるので、わかりやすいですね。ただ1点難点があり、1-2で紹介したindex.mdに関しては階層が正しく認識されないためか、記事が正しく生成されなくなります。まだ検証不足ですが、Hugoが自動生成するリンク関連もすべて変わるため不具合が起きる可能性もあります。

フォルダ&index.htmlで出力する形が標準であるため、標準のまま使うのが安定的であると思われます。

References

Hugo Organization : https://gohugo.io/content/organization/
Hugo UglyURLs : https://gohugo.io/extras/urls/