こんにちは、tamaoki (@t0shiya) です。
今回は、静的サイトジェネレータ Hugo の URL について。
Hugoのデフォルト設定では、URLはコンテンツの配置によって決まりますが、フロントマターのパラメータで指定のURLに変更したり、エイリアスを配置することができます。
URLの変更(ページ単位)
デフォルト設定では content/post/sample.md から以下のページが生成されます。
public/post/sample/index.html // URL: [baseurl]/post/sample/
// uglyURLs オプションが true の場合
public/post/sample.html // URL: [baseurl]/post/sample.html
任意のパスに変更したい場合は、フロントマターの url パラメータを使用します。
content/post/sample.md
---
// YAML形式の場合
url: a/b/c
....
---
生成されるページは public/a/b/c/index.html (または public/a/b/c.html) です。
url パラメータについては レイアウト編３ を参照してください。
URLの変更(セクション単位)
config.toml の permalinks 設定を使用すると SECTION (コンテンツが置かれたフォルダの１階層目)単位で URL のパターンを指定する事ができます。
[permalinks]
post = "/:year/:month/:title/"
左辺がセクション名で右辺がURLパターンです。
URLパターンで使用できるパラメータは以下の通りです。
| :year | 年：数字4桁 | |
|---|---|---|
| :month | 月：数字2桁 | |
| :monthname | 月名：January, February ... December | |
| :day | 日：数字2桁 | |
| :weekday | 曜日：日曜=0, 月曜=1 ... 土曜=6 | |
| :weekdayname | 曜日名：Sunday, Monday ... Saturday | |
| :yearday | 年の日：1月1日=1, 1月2日=2 ... 12月31日=365 (or 366) | |
| :section | コンテンツのsection | |
| :title | コンテンツのtitle | |
| :slug | コンテンツのslug（なければtitle） | |
| :filename | コンテンツのファイル名（拡張子なし） |
エイリアス
サイトを移行したりHugoでリプレースした時、旧サイトとURLが変わってしまい、旧URLから新URLへリダイレクトしたい事があります。
alias パラメータを使用すると、旧URLにリダイレクト用ページを生成する事ができます。
リダイレクト先コンテンツのフロントマターに次のような設定を追加します。
---
// YAML形式の場合
aliases:
- a/b/c.html // 拡張子まで指定する
- d/e/ // 複数指定可能
...
上記の設定を追加すると、新URLのコンテンツに変更はありませんが、旧URLにリダイレクトするための以下のようなページが生成されます。
旧URLにアクセスすると 0 秒後に新URLにリダイレクトします。
<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="リダイレクト先コンテンツのURL"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="refresh" content="0;url=リダイレクト先コンテンツのURL"/>
</head>
</html>
クロスリファレンス
任意のコンテンツに対するURLを生成したい場合は ref または relref ショートコードを使用するのが便利です。
ref は指定したコンテンツの絶対パス、relref は相対パスを生成します。
ショートコードを使用して以下のように記述します。
{{< ref "post/sample.md" >}} => [baseurl]/post/sample/
{{< ref "sample.md" >}} => [baseurl]/post/sample/
{{< relref "post/sample.md" >}} => /post/sample/
{{< relref "sample.md" >}} => /post/sample/
{{< relref "sample.md#top" >}} => /post/sample/#top
上の２番目、４番目のようにフォルダ名は省略可能ですが、同一ファイル名のコンテンツが複数存在する場合には結果は保証されませんので注意してください。
５番目のように anchor 付きでも指定できます。
feedtailor では、静的サイトジェネレータの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にお問い合わせください。