1. nikueaters

    No comment

    nikueaters
Changes in body
Source | HTML | Preview
@@ -1,63 +1,60 @@
<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/)で食べるのが好きです