Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@nikueaters

Elm向け静的サイトジェネレータをつくった

More than 1 year has passed since last update.

demo(https://siteelm.netlify.com/)
repo(https://github.com/nikueater/siteelm)

Elmだと既に便利なElmstaticがあるのだけど,今回はプロダクトの仕様から静的サイトジェネレータ使いたいけどElmstaticだと向いていないな的なケースだったので,勉強と実用を兼ねていくつか差別化したものを作りました。

普段自分がElmでWebフロントエンドをやる感覚で開発したいけどOGPとかコンテンツの運用周りで静的サイトジェネレータを使いたいなーどうしようかなーなモチベで作っているので,シンプルなつくりにしています。

仕組み

仕組みは単純でです。
変換時にディレクトリ内の記事ファイルを一つずつ見ていき,
ジェネレータはその先頭のPreamble部と本文のBody部を取得します。
そしてそれらをProgram flags model NeverなElmのプログラムにFlagsとして渡し,
実行結果をhtmlとして保存しているだけです(多少加工している)。

ただ,今回は短期間で自由度の高いテンプレートを作りたいと言う業務上の理由から作ったので,いくつか特徴があります。

  1. PreambleはYAML
    1. JSON文字列としてFlagsに渡されるのでJson.Decodeで処理できる
    2. なのでレコードのリストとか複雑なデータを扱える
    3. 外部のYAMLファイルを展開できるので,記事間でデータを共有できる(索引とか)
    4. 自身がどのモジュールに渡されるのかもPreambleに書く
  2. 動的なElmコンポーネントを配置可能
    1. 埋め込みたい場所でdynamic:(略) -> Html Neverを使う
    2. 動的なのも静的サイトと同時にコンパイルして,jsアセットとして出力する
    3. ロードや初期化のコードはsiteelm側が生成する

導入

macOSとUnbutu, NODE_VERSION=v12.2.0で動作確認しています。

% npm init
% npm install -D elm siteelm 
% siteelm init

でプロジェクトが生成されるので,

% siteelm server

で開発サーバを起動すれば, localhost:3000にアクセスできます。
開発サーバなので,src下にある記事ファイル(pages/*.md)やテンプレート(elm/Static/**/*.elm)などを編集すればリビルドされてブラウザがリロードされます。

その他

  • 自分の仕事用に作って使っているので,今後もぼちぼち手を入れていく予定
  • 基本的にElmの開発方針は肯定しているけど,こういうの作るときは"Nativeとか内部のデータ触りたいぜ"って思ってしまう
  • うなぎは二年に一回ほど逢坂山のかねよで食べるのが好きです
5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nikueaters
ビールと肉で動くUIエンジニア。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?