elm-pages を触ってみる

elm-pages について

elm-pages とは Elm を使用した静的サイトジェネレータです。

elm-pagesを始める

$ npx elm-pages init my-project
...
$ cd my-project
$ npm install
...
$ npm start

> start
> elm-pages dev

Ran elm make .elm-pages/TemplateModulesBeta.elm in 2876ms
Ran elm make ./.elm-pages/TemplateModulesBeta.elm in 2897ms
elm-pages dev server running at <http://localhost:1234>
...

ターミナルに表示されている <http://localhost:1234> にアクセスしてみると Index と表示されていると思います。

ページを追加する

$ npx elm-pages add NewPage
$

src/Pages/配下に　NewPage.elmという新しいファイルが追加されます。

先ほどと同じように npm start でサーバーを起動させ、<http://localhost:1234/new-page> にアクセスすると　NewPage と表示されるページが出来上がります。

src/Pages/NewPage.elm の view 関数が表示を作る関数です。
以下のように変更することで表示される値を変更することができます。

src/Pages/NewPage.elm

view :
    Maybe PageUrl
    -> Shared.Model
    -> StaticPayload Data RouteParams
    -> View Msg
view maybeUrl sharedModel static =
    View.placeholder "Hello, World!"

このように修正することで<http://localhost:1234/new-page>のページに Hello, World! と表示されます。