Day6：Hugoのpretty / ugly URLとcontentフォルダへの配置方法を考える

本記事の概要

• pretty URLとugly URLについて理解する
• HugoにおけるcontentフォルダとURLの関係について整理する
• Blowfishの機能を考慮したcontentフォルダへ配置する際の作法について考える

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)

pretty URLとは？

Hugo公式の用語集(Glossary)に記載されている。

中を見ると以下のように書かれている。

A pretty URL is a URL that does not include a file extension.

ざっくりと和訳すると「pretty URLは、ファイル拡張子を含まないURL」とある。

参考：対義語となるugly URLとは？

pretty URL の対義語は、ugly URLと呼ぶ。
同様に、Hugo公式の用語集から見てみることにする。

中を見ると以下のように書かれている。

An ugly URL is a URL that includes a file extension.

こちらもざっくりと和訳すると「ugly yURLは、ファイル拡張子を含むURL」とある。

両者の比較

拡張子を含むか否かということがキーポイントである。

架空のサイトを使ってややこしいことになると困るので、Day1で貼り付けた私のサイトのURLを利用して説明することにする。

https://dokokanoradio.pages.dev というWebサイトがあったとして、

pretty URLの場合は以下のようになる。

• TOPページ：https://dokokanoradio.pages.dev
• infoフォルダにindex.htmlを置いた場合：https://dokokanoradio.pages.dev/info/

ugly URLの場合は以下のようになる。

• TOPページ：https://dokokanoradio.pages.dev/index.html
• infoフォルダにindex.htmlを置いた場合：https://dokokanoradio.pages.dev/info/index.html

要は、index.htmlを隠すか否かということになる。

HugoやBlowfishテーマのデフォルトは？

下記のHugoの公式にもある通り、デフォルトは pretty URLになっている。
そのため、Blowfishテーマにおいてもデフォルトでpretty URLである。

ちなみにだが、サイト全体で設定することも、フォルダごとに設定することも可能な仕様になっている。詳細は下記参照。

好みにもよるが、特にこだわりが無ければpretty URLを使う方が、URLの見た目を統一できる。

contentフォルダとURLの関係

pretty URLの場合の例を示す。
例によって、私のサイトのURLを利用して説明している。
ただし、サイト内のコンテンツは架空のものである。

pretty URLの場合のcontentフォルダとURLの例

content/
├── aaa.md // https://dokokanoradio.pages.dev/aaa/
├── bbb/
│   └── index.md // https://dokokanoradio.pages.dev/bbb/
├── ccc/
│   ├── dir1/
│   │   └── index.md // https://dokokanoradio.pages.dev/ccc/dir1/
│   └── _index.md https://dokokanoradio.pages.dev/ccc/
├── ddd/
│   ├── news-1.md // https://dokokanoradio.pages.dev/ddd/news-1/
│   └── news-2.md // https://dokokanoradio.pages.dev/ddd/news-2/
└── _index.md // https://dokokanoradio.pages.dev

まとめるとファイル名とURLの関係は次のようになる。

• _index.md：_index.mdの属するフォルダパスがURLとなる
  • ただし、子フォルダを含むページである(Hugoではリストページなどになる)
• index.md: index.mdの属するフォルダパスがURLとなる
  • ただし、末端に当たるページとなる(Hugoではリーフページと呼ぶ)
• それ以外.md: フォルダパスにファイル名を加えたものがURLとなる
  • ただし、Blowfishテーマでは使わないほうが無難(後述)

ページバンドルとBlowfishテーマでの例

Hugoにはページバンドルという概念がある。
例えば、記事と同じフォルダに画像を置いておくことで、記事内で使用できる機能である。
Blowfishテーマの場合、featured.jpgなどのように画像を置いておけば、自動的に記事のサムネイルとして設定してくれる。
サムネイルの詳細は下記を参照すること。

サムネイルを使うためには、フォルダを作ってその中で_index.md またはindex.mdとする形にする必要がある。
あらかじめフォルダを作っておいた方が、同じ階層のURLに対応するファイルやフォルダが混在しなくて済む。

先の例を配置しなおすと

