純粋にElmとparcelかなにかで自分のポートフォリオサイトを作ったりするのは割と簡単できるが、もう少し機能を増やしてマークダウンで、ブログの記事を書いたり、ついでに記事にタグ付けをしたりなんかしたいときには、このelmstaticというのがよいかもしれない。ページのレイアウティングやRSSの生成までもしてくれる。
セットアップ
まずはインストール。
$ npm install -g elmstatic
適当にディレクトリをつくりスキャフォールディングする。
$ mkdir mysite $ cd mysite $ elmstatic init
こんな感じのディレクトリ構成になる
$ tree . . ├── _layouts │ ├── Elmstatic.elm │ ├── Page.elm │ ├── Post.elm │ ├── Posts.elm │ ├── Styles.elm │ └── Tag.elm ├── _pages │ ├── about.md │ └── contact.md ├── _posts │ ├── 2019-01-01-using-elmstatic.md │ ├── 2019-01-02-another-post.md │ └── index.md ├── _resources │ ├── img │ │ └── logo.png │ └── styles.css ├── config.json └── elm.json 5 directories, 15 files
自分はグローバルにelmをいれたくないので（バージョン共存のために）npmを使ってelmとhttp-serverをインストールしておく。グローバルにインストールされているなら不要。
$ npm init $ npm install -D elm $ npm install -D http-server
config.jsonというものがディレクトリ直下にあるので、このファイルをいじって以下の設定を追加し、ローカルのElmを使うようにする
+ "elm": "node_modules/.bin/elm",
package.jsonに起動・ビルドコマンドも追加しておこう
+ "build": "elmstatic build", + "start": "http-server _site",
ビルド
上で準備したbuildコマンドを叩く
$ npm run build
起動
ビルドされると_siteディレクトリ配下にビルドされたHTMLファイルが軒並み吐き出される。さきほど準備したstartコマンドで起動する。
$ npm start
