静的サイトジェネレータHugoを使ったサイト構築（データファイル編）

2016-07-13

静的サイトジェネレータ · Hugo

こんにちは、tamaoki (@t0shiya) です。

今回は、静的サイトジェネレータ Hugo の データファイルついて。

Hugoでは、YAML / JSON / TOML形式で記述したデータをサイトに表示することができます。自社の製品データや販売実績、トピックス等をデータファイルとして保存しておくと、レイアウトやコンテンツに手を入れることなく表示データの更新が可能になります。

使用方法

データファイルは data フォルダに設置します。サブフォルダを作っても良いです。
設置したデータファイルは、テンプレートやショートコードから .Site.Data 変数を介してアクセスできます。
具体的には、.Site.Data に続けてサブフォルダ名、ファイル名を . (ドット)でつなげた変数に格納されます。
サブフォルダ名に . が入っていると変数を参照できなくなるので注意してください。

例えば、日本の祝日リストのデータファイルを作成する場合は以下のようになります。

まず、data/calendar/holidays.toml として祝日データファイルを保存します。

year_2016 = [
"1/1 元日",
"1/11 成人の日",
"2/11 建国記念の日",
...
"12/23 天皇誕生日"
]

上のデータは変数 .Site.Data.calendar.holidays に格納されますので、次のような記述でリストを表示できます。

<ul>
{{ range .Site.Data.calendar.holidays.year_2016 }}
  <li>{{ . }}</li>
{{ end }}
</ul>

Data-driven Content

Hugo ではデータファイルに加え、ローカル環境または外部サーバにある JSON / CSV ファイルをビルド時に自動取得して表示することができます。

データは getJSON, getCSV 関数を使用して取得します。

// JSONの場合
{{ $dataJ := getJSON "url" }}

// CSVの場合
{{ $dataC := getCSV "separator" "url" }}

引数の url はスペース区切りで分割して書くこともできます。例えば

"https://gohugo.io" "/extras" "/datadrivencontent/"

は結合した一つのURL

"https://gohugo.io/extras/datadrivencontent/"

として扱われます。

ローカル環境のファイルを指定する場合は、ファイルをワークフォルダ（hugoのサイトフォルダ）内に置き、url はフォルダ内の相対パスで指定してください。

CSVの場合は次のように行や列を指定して表示します。

<table>
{{ range $i, $r := getCSV "," "http://.../sample.csv” }}
{{ if gt $i 0 }}
<tr>
  <td>{{ index $r 0 }}</td>
  <td>{{ index $r 1 }}</td>
  <td>{{ index $r 2 }}</td>
</tr>
{{ end }}
{{ end }}
</table>

変数 $i には行番号（0始まり）が、$r には各行のデータが格納されます。
データは index 関数を使用して取得します。第１引数は行全体のデータ、第２引数は列番号（0始まり）です。

キャッシュ

リモートデータはビルドまたはプレビュー（ライブリロード）時に取得しています。一度取得したデータはキャッシュされますので注意してください。
キャッシュされたデータはデフォルトでは $TMPDIR/hugo_cache/ に保存されますが、hugo コマンドのオプション --cacheDir でフォルダを変更することもできます。

また、--ignoreCache オプションを使用すると、キャッシュを使用せずビルドの度に毎回取得することもできます。

feedtailor では、静的サイトジェネレータの利用に限らず、ウェブサイト静的化の御相談を承っておりますのでお気軽にお問い合わせください。