HugoでJSONを出力
2017-11-07
サイトの記事データをJSONで出力したい。手作業は大変。CMSを設置するのも億劫。 ということで、Hugoで出力するようにしました。
前提
- macOS Sierra
- HomebrewでHugo インストール済み
やりたいこと
MarkDownで書いた記事データをJSONで出力する。
Hugoにした理由
他の静的サイトジェネレータをいくつか試したのですが、次のような印象でした。
- Middleman
- うまくテンプレートでJSON出力できなかった。
- Jekyll
- ページ一覧をJSON出力する際、list.jsonという出力ファイル名を作れなかった。
- Hexo
- こちらも、ページ一覧をJSON出力する際、list.jsonというファイル名を作れなかった。
メモを破棄したため正直なところ空覚えなのと、あまり深く確認せず試していたので、間違っているかもしれません。 予めご容赦ください。
手順
手順は次のとおりです。
- config.tomlでJSONを出力するように設定。
- 出力したい内容となるようにJSON出力用テンプレートを調整。
- hugoで出力。
1. config.tomlでJSONを出力するように設定
記事データをすべてJSON出力したいので、sectionページタイプの出力フォーマットにJSONを追加します。
config.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
[outputs]
section = ["JSON", "HTML"]
2. 出力したい内容となるようにJSON出力用テンプレートを調整
JSON出力用テンプレートを作成します。 postsディレクトリ下に記事データを入れるようにしたので、テンプレートはposts/list.jsonとして作成します。
posts/list.json
{% raw %}
{
"posts": [
{{ $list := .Data.Pages -}}
{{ $len := (len $list) -}}
{{ if lt 0 $len -}}
{{ range first 1 $list -}}
{
"id" : {{ .Date.Format "20060102150405" | jsonify }},
"date" : {{ if .Date }}{{ .Date.Format "2006.01.02" | jsonify }}{{else}}""{{end}},
"title" : {{ .Title | jsonify }},
"summary" : {{ .Summary | jsonify }},
"body" : {{ .Content | jsonify }},
"tags" : {{ if .Params.tags }}{{ .Params.tags | jsonify }}{{ else }}[]{{ end }},
"some-ex-param" : {{ if .Params.someexparam }}{{ .Params.someexparam | jsonify }}{{ else }}false{{ end }}
}
{{- end -}}
{{- end -}}
{{- if lt 1 $len -}}
{{- range after 1 $list -}}
,{
"id" : {{ .Date.Format "20060102150405" | jsonify }},
"date" : {{ if .Date }}{{ .Date.Format "2006.01.02" | jsonify }}{{else}}""{{end}},
"title" : {{ .Title | jsonify }},
"summary" : {{ .Summary | jsonify }},
"body" : {{ .Content | jsonify }},
"tags" : {{ if .Params.tags }}{{ .Params.tags | jsonify }}{{ else }}[]{{ end }},
"some-ex-param" : {{ if .Params.sameexparam }}{{ .Params.sameexparam | jsonify }}{{ else }}false{{ end }}
}
{{- end -}}
{{- end }}
]
}
{% endraw %}
3. hugoで出力
# 実行
$ hugo
次のようなファイルができていれば完成です。
index.json
{
"posts": [
{
"id": "20171004010101",
"date": "2017.10.04",
"title" : "Post4",
"summary": "etc4 etc4\u0026hellip;",
"body": "\u003cp\u003eetc4 etc4\u0026hellip;\u003c/p\u003e\n",
"tags": [],
"some-ex-param": "test4"
}, {
"id": "20171003010101",
"date": "2017.10.03",
"title": "Post3",
"summary" : "etc3 etc3\u0026hellip;",
"body": "\u003cp\u003eetc3 etc3\u0026hellip;\u003c/p\u003e\n",
"tags": [],
"some-ex-param": false
}, {
"id": "20171002010101",
"date": "2017.10.02",
"title": "Post2",
"summary" : "etc2 etc2\u0026hellip;",
"body": "\u003cp\u003eetc2 etc2\u0026hellip;\u003c/p\u003e\n",
"tags": [],
"some-ex-param": false
}, {
"id": "20171001010101",
"date": "2017.10.01",
"title": "Post1",
"summary" : "etc1 etc1\u0026hellip;",
"body": "\u003cp\u003eetc1 etc1\u0026hellip;\u003c/p\u003e\n",
"tags": [],
"some-ex-param": false
}
]
}
補足
Hugoは、“list"というテンプレート名を持つものを一覧ページのテンプレートと認識します。 一覧ページのテンプレートについて
最初、この仕様の理解ができておらず、手間取りました。 とほほ……
静的サイトジェネレータはWebサイトの作成を目的としなくても、こういったシードデータの作成にも使えて便利ですね。