Middleman + Foundation + Amazon S3 でのBlogサイト構築(2)Middlemanインストール〜Blogサイトのスケルトン作成

前回はイントロダクションでした。今回はMiddlemanのインストールから、Blogサイトのスケルトン(雛形)を作成するところまでの手順を記載します。

Middlemanインストール

Middlemanはgemで配布されているので、インストールは簡単です。

$ gem install middleman

Blogサイト構築用の公式拡張もインストールしておきます。

$ gem install middleman-blog

middlemanのあれこれは、middlemanコマンドを使って実行します。手始めにバージョンを確認してみます。

$ middleman version
Middleman 3.2.1

スケルトンの生成方法

Middlemanのスケルトンを生成するには、middleman initコマンドを実行します。引数にプロジェクト名を指定すると、プロジェクト名のフォルダが作成されその中に諸々ファイルが展開されます。

$ middleman init my_site

プロジェクトフォルダの中身を見てみます。

my_site
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts
    │   └── all.js
    ├── layouts
    │   └── layout.erb
    └── stylesheets
        ├── all.css
        └── normalize.css

sourceディレクトリに含まれるファイルがサイトの実体です。この中にhtml、css、jsファイルなどを配置していきます。

config.rbはMiddlemanの設定ファイルです。

Blogサイト用スケルトンの生成

プロジェクトテンプレートを使用してスケルトンを生成することもできます。Blogサイト用にはMiddlemanの公式テンプレートがあるので、今回はこれを使ってスケルトンを生成します。--templateフラグでblogテンプレートを指定します。

$ middleman init my_blog --template=blog

こちらもプロジェクトフォルダの中身を見てみます。

my_blog
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── 2012-01-01-example-article.html.markdown
    ├── calendar.html.erb
    ├── feed.xml.builder
    ├── images
    ├── index.html.erb
    ├── javascripts
    ├── layout.erb
    ├── stylesheets
    └── tag.html.erb

デフォルトのスケルトンとの比較で、calendar.html.erbなどのBlogサイト用のテンプレートが追加されています。2012-01-01-example-article.html.markdownはBlog記事のサンプルです。逆にcssやjsファイルは含まれていないので、これらは別途手動で追加していきます。

なお、プロジェクトテンプレートはコミュニティ製のものを使うこともできます。 githubからcloneして~/.middlemanに置いておくとmiddlemanが認識してくれて、--templateフラグで指定できるようになります。

開発用Webサーバの起動

MiddlemanにはWebサーバがバンドルされているので、ローカル環境で動作確認をしながら開発を進めることができます。 Webサーバを起動するにはmiddleman serverコマンドを実行します。middlemanだけでもOKです。

$ middleman server
# または
$ middleman

http://0.0.0.0:4567でアクセスできます。味気の無い画面ですが、プログ記事、最近の投稿、タグ、年別の投稿一覧へのリンクが表示されているのがうかがえます。

サーバの停止はCTRL-Cです。

静的ファイルの書き出し(ビルド)

middleman buildコマンを実行するとsourceフォルダ内のファイルが静的ファイルにコンパイルされ、buildフォルダに出力されます。(buildフォルダはbuildコマンド初回実行時に自動で作成されます。)

$ middleman build

erbやmarkdownで書かれたファイルが静的なhtmlファイルにコンパイルされています。

my_blog
├── Gemfile
├── Gemfile.lock
├── build
│   ├── 2012
│   │   ├── 01
│   │   │   ├── 01
│   │   │   │   └── example-article.html
│   │   │   └── 01.html
│   │   └── 01.html
│   ├── 2012.html
│   ├── feed.xml
│   ├── index.html
│   └── tags
│       └── example.html
├── config.rb
└── source
    ├── 2012-01-01-example-article.html.markdown
    ├── calendar.html.erb
    ├── feed.xml.builder
    ├── images
    ├── index.html.erb
    ├── javascripts
    ├── layout.erb
    ├── stylesheets
    └── tag.html.erb

まとめ

middlemanをインストールし、Blogサイトのスケルトンを作成するところまで出来ました。今後はsourceフォルダ内にファイルを作成〜ローカル環境で確認〜ファイルを修正〜そしてまた確認、、、というサイクルで開発を進めていきます。の前に、Blogサイトで使用するFoundationなどのフロントエンドライブラリのインストールしておきます。次回はその手順を記載します。

参考サイト

middleman aws s3 foundation