20131008_0.png

Middlemanで静的サイト制作

20131008 0

以前書いた「Middlemanで静的サイト制作」の記事の続きです

Middlemanのインストール

gem install middleman

新規サイトの制作

middleman init my_new_project

これを実行した時点ではmy_new_projectフォルダ以下にいくつかのファイルとsourceフォルダが生成されます。サイトの制作作業はsourceフォルダ内でおこないます。

config.rb

サイトの設定情報が記録されています。初期値は以下の様な構成になっています。ほとんどがコメントアウトされていますが、スタイルシートや画像、javascriptの保存場所もここで指定します。

サーバーの起動

middleman server

このコマンドを実行すると開発用のサーバーが起動します。http://0.0.0.0:4567にアクセスすることでサイトを見ることができます。config.rbにactivate :livereloadと追記しておくと、ファイルが更新された時に一緒にブラウザも再読み込みしてくれるので便利です。

ファイルの生成

middleman build

sourceフォルダの中身を元にhtmlを生成します。生成したファイルはbuildフォルダに配置されます。

ファイルのデプロイ

middleman deploy

buildフォルダの中身を設定された場所にデプロイします。

middleman deployでftp

middleman-deployを利用することでサイトのデプロイ時にサーバーにできあがったファイルをFTPすることができます

middleman deploy

サーバーの情報はconfig.rbに以下のように追記します。

middleman-deploy

Middlemanで静的サイト制作

パーフェクトRuby (PERFECT SERIES 6)
Rubyサポーターズ すがわら まさのり 寺田 玄太郎 三村 益隆 近藤 宇智朗 橋立 友宏 関口 亮一
技術評論社
売り上げランキング: 7,652
Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
デザインラボ編集部
ソフトバンククリエイティブ
売り上げランキング: 9,223
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
インプレスジャパン (2013-10-02)
売り上げランキング: 1,700

この記事を書いた人

Takamasa Suzuki株式会社wEVA代表取締役Twitter:@webcrafts
沖縄に移住してあっというまに四年が経過しました。大勢の方と知り合え、本土にいたままでは経験できないようなこともいっぱい経験させてもらえて感謝の毎日です。

投稿者:

Takamasa Suzuki

沖縄に移住してあっというまに四年が経過しました。大勢の方と知り合え、本土にいたままでは経験できないようなこともいっぱい経験させてもらえて感謝の毎日です。