Latest Tweets:
Middleman — 有點門檻的閃電 mockup 工具
這是筆者用過最快速的 html mockup 工具，筆者曾在一天之內使用 middleman 完成一個網頁設計案。雖然他很威，但是有點門檻… 門檻如下：
如果以上幾點對你都不是問題，那就可跳來用 middleman 做網頁設計。
Middleman 有著以下的優點：
- 內建 haml，使用 haml 來做 layout 減少人為的 html 巢狀錯誤，這是 middleman 內建的 templating languages 之一。
- 可使用 partial，輕鬆把網頁的頭、尾、側欄局部拆開，並且可選擇性的套用在每一頁。
- 可以使用 compass 這套暴力的 css 撰寫法，有多暴力？可參考之前 RGBA 的文章 [1] [2]。
- 內建 livereload，可以讓你一邊修改原始碼、瀏覽器自動 reload 的功能。
以上是對設計網頁有助益的項目，除此之外，完成設計之後還可以直接：
安裝 middleman
整個學習過程裡，最困難莫過於安裝環境，因此筆者特地把安裝過程筆記起來。
ruby 版本建議使用 ruby 1.8.7 ree，筆者使用 1.9 有遇到問題。如果你有用 rvm，可以直接下指令安裝 ree
rvm install ree
安裝好 ree 之後就可以來安裝 middleman
gem install middleman
使用 middleman 建立專案
開啟一個新專案時，必須使用指令：
middleman init new_project_name
new_project_name 是你專案的名稱，但如果你要讓他成為一個 rack app（例如想用 pow 跑起來）就得加上 --rack ；如果你還想讓 middleman 專案佈署到 heroku 或其他伺服器，就必須再加上 --bundler ，整個指令如下：
middleman init new_project_name --rack --bundler
如此便可順利的建出一個專案資料夾，裡面含各種必要的檔案。
使用 middleman
使用 middleman 反而是整個學習過程中最無痛的部份，因為他真的很簡單。建議參考官方網站的說明，建議先看下面三項就好：
這邊就不多做說明。
把 middleman 佈署到 heroku
筆者嘗試把 middleman 直接佈署到 heroku 上面遭遇到很多挫折，這邊也特別筆記下來…
首先 gemfile 必須要加入這一行
gem "therubyracer-heroku", "~>0.8.0"
然後記得
bundle install
下完之後，記得用 git 把專案 commit 起來。再使用 heroku 開一個 app，而開這個 app 的時候也要注意，不能只使用 heroku create 要使用
heroku create --stack bamboo-ree-1.8.7
這樣你的 heroku app 環境才會是跟 ree 相符的，萬一你已經下過 heroku create，那就必須下個切換 stack 的指令
heroku stack:migrate bamboo-ree-1.8.7
並且重新 git push heroku master 才會完成佈署，如此一來你辛苦做的專案就可以給任何人看了！而且完全免費！
