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