静的サイトジェネレータ（Static Site Generator, 以下 SSG）はご存知でしょうか？ブログやWebサイトの作成用途でMarkdownをもとにHTMLを出力する、というのが基本的な機能です。最近だと、Gatsby の名前がよく挙がりますね。
Elm向けのSSGもいくつかあるので、今回は私が実際に使ってみた3種類を紹介します。
※「Elm製」のSSGではないのでご注意ください
Elm向け静的サイトジェネレータで嬉しいこと
メタデータの読み込み／テンプレートの定義／機能追加 の記述をElmで完結できます。
私たちは日常的に Decoder や view 関数を Elm で書いています。
それは少し面倒くさいことかもしれませんが、それぞれのインターフェイスを自由にコントロールできる利点は大きく、Elmのアプリケーションを作るいつもの感覚で書き進めることが可能です。
小さなElmアプリケーションからSSGへの移行も、SSGからより大きなSPAへの発展も、変更差分を小さく抑えつつ行き来することができます。
もちろん、型の恩恵や Elm Packages による拡張性も普段と同じです。
好きな Markdown / CSS パッケージを組み合わせて、君だけのSSGを作ろう！
3種類のElm向け静的サイトジェネレータ
Elmstatic / Siteelm / elm-pages の3種類を比較してみましょう。
| ElmStatic | Siteelm | elm-pages | |
|---|---|---|---|
| 公開年 | 2018 | 2019 | 2019 |
| バージョン（npm） | v0.7.2 | v0.3.2 | v1.5.4 |
| ページごとのOGP | ○ | ○ | ○ |
| RSS生成 | ○ | - | ○ |
| Elmアプリケーションの埋め込み | - | ○ | - |
| 最適化・高速化 | - | - | ○ |
Elmstatic
簡易なブログを作るのであれば、最もシンプルに始めることができます。
ページごとのOGP作成にも対応しており、必要十分といった印象です。
【注意】
elmstatic init で展開されるサンプルコードは elm-css を用いてスタイリングされています。
通常のCSSでスタイリングしたい場合は _resources/style.css に記述してください。
もちろん、elm-ui に置き換えることも可能です。
（あまりElmstaticを使ったことがないので、説明はこれくらいで）
- Elmstatic: an Elm-to-HTML static site generator | Korban.net
- Introducing Elmstatic: an Elm-to-HTML static site generator | Korban.net
- Elmstatic | Jamstack
- elmstaticを使って静的サイトをElmでつくる - Runner in the High
Siteelm
Elmstatic よりも自由度の高いものを作るために開発されました。
ElmのテンプレートをもとにHTMLのページを出力する基本機能に加え、Elmのアプリケーション（Browser.element相当）をページに埋め込む機能を持っています。
また、「メタデータの decoder」と「view のテンプレート」が同じファイルに含まれていることによる書き味の良さも特徴です。
※モジュール構成はビルド可能な範囲でユーザが好き勝手に改変できます
私自身のサイトでも、OGP用の関数を追加するなどカスタマイズして使っていました。
（2020/11/28時点でのスナップショット）
elm-pages
RSSの生成、PWAの設定、sitemap.xmlの作成、アセットの最適化、読み込みの高速化などなど...機能たっぷりのSSGです。
実際に使ってみると、たしかにページ間を遷移する際の待ち時間が短いように感じました。
静的なHTMLでこの速度を得られるのは嬉しいですね。
高速化の仕組みについては ここ に書かれているようです。
elm-pages は他の2つと比べてより強い制約があり、画像や執筆者の指定ミスなどもチェックしてくれます。コードを書き換えてチェックを省略することもできますが、その制約を「強すぎる」と感じることもありました。私自身まだ使い始めたばかりなので、資料やコードをしっかり読み込んで使いこなしたいと思います。
【注意】
Quick Start で紹介されている elm-pages-starter は、elm-ui を用いてスタイリングされています。通常のCSSでスタイリングしたい場合は style.css に記述してください。（私自身は、elm-ui を elm-css に書き換えて使っています）
- elm-pages - a statically typed site generator
- Introducing elm-pages 🚀 - a type-centric static site generator
- elm-pages 7.0.0 | Elm Packages
- Twitter (@elm_pages)
- elm-pages | Jamstack
おしまい
Elm-jp（ https://elm-lang.jp ）の更新作業で色々調べたのでまとめました。
好きなもの（目的に合ったもの）を使いましょう。