今回はMiddlemanを学習していきました。

Middleman とは モダンな web 開発環境のすべてのショートカットやツールを使用して静的 web サイトを作成するためのコマンドラインツールです。（コピペ） 詳しくは下記参照 http://middlemanapp.com/ http://middleman-guides.e2esound.com/

以下、手順

1.middlemanをインストール

$ gem install middleman

2.プロジェクトのスケルトンを作成

$ middleman init [project-name]

生成されるプロジェクトツリー

first-middleman
├── .bundle/
│   └── config
├── .gitignore
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source/
    ├── images/
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts/
    │   └── all.js
    ├── layouts/
    │   └── layout.erb
    └── stylesheets/
        ├── all.css
        └── normalize.css

3.サーバーの起動

$ cd [project-name]
$ middleman server

middleman単独でもいける。

$ middleman

4.ブラウザでhttp://0.0.0.0:4567へアクセス こんな感じに表示される。

5.ビルド

$ cd [project-name]
$ middleman build

ビルド後のproject-tree

first-middleman
├── .bundle/
│ └── config
├── .gitignore
├── Gemfile
├── Gemfile.lock
├── build/
│ ├── images/
│ │ ├── background.png
│ │ └── middleman.png
│ ├── index.html
│ ├── javascripts/
│ │ └── all.js
│ └── stylesheets/
│     ├── all.css
│     └── normalize.css
├── config.rb
└── source/
    ├── images/
    │ ├── background.png
    │ └── middleman.png
    ├── index.html.erb
    ├── javascripts/
    │ └── all.js
    ├── layouts/
    │ └── layout.erb
    └── stylesheets/
        ├── all.css
        └── normalize.css

一度buildしてserver起動している状態で、source内のファイルの変更は即適用されるようだ。

middlemanでブログを作る方法

1.Gemfileでgemを指定して

gem "middleman-blog", "~>3.1.1"

bundle installする。

$ bundle install

若しくは、単独でgem install

$ gem install middleman-blog

次に, config.rb で拡張を有効化する。

activate :blog do |blog|
  # ブログ機能のオプションを設定
end

2.initするときに最初っからブログテンプレートをつけてしまう。

$ middleman init [project-name] --template=blog

生成されるブログはこんな感じ。

ブログの記事について source直下に、下記のような名前でマークダウン形式のファイルが生成される。 /source/2012-01-01-example-article.html.markdown ファイルの置き場が気持ち悪い場合は、config.rbの下記の箇所のコメントアウトを外す。

# blog.prefix = "blog"

/source/blog/のようにsourceの下にblogのディレクトリを作って、先ほどのマークダウンのファイルを格納するだけでいい。

Compass & Sass について middleman initするだけでcompassもsassもインストールされる。 気をつけるのはsassファイルの置き場と拡張子だけ。 /source/stylesheets/の下にstyle.css.sassのようなファイル名で配置してあげると良い。 compass使う場合も、sassファイルの先頭で@import compassを宣言するのみなので、通常通り。

LiveReload LiveReloadは便利なやつ。css編集して保存するとブラウザで変更箇所がオートリロードしてくれるので素敵。（sassで書いた場合はbuildしないと駄目だけど。→リンクヘルパー使えばいけるか？後ほど検証します。→検証しました。） blogの時と同様に、Gemfileでgemを指定してbundle installする。

gem "middleman-livereload", "~>3.0.1"

$ bundle install

config.rbで下記を記述し有効化する。

activate :livereload

あとはブラウザにLiveReloadのextentionを入れておけばOK。 最後に、サーバーを再起動してブラウザを見ながらエディタでcssなどを編集してLiveReloadを体感する。

今日はここまで。長くなったので記事分割した方が良かった気がする。 一番よくわかってないerb周りのことは後回しにしてしまったので、次回そのあたりを学習します。