ページバンドルを扱いやすくするために、先の例について、URLの構成を変えずにcontentフォルダの構成とファイル名を変えた例について示す。
下記のようにすることで、

• URLはフォルダ名にのみによって決まり、
• index.mdに_を含むか否かで、リーフページか否かを判別できる

という形になり、扱いが統一できる。

contentフォルダを配置しなおした例

content/
├── aaa/
│   └── index.md // https://dokokanoradio.pages.dev/aaa/
├── bbb/
│   └── index.md // https://dokokanoradio.pages.dev/bbb/
├── ccc/
│   ├── dir1/
│   │   └── index.md // https://dokokanoradio.pages.dev/ccc/dir1/
│   └── _index.md https://dokokanoradio.pages.dev/ccc/
├── ddd/
│   ├── news-1/
│   │   └── index.md // https://dokokanoradio.pages.dev/ddd/news-1/
│   └── news-2/
│       └── index.md // https://dokokanoradio.pages.dev/ddd/news-2/
└── _index.md // https://dokokanoradio.pages.dev/

Blowfishテーマにおける小技

Blowfishテーマでのサムネイルの扱いは下記のようになっている。

• 先のようにフォルダにfeatured.jpgなどの所定の名称の画像を置けばサムネイルとなる
• 画像を入れていない場合はコンフィグで指定したデフォルトのサムネイルになる
  • デフォルトのサムネイルを指定していない場合は、サムネイルが表示されない

コンフィグでのデフォルトサムネイルは、そのサイト全体でのデフォルトになるため、

• サイトの/AAA/フォルダ以下では、featured_A.jpgをデフォルトサムネにする
• サイトの/BB/フォルダ以下では、featured_B.jpgをデフォルトサムネにする

といった細かな制御がしにくい。

そこで、下記のようにフォルダを構成し、ひな形用の下書きの記事を作ると便利である。

下書き記事を利用して、ページごとにデフォルトサムネを置く作業を楽にする方法

content/
├── aaa/
│   ├── _draft_aaa/
│   │   ├── index.md //draftをtrueにすること
│   │   └── featured_a.jpg
│   ├── aaa-no1/
│   │   ├── index.md
│   │   └── feagured_a.jpg
│   └── aaa-no2/
│       ├── index.md
│       └── featured_no2.jpg //この記事だけオリジナルサムネにしたいので差し替えた
└── bbb/
    ├── _draft_bbb/
    │   ├── index.md //draftをtrueにすること
    │   └── featured_b.jpg
    ├── bbb-no1/
    │   ├── index.md
    │   └── featured_b.jpg
    ├── bbb-no2/
    │   ├── index.md
    │   └── featured_b.jpg
    └── bbb-no2/
        ├── index.md
        └── featured_b.jpg

この状態でaaaフォルダ内の記事を書く際は、_draft_aaa/フォルダの中身をコピペして、フォルダ名を差し替えれば、featured_a.jpgが入った状態のサムネイルになっている。
特定の記事だけサムネイルを差し替えたければ、コピペ後に、その記事の画像を差し替えれば良い。
bbbフォルダについても同様である。

結果的に全記事にサムネイルを付けることになるが、全記事にユニークな(それぞれ異なる)サムネイルを場合と同様の構成である。

個人サイトでありがちな「公開当初はそのリストのデフォルトサムネイルにしておき、後で記事固有のサムネイルを差し替える」といった場合にも便利な方法である。

また、draftフォルダ内のindex.mdにひな形の文章を書いておけば、テンプレートの様に使える。

ひな形用フォルダに置いてあるindex.mdのフロントマターのdraftをtrueにしておくこと！
(本番用のビルド結果にひな形が混入するため)

ただし、archetypesによるテンプレートと比べ、Hugo new した瞬間に発火させるような関数は使えない。
例えば、archetypesのひな型のフロントマターで「date = "{{ .Date }}"」としておけばHugo newした瞬間の時刻が自動的に挿入された状態でファイルが生成されるが、
この方法は「作成済みファイルのコピペ」になるので、時刻を手打ちする必要がある。

ちなみに、VSCodeの場合「Duplicate action」という拡張機能があり、これを使うと、フォルダをコピーした後にリネームする作業が容易になる。