Go to Qiita Advent Calendar 2024 Top
LoginSignup
122
119

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@mosson

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

Last updated at Posted at 2012-12-26

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

いちいち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の紹介でした。

122
119
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
122
119

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?