blog

初めての Middleman シリーズ初めてのMiddleman:スケルトンを自作する方法

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

    Middlemanの使い方にも慣れてきたので、自作のスケルトンを作る方法について調べてみた。

    準備

    まずはスケルトンを動かすためのMiddleman環境を作ります。Ruby環境に加えrbenv, bundlerが使えることを前提としたインストール方法になります。

    $ mkdir middleman.skeleton
    $ cd middleman.skeleton
    $ rbenv local 2.1.0
    $ bundle init
    Writing new Gemfile to /Users/nukos/Projects/Labs/middleman.skeleton/Gemfile
    

    Gemfile

    Gemfileを書き換えます。

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

    Gemのインストール

    Gemをインストールします。モジュール類はローカルにインストールしたいので--pathを指定、bundle execを省略できるよう--binstubsを指定します。budle 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.7.0
    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.4
    Installing coffee-script-source 1.9.1
    Installing execjs 2.3.0
    Installing coffee-script 2.3.0
    Installing multi_json 1.10.1
    Installing sass 3.4.13
    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.7
    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.10
    Installing sprockets 2.12.3
    Installing sprockets-helpers 1.1.0
    Installing sprockets-sass 1.3.1
    Installing middleman-sprockets 3.4.2
    Installing uglifier 2.7.0
    Installing middleman 3.3.10
    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を動かす環境はできました。

    スケルトンを作る

    わかりやすいよう最低限必要なファイルだけ用意します。

    サンプルはgithubに上げておいたので参考までにどうぞ。cloneして使ってもらっても構いません。 https://github.com/nukos/middleman.skeleton

    スケルトンとして使えるようにする

    スケルトンとして使えるようにするには~/.middlemanというディレクトリを作り、上記で作成したスケルトンをクローンします。

    $ mkdir ~/.middleman
    $ cd ~/.middleman
    $ git clone https://github.com/nukos/middleman.skeleton
    $ ls
    middleman.skeleton
    

    スケルトンを使って見る

    スケルトンを使うには先ほど.middlemanにクローンしたスケルトンのディレクトリ名を--template=middleman.skeletonと指定し、initを実行します。

    $ middleman init example.project --template=middleman.skeleton
          create  example.project/Gemfile
             run  bundle install from "."
    Using i18n 0.7.0
    Using json 1.8.2
    Using minitest 5.5.1
    Using thread_safe 0.3.4
    Using tzinfo 1.2.2
    Using activesupport 4.1.9
    Using hitimes 1.2.2
    Using timers 4.0.1
    Using celluloid 0.16.0
    Using chunky_png 1.3.4
    Using coffee-script-source 1.9.1
    Using execjs 2.3.0
    Using coffee-script 2.3.0
    Using multi_json 1.10.1
    Using sass 3.4.13
    Using compass-core 1.0.3
    Using compass-import-once 1.0.5
    Using rb-fsevent 0.9.4
    Using ffi 1.9.6
    Using rb-inotify 0.9.5
    Using compass 1.0.3
    Using erubis 2.7.0
    Using tilt 1.4.1
    Using haml 4.0.6
    Using hike 1.2.3
    Using uber 0.0.13
    Using hooks 0.4.0
    Using kramdown 1.5.0
    Using listen 2.8.5
    Using bundler 1.7.6
    Using padrino-support 0.12.4
    Using padrino-helpers 0.12.4
    Using rack 1.6.0
    Using rack-test 0.6.3
    Using thor 0.19.1
    Using middleman-core 3.3.10
    Using sprockets 2.12.3
    Using sprockets-helpers 1.1.0
    Using sprockets-sass 1.3.1
    Using middleman-sprockets 3.4.2
    Using uglifier 2.7.0
    Using middleman 3.3.10
    Your bundle is complete!
    It was installed into ./vendor/bundle
          create  example.project/.gitignore
           exist  example.project
          update  example.project/.gitignore
          create  example.project/.ruby-version
          update  example.project/Gemfile
          create  example.project/README.md
          create  example.project/config.rb
          create  example.project/source/assets/css/style.css.scss
          create  example.project/source/assets/fonts/.gitkeep
          create  example.project/source/assets/images/.gitkeep
          create  example.project/source/assets/js/script.js
          create  example.project/source/index.html.erb
          create  example.project/source/layouts/layout.erb
          create  example.project/source/partials/.gitkeep
          create  example.project/source/templates/.gitkeep
    

    これでスケルトンをベースにプロジェクトを作ることができました。テンプレートを配布することもできるようになりますし、自分の使いやすいスケルトンを作っておくと便利です。自作しなくても公式のテンプレートを使っても良いかもしれません。

    次回:初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法

    シリーズ

    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で管理されているフォントファイルをインポートする

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