1. nikueaters

    Posted

    nikueaters
Changes in title
+Elm向け静的サイトジェネレータをつくった
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,63 @@
+
+<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481582/a3b30fa1-22a2-2e4f-52ca-b84c69101e1f.png" width="320" alt="">
+
+
+
+**demo(https://siteelm.netlify.com/)**
+**repo(https://github.com/nikueater/siteelm)**
+
+<font color="OrangeRed">2019/09/29時点ではα版(0.1.4)</font>
+
+
+
+Elmだと既に便利な[Elmstatic](https://github.com/alexkorban/elmstatic)があるのだけど,今回はプロダクトの仕様から静的サイトジェネレータ使いたいけどElmstaticだと向いていないな的なケースだったので,勉強と実用を兼ねていくつか差別化したものを作りました。
+
+普段自分がElmでWebフロントエンドをやる感覚で開発したいけどOGPとかコンテンツの運用周りで静的サイトジェネレータを使いたいなーどうしようかなーなモチベで作っているので,シンプルなつくりにしています。
+
+
+## 仕組み
+
+仕組みは単純でです。
+変換時にディレクトリ内の記事ファイルを一つずつ見ていき,
+ジェネレータはその先頭の_Preamble_部と本文の_Body_部を取得します。
+そしてそれらを`Program flags model Never`なElmのプログラムに_Flags_として渡し,
+実行結果をhtmlとして保存しているだけです(多少加工している)。
+
+<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481582/90681b3a-b10b-a32a-dad0-a6937c388cb3.png" width="480" alt="">
+
+
+ただ,今回は短期間で自由度の高いテンプレートを作りたいと言う業務上の理由から作ったので,いくつか特徴があります。
+
+ 1. _Preamble_はYAML
+ 2. JSON文字列としてFlagsに渡されるので`Json.Decode`で処理できる
+ 3. なのでレコードのリストとか複雑なデータを扱える
+ 4. 外部のYAMLファイルを展開できるので,記事間でデータを共有できる(索引とか)
+ 5. 自身がどのモジュールに渡されるのかも_Preamble_に書く
+ 1. 動的なElmコンポーネントを配置可能
+ 2. 埋め込みたい場所で`dynamic:(略) -> Html Never`を使う
+ 3. 動的なのも静的サイトと同時にコンパイルして,jsアセットとして出力する
+ 4. ロードや初期化のコードはsiteelm側が生成する
+
+
+
+## 導入
+macOSとUnbutu, NODE_VERSION=v12.2.0で動作確認しています。
+
+```sh
+% npm init
+% npm install -D elm siteelm
+% siteelm init
+```
+でプロジェクトが生成されるので,
+
+```sh
+% siteelm server
+```
+
+で開発サーバを起動すれば, _localhost:3000_にアクセスできます。
+開発サーバなので,src下にある記事ファイル(_pages/\*.md_)やテンプレート(_elm/Static/**/\*.elm_)などを編集すればリビルドされてブラウザがリロードされます。
+
+## その他
+- 自分の仕事用に作って使っているので,今後もぼちぼち手を入れていく予定
+- 基本的にElmの開発方針は肯定しているけど,こういうの作るときは"Nativeとか内部のデータ触りたいぜ"って思ってしまう
+- うなぎは二年に一回ほど[逢坂山のかねよ](http://www.kaneyo.in/)で食べるのが好きです