Middleman 4 の新機能を試す シリーズMiddleman 4 をインストールしてみる

はじめに

未だに ver 3.x の Middleman を使っているのですが、そろそろ ver4.x も落ち着いて使えるようになった頃だと思うのでインストールから始めようと思います。

環境について

rbenvやbundlerがすでにインストールされている前提で話しを進めます。

インストール

Gem

bundlerを使ってGemをインストールします。

$ mkdir mm4
$ cd mm4
$ bundle init
Writing new Gemfile to /Users/rin/Projects/mm4/Gemfile

Middlemanのインストール

Gemfile を開いてgemを追記します。

source 'https://rubygems.org'

gem 'middleman'

保存できたら $ bundle install --path=vendor/bundle --binstubs=vendor/bin でMiddlemanをインストール。

Middlemanの初期化

Middlemanのインストールが完了したら init します。

$ middleman init
run  git clone --depth 1 https://github.com/middleman/middleman-templates-default.git /var/folders/h2/x9673n8j4hv3wwsl7w87qcsh0000gn/T/d20160913-3607-dzgq5b from "."
Cloning into '/var/folders/h2/x9673n8j4hv3wwsl7w87qcsh0000gn/T/d20160913-3607-dzgq5b'...
remote: Counting objects: 22, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 22 (delta 0), reused 14 (delta 0), pack-reused 0
Unpacking objects: 100% (22/22), done.
Checking connectivity... done.
       exist
      create  .gitignore
    conflict  Gemfile
Overwrite /Users/rin/Projects/mm4/Gemfile? (enter "h" for help) [Ynaqdh] Y
       force  Gemfile
      create  config.rb
      create  source/images/middleman-logo.svg
      create  source/index.html.erb
      create  source/javascripts/all.js
      create  source/layouts/layout.erb
      create  source/stylesheets/_normalize.scss
      create  source/stylesheets/site.css.scss
Do you want to use Compass? n
Do you want to use LiveReload? y
      insert  Gemfile
      insert  config.rb
      insert  Gemfile
Do you want a Rack-compatible config.ru file? n
         run  bundle install from "."
Could not find gem 'middleman-livereload' in any of the gem sources listed in your Gemfile or available on this machine.
Run `bundle install` to install missing gems.

もう一度 $ bundle install します。

Serverの立ち上げ

$ middleman server でサーバーが立ち上がり、ブラウザで http://127.0.0.1:4567/ にアクセスしてサイトが表示されれば成功。

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）