勉強のためMiddleman + Foundation + Amazon S3でBlogサイト（＝当サイト）を構築しました。 今回実施した作業内容を、記憶を辿りつつ数回に分けて記録していきます。初回はイントロダクションです。
Middlemanとは
- Ruby製の「静的サイトジェネレータ」(ベースはSinatra)
- テンプレート言語、メタ言語で作成したソースをコマンド一発で静的ファイルへビルドしてくれる
- 様々なテンプレート言語、メタ言語が使用できる（Haml,Slim,Markdown,Sass(+Compass),Less,CoffeeScript, etc.)
- CSSやjavascriptファイルをminifyしてくれる
- 開発用のローカルサーバーを使用してローカル環境で動作確認ができる（LiveReloadにも対応している）
テンプレート用のヘルパメソッドも備えているので、ちょうどRailsのViewを開発するのと似たような作法で静的サイトを構築することができます。
Foundationとは
- レスポンシブWebデザイン対応のCSSフレームワーク
- 標準でSassに対応
Bootstrapは少し触ったことがあったので、今回はそれ以外の選択肢という観点でFoundationを選択しました。
Amazon S3とは
- AWSが提供するクラウドストレージサービス
- 「Static Website Hosting」を使うと静的なWebサイトを運用することができる
ホスティング環境としてはGitHub Pagesも検討しましたが、最近AWSについて勉強中ということもあり、S3を選択しました。
その他使用したツール、ライブラリ、サービス類
- Foundationが依存するjsライブラリ - Modernizr, Normalize.css
- Blogのコメント機能 - Disqus
- フロントエンドツール用のパッケージマネージャ - bower
- アイコンフォント - Font Awesome
- DNSサービス - Amazon Route 53
せっかくなので色々使ってみました。
要件定義
- Middleman + FoundationでBlogサイトを構築し、Amazon S3へデプロイする
- テンプレート言語はHamlを使用
- Blog記事はMarkdownで書く
- Foundation等のフロントエンドライブラリはbowerで管理
- AWSのRoute53を使用しWebサイトをネイキッドドメインで運用
開発環境
- OS : OSX 10.9
- Ruby : 2.0.0p353
MiddlemanはRuby製WebフレームワークでのSinatraがベースになっているので、middlemanを使う前提として事前にRubyをインストールしておく必要があります。私はrbenvを使ってインストールしました。rbenvを使う場合は以下が参考になると思います。
- OS X Maverick にrbenvでRubyをインストール - Qiita [キータ]
- Ruby 2.0.0-p0インストール(Mac OS X 10.8.2) - Qiita [キータ]
- rbenv 環境の Ruby の irb で日本語が文字化けするので直した | EasyRamble
- homebrew で入れた openssl を使って Ruby をコンパイルすると SSL 利用時に証明書エラーが発生する場合の対応 - Qiita [キータ]
手順概要
以下の流れで作業を実施しました。実際は紆余曲折がありましたが、一本道に整備するとこんな感じになるかと思います。
- Middlemanインストール, Blogサイトのスケルトン生成
- Foundation(とその他フロントエンドライブラリ)インストール
- Blogの基本設定
- レイアウト作成
- コメント欄とBlog記事検索フォームの設置
- Syntax Highlight設定
- S3へデプロイ
まとめ
ひとまず使用したサービスやライブラリなどをまとめてみました。実際の作業内容は次回以降記載していきます。