blog

初めての Middleman シリーズ初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    はじめに

    今までMiddlemanには手を付けずにひたすらJekyllばかりいじってました。そんなところに簡単なサイト構築依頼があったのでせっかくだからMiddlemanを使って見ることにしました。

    今回、Middlemanに用意されているスケルトン($ middleman init)を使わずにrbenv, bundlerを使ったMiddleman環境を作ってみたいと思います。とは言ってもMiddlemanを使うのははじめてなのでスケルトンの内容を参考にします。

    ちなみにこの記事はMac環境を前提にしています。

    rbenvでrubyのバージョンを指定する

    まずはruby環境の準備。すでにrbenvやbundlerはインストール済みという前提で進めます。rbenv, bundler環境の構築はこの記事Jekyll × Gruntでブログを作ってみた:環境構築編を参考にしています。

    $ mkdir example.com
    $ rbenv local 2.1.0
    $ rbenv local
    2.1.0
    
    $ ls -a
    .ruby-version
    

    bundlerの準備

    続いてbundlerを使ってGemfileを作る。

    $ bundle init
    Writing new Gemfile to /Users/nukos/Projects/example.com/Gemfile
    

    Gemfileの書き換え

    Gemfileができたらmiddleman本体とlivereload用のモジュールを指定。

    source "https://rubygems.org"
    
    gem 'middleman'
    gem 'middleman-livereload'
    

    モジュールのインストール

    各種モジュールをパスと--binstubsを指定してインストール。--binstubsは以前書いたこの記事$ bundle exec を省略するを参考に設定。

    $ bundle install --path=vendor/bundle --binstubs=vendor/bin
    Fetching gem metadata from https://rubygems.org/.........
    Fetching additional metadata from https://rubygems.org/..
    Resolving dependencies...
    Installing i18n 0.6.11
    Installing json 1.8.2
    Installing minitest 5.5.1
    Installing thread_safe 0.3.4
    Installing tzinfo 1.2.2
    Installing activesupport 4.1.9
    Using bundler 1.7.6
    Installing hitimes 1.2.2
    Installing timers 4.0.1
    Installing celluloid 0.16.0
    Installing chunky_png 1.3.3
    Installing coffee-script-source 1.9.0
    Installing execjs 2.2.2
    Installing coffee-script 2.3.0
    Installing multi_json 1.10.1
    Installing sass 3.4.11
    Installing compass-core 1.0.3
    Installing compass-import-once 1.0.5
    Installing rb-fsevent 0.9.4
    Installing ffi 1.9.6
    Installing rb-inotify 0.9.5
    Installing compass 1.0.3
    Installing eventmachine 1.0.4
    Installing http_parser.rb 0.6.0
    Installing em-websocket 0.5.1
    Installing erubis 2.7.0
    Installing tilt 1.4.1
    Installing haml 4.0.6
    Installing hike 1.2.3
    Installing uber 0.0.13
    Installing hooks 0.4.0
    Installing kramdown 1.5.0
    Installing listen 2.8.5
    Installing padrino-support 0.12.4
    Installing padrino-helpers 0.12.4
    Installing rack 1.6.0
    Installing rack-test 0.6.3
    Installing thor 0.19.1
    Installing middleman-core 3.3.7
    Installing sprockets 2.12.3
    Installing sprockets-helpers 1.1.0
    Installing sprockets-sass 1.3.1
    Installing middleman-sprockets 3.4.1
    Installing uglifier 2.7.0
    Installing middleman 3.3.7
    Installing rack-livereload 0.3.15
    Installing middleman-livereload 3.4.2
    Your bundle is complete!
    It was installed into ./vendor/bundle
    Post-install message from compass:
        Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!
    Post-install message from haml:
    
    HEADS UP! Haml 4.0 has many improvements, but also has changes that may break
    your application:
    
    * Support for Ruby 1.8.6 dropped
    * Support for Rails 2 dropped
    * Sass filter now always outputs <style> tags
    * Data attributes are now hyphenated, not underscored
    * html2haml utility moved to the html2haml gem
    * Textile and Maruku filters moved to the haml-contrib gem
    
    For more info see:
    
    http://rubydoc.info/github/haml/haml/file/CHANGELOG.md
    

    これで$ middleman build$ middleman serverコマンドが使えるようになる。

    コンフィグファイルを用意する

    Middlemanの処理に関するコンフィグファイルconfig.rbを用意します。今の段階ではとりあえず何も記述せずに空で大丈夫です。

    主要なディレクトリ

    Middlemanは主に4つのディレクトリでファイルを管理していきます。それぞれの用途は以下の通りです。

    • source:ビルドされる前のHTMLやCSS,JS等のソースファイルを入れる
    • build:ビルドされたファイルの出力先
    • data:ローカルデータ機能で使うデータファイルを入れる
    • lib:外部モジュールを入れる(プラグイン)

    Hello Worldを表示してみる

    ソースファイルを用意して「Hello World」をブラウザに表示してみます。
    ブラウザでHello Worldを表示するためにindex.htmlを作りますが、Middlemanに処理させるために.erbという拡張子を持ったindex.html.erbファイルをsourceディレクトリの中に作ります。.erbとはembedded Rubyの略でHTMLの中にRubyの記述を埋め込むことができます。一番右端の拡張子.erbが付いたファイルはMiddlemanで処理され、1つ目の拡張子(.html)のファイルにコンパイルされます。

    index.html.erb

    簡単なHTMLを書いて保存します。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>test</title>
      <link rel="stylesheet" href="">
    </head>
    <body>
      <p>Hello World</p>
    </body>
    </html>
    

    ビルドしてみる

    ビルドを実行してみます。ビルドに成功すればbuildフォルダにindex.htmlができているはずです。

    $ middleman build
          create  build/index.html
    

    ビルドに成功し、index.htmlが作られました。

    簡易的なHTTPサーバーを起動しHello Worldを表示する

    次にサーバーコマンド($ middleman server)を使ってブラウザからindex.htmlにアクセスしてみます。

    $ middleman server
    == The Middleman is loading
    == LiveReload accepting connections from http://192.168.1.47:35729
    == The Middleman is standing watch at http://0.0.0.0:4567
    == Inspect your site configuration at http://0.0.0.0:4567/__middleman/
    

    ブラウザからhttp://localhost:4567/にアクセスしてみてください。「Hello World」が表示されれば成功です。

    serverを止める

    サーバーを止めるには起動中のTerminal画面でcontorol + Cを押します。

    ^C== The Middleman is shutting down
    

    これで、Webサーバーが停止します。
    今回はここまで。次回はレイアウトとデータを分けてみます。

    初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する

    シリーズ

    1. 初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman:パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman:サイトにブログ機能を追加する
    8. 初めてのMiddleman:Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman:HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman:設定について
    11. 初めてのMiddleman:静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman:Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman:Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman:Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman:スケルトンを自作する方法
    17. 初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman:Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman:RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman:Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman:Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman:Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman:Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman:Bowerで管理されているフォントファイルをインポートする

    コメント・フィードバック