Elixir フレームワーク Serumの環境構築

12/1 一部内容を更新

ElixirのフレームワークでPhoenix以外ににSerumというのがあるというのを聞いて
環境構築までですが解説します。

Serumは聞いたレベルの話ではPhoenixに近いフレームワークだそうです。
今回は以下の環境を前提でお話しします。

• Elixir 1.9.4
• Erlang OTP 21（最初22で試してできていたのでたぶん大丈夫です。）
• asdf
• Serum 1.3.0

#環境構築

まずserum（1.3.0）をインストールします。

$ mix archive.install hex serum_new

すると以下の内容が実行されます。

serum_new (Hex package)
All dependencies are up to date
Compiling 4 files (.ex)
Generated serum_new app
Generated archive "serum_new-1.2.0.ez" with MIX_ENV=prod
Are you sure you want to install "serum_new-1.2.0.ez"? [Yn] Y
* creating /${Userspath}/.asdf/installs/elixir/1.9.0-otp-22/.mix/archives/serum_new-1.2.0

プロジェクトを作成します。

$ mix serum.new sample

* creating sample
* creating assets/css
* creating assets/images
* creating assets/js
* creating includes
* creating media
* creating pages
* creating posts
* creating templates
* creating .formatter.exs
* creating .gitignore
* creating mix.exs
* creating serum.exs
* creating includes/nav.html.eex
* creating templates/base.html.eex
* creating templates/list.html.eex
* creating templates/page.html.eex
* creating templates/post.html.eex
* creating pages/index.md
* creating posts/2019-01-01-sample-post.md

Successfully created a new Serum project!
To test your new project, start the Serum development server:

    cd sample
    mix deps.get
    mix serum.server [--port PORT]

Run "mix help serum" for more Serum tasks.

上記の指示に従って実行します。
ドキュメントではコンパイルもしてるのでこれもついでに実行します。

$ cd sample
$ mix do deps.get, deps.compile

そうすると以下の内容が実行されます。（途中省略）

Resolving Hex dependencies...
Dependency resolution completed:
New:
  certifi 2.5.1
  combine 0.10.0
  cowboy 2.7.0
  cowlib 2.8.0
  earmark 1.4.2
  file_system 0.2.7
  floki 0.23.0
  gettext 0.17.0
  hackney 1.15.2
  html_entities 0.4.0
  idna 6.0.0
  metrics 1.0.1
  microscope 1.3.0
  mime 1.3.1
  mimerl 1.2.0
  parse_trans 3.3.0
  ranch 1.7.1
  serum 1.2.0
  ssl_verify_fun 1.1.5
  timex 3.6.1
  tzdata 1.0.2
  unicode_util_compat 0.4.1
* Getting serum (Hex package)
* Getting earmark (Hex package)
* Getting file_system (Hex package)
* Getting floki (Hex package)
...

Compiling 2 files (.ex)
Generated mime app
==> microscope
Compiling 9 files (.ex)
Generated microscope app
==> serum
Compiling 55 files (.ex)
Generated serum app

無事終わったらビルドをします。

$ mix serum.build

途中省略

Generated sample app
Serum -- Yet another simple static website generator
Version 1.2.0. Copyright (C) 2019 Dalgona. <[e-mail]>

 PLUGIN  Inject Live Reloader Script v1.0.0 (Serum.Plugins.LiveReloader)
         Injects the live reloader script at the end of all HTML files for use in the Serum development server.
  MKDIR  /${userpath}/elixir/sample/site
   INFO  Loading template files...
   READ  /${userPath}/elixir/sample/templates/base.html.eex
   READ  /${userPath}/elixir/sample/templates/list.html.eex
   READ  /${userPath}/elixir/sample/templates/page.html.eex
   READ  /${userPath}/elixir/sample/templates/post.html.eex
   ....  
   INFO  Copying assets and media...

Your website is now ready!
Copy(or move) the contents of `/${userPath}/elixir/sample/site` directory
into your public webpages directory.

無事終わったら　serum.server を実行します

$ mix serum.server

途中省略

erum -- Yet another simple static website generator
Version 1.2.0. Copyright (C) 2019 Dalgona. <[e-mail]>

 PLUGIN  Inject Live Reloader Script v1.0.0 (Serum.Plugins.LiveReloader)
         Injects the live reloader script at the end of all HTML files for use in the Serum development server.
  MKDIR  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V
   INFO  Loading template files...
   ....
   INFO  Compiling templates...
   INFO  Processing page files...
   INFO  Processing post files...
   INFO  Generating post lists...
   INFO  Generating fragments...
   INFO  Generating complete HTML pages...
   INFO  Writing output files...
  MKDIR  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/posts
  MKDIR  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/tags/hello
  MKDIR  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/tags/sample
  MKDIR  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/posts/index.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/posts/page-1.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/tags/hello/index.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/tags/hello/page-1.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/tags/sample/index.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/tags/sample/page-1.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/index.html
    GEN  /var/folders/8n/xcsh_qc9513b4xh6zxlk49x80000gn/T/serum_vFMM0V4V/posts/2019-01-01-sample-post.html
   INFO  Copying assets and media...
[ * ] The HTTP server is listening on port 8080.
8080> 
12:24:39.084 [debug] Tzdata polling for update.
8080> 

因みにここで 8080> がでたところでhelpを実行すると
以下が表示されます。

8080> help        
Available commands are:
  help   Displays this help message
  build  Rebuilds the project
  quit   Stops the server and quit
8080> 

基本使うのはプロジェクトを更新した場合に build するのと
サーバーを止めて終了する quit くらいです。

8080>の状態で http://localhost:8080 にアクセスするとこんな画面が現れます。

あとついでに見た目を整えます。
下記のファイルのdefp deps doの中を追記します。

mix.exs

defp deps do
    [
      {:serum, "~> 1.3"},
      {:serum_theme_essence, "~> 1.0"}
    ]
end

追記したら下記のコマンドを実行します。

$ mix deps.get

先ほど追記したSerum.Themes.Essenceを使用するのでthemeを追記します。

serum.exs

%{
  site_name: "SerumSample",
  site_description: "TODO: Add site description",
  date_format: "{WDfull}, {D} {Mshort} {YYYY}",
  base_url: "/",
  author: "John Doe",
  author_email: "[e-mail]",
  plugins: [
    {Serum.Plugins.LiveReloader, only: :dev}
  ],
  theme: Serum.Themes.Essence
}

あとはtemplatesは使用しないので削除します。
それで再度起動します。

$ mix serum.server

この画面が出たら土台は完成です。

まだここまでしか試してないため
これ以降についてはドキュメントを参照してみて下さい。

気が向いたら続きを書きます。