静的サイトの構築に便利:MiddleMan

More than 1 year has passed since last update.

静的サイトを構築する時に、

いちいちDocumentRootかえるのめんどくさいなぁ・・・

テンプレートエンジンが使えたらなぁ・・・

coffeescriptが使えたらなぁ・・・

scssが使えたらなぁ・・・

minifyまで自動でやってくれたらなぁ・・・

煩悩にまみれてます。

そんなことを解決してくれるのがMiddleManです。


インストール

$ [sudo] gem install middleman


基本コマンド

コマンドは以下です。

#=>よく使う

$ middleman init #=> サイト構造を作成します
$ middleman server #=> サーバーを起動します
$ middleman build #=> 最終出力します

$ middleman --help

middleman build [options] # Builds the static site for deployment
middleman extension NAME [options] # Create Middleman extension scaffold NAME
middleman init NAME [options] # Create new project NAME
middleman server [options] # Start the preview server
middleman upgrade # Upgrade installed bundle
middleman version # Show version


実践してみる


1.middleman init

$ cd [適当な場所]

$ middleman init my_site

# 略

Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
create my_site/.gitignore
create my_site/config.rb
create my_site/source/index.html.erb
create my_site/source/layouts/layout.erb
create my_site/source/stylesheets
create my_site/source/stylesheets/all.css
create my_site/source/stylesheets/normalize.css
create my_site/source/javascripts
create my_site/source/javascripts/all.js
create my_site/source/images
create my_site/source/images/background.png
create my_site/source/images/middleman.png

ずらずらっとできました。


config.rb

# 略

# Methods defined in the helpers block are available in templates
# helpers do
# def some_helper
# "Helping"
# end
# end

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

# Build-specific configuration
configure :build do
# For example, change the Compass output style for deployment
# activate :minify_css

# Minify Javascript on build
# activate :minify_javascript

# Enable cache buster
# activate :cache_buster

# Use relative URLs
# activate :relative_assets

# Compress PNGs after build
# First: gem install middleman-smusher
# require "middleman-smusher"
# activate :smusher

# Or use a different image path
# set :http_path, "/Content/images/"
end


コメントアウトを外すだけで、いろいろ設定できそうですね!!

他にも、

$ middleman init --help

Usage:
middleman init NAME [options]

Options:
-T, [--template=TEMPLATE] # Use a project template: default, html5, mobile, smacss
# Default: default
[--css-dir=CSS_DIR] # The path to the css files
[--js-dir=JS_DIR] # The path to the javascript files
[--images-dir=IMAGES_DIR] # The path to the image files
[--rack] # Include a config.ru file
[--bundler] # Create a Gemfile and use Bundler to manage gems

Create new project NAME

templateやrackは面白そうですね。


2.middleman server

1.の手順をそのままserverしてみます。

[working directory] $ middleman server

== The Middleman is loading
[Listen warning]:
Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback.

== The Middleman is standing watch on port 4567

リクエストを待っています。

ブラウザでlocalhost:4567にアクセスしてみると、

MiddleMan is watching

動いています。見られています。

ヘルプを見てみます。

$ middleman server --help

Usage:
middleman server [options]

Options:
-e, [--environment=ENVIRONMENT] # The environment Middleman will run under
# Default: development
-h, [--host=HOST] # Bind to HOST address
# Default: 0.0.0.0
-p, [--port=PORT] # The port Middleman will listen on
# Default: 4567
[--verbose] # Print debug messages
[--instrument=INSTRUMENT] # Print instrument messages
[--disable-watcher] # Disable the file change and delete watcher process
[--profile] # Generate profiling report for server startup
[--reload-paths=RELOAD_PATHS] # Additional paths to auto-reload when files change

Start the preview server

静的サイトの構築にはオーバーな感じですね。

今この状態でファイルを変更すると、

サーバーの再起動が必要なのでしょうか、と疑問に思ったのでやってみます。


source/index.html.erb

---

title: Welcome to Middleman
---

<div class="welcome">
<% 10.times do %>
<h1>MiddleMan is Watching</h1>
<% end %>
<p class="doc">
<%= link_to "Read Online Documentation", "http://middlemanapp.com/" %>
</p><!-- .doc -->
</div><!-- .welcome -->


MiddleMan is Watchingを10回繰り返すように変更しました。

アクセスすると、

MiddleMan is watching

長いので省略しますが、即時反映されています。便利。

coffeescriptやscssもリクエスト時に整形してくれます。


3.middleman build

2.で編集したら、最後はパブリッシュしたいのでbuildコマンドをうちます。

その前にヘルプを見てみます。

$ middleman build --help

Usage:
middleman build [options]

Options:
-c, [--clean] # Removes orphaned files or directories from build
-g, [--glob=GLOB] # Build a subset of the project
[--verbose] # Print debug messages
[--instrument=INSTRUMENT] # Print instrument messages
[--profile] # Generate profiling report for the build

Builds the static site for deployment

ふむふむ。

--verboseをつけてbuildします。

$ middleman build --verbose

== Reading: Local config
== Activating: sprockets
Loaded extensions:
== Extension: Middleman::Sprockets
== Extension: Middleman::Sprockets::Sass
== File Change: config.rb
== File Change: source/index.html.erb
== File Change: source/images/background.png
== File Change: source/images/middleman.png
== File Change: source/javascripts/all.js
== File Change: source/layouts/layout.erb
== File Change: source/stylesheets/all.css
== File Change: source/stylesheets/normalize.css
== Prerendering CSS
== Checking for Compass sprites
== File Change: source/images/background.png
== File Change: source/images/middleman.png
== Building files
== Request: /images/middleman.png
create build/images/middleman.png
== Request: /images/background.png
create build/images/background.png
create build/javascripts/all.js
create build/stylesheets/all.css
create build/stylesheets/normalize.css
== Request: /index.html
== Finishing Request: /index.html (0.0s)
create build/index.html

buildディレクトリが作られ、その中に静的サイトができました。


build/index.html


<body class="index">
<div class="welcome">

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<h1>Middleman is Watching</h1>

<p class="doc">
<a href="http://middlemanapp.com/">Read Online Documentation</a>
</p><!-- .doc -->
</div><!-- .welcome -->
</body>


さっきいじったところもしっかり反映されてますね。

というわけで、便利なgemの紹介でした。