on middleman

middleman と Amazon S3 で簡単に構築するブログサイト

このサイトは middleman というツールを使って作って Amazon S3 でホストしてますよということで作り方のメモ。

middleman ってなんすか？

  • Ruby で実装された静的サイト生成ツール
  • こちらが公式サイト
  • 細かいことはググりましょう
  • 個人的には Markdown と使い慣れたエディタを利用して記事が書けるのがヨカですね

準備

gem を使ってインストールするんです。

1
gem install middleman

そしてテンプレート等を使いたい場合にはホームディレクトリ以下に .middleman というディレクトリ作成しておいて github に公開されているようなテンプレート等を clone してくると良さそうです。

1
2
mkdir ~/.middleman
git clone https://github.com/danielbayerlein/middleman-casper.git ~/.middleman/casper

そして以下のようにプロジェクトを初期化しますね。1 つのプロジェクトが 1 つのサイトやブログというイメージが良いようですね。

1
middleman init hogehuga --template=casper

実行すると実行したディレクトリ以下に hogehuga というディレクトリが出来ている（はず）なので…さらに middleman article TITLE を実行して記事を生成しますね。

1
middleman article TITLE

さあ、記事を書いていきましょ。

記事をちら見する準備

middleman の嬉しいところは手元のブラウザでプレビューしながら記事を書くことが出来るのですね。プロジェクトのディレクトリ以下で以下のように実行しますね。

1
bundle exec middleman

実行すると localhost の 4567 ポートで Listen するサービスが起動するのでブラウザでアクセスすると以下のように記事に修正を加えるたびに記事の見た目や内容をチェックすることが出来そうです。

記事を書く

middleman article TITLE を実行すると hogehuga/source/2014-04-19-TITLE.html.markdown というファイルが生成されている（はず）なので…適当なエディタで記事を書いていきましょう。

1
2
3
4
5
6
7
8
---
title: middleman で構築する簡単ブログ
date: 2014-04-19 00:59 UTC
tags: middleman
---

aaaaa

ひとしきり書いて書くのに飽きてきたら記事を書き出す処理をしましょう。

記事をビルドする

記事を Web ページとして表示させる為に HTML の生成を行いますね。

1
middleman build

を実行すると以下のように HTML の生成が始まりますね。

Amazon S3 へのアップロード

なく子も黙る Amazon S3 はなんと静的なコンテンツを放り込んでおいて Web サイトとしても利用出来るんですね。Web サイトとして利用する方法については以下のスライドが参考になりますのでご参考下さいませ。

ポイントとしては…

  • バケットは FQDN 名にしておく
  • Static Website Hosting を有効にしておく
  • Bucket Policy を適切に設定しておく

ちなみに Bucket Policy を以下のように設定するよ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::${サイトのドメイン}/*"
        }
    ]
}

middleman からのアップロードは middleman-s3_sync というツールを使いますね。middleman-s3_sync はプロジェクト以下にある Gemfile に以下のように記載した後で bundle install を実行しますね。

1
gem 'middleman-s3_sync'

middleman-s3_sync _のインストールが終わったら config.rb に以下を設定しますね。

1
2
3
4
5
6
7
8
9
10
11
12
13
activate :s3_sync do |s3_sync|
  s3_sync.bucket                     = 'kome.inokara.com' 
  s3_sync.region                     = 'ap-northeast-1'
  s3_sync.aws_access_key_id          = 'AK123456789012345678'
  s3_sync.aws_secret_access_key      = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  s3_sync.delete                     = false
  s3_sync.after_build                = false
  s3_sync.prefer_gzip                = true
  s3_sync.path_style                 = true
  s3_sync.reduced_redundancy_storage = false
  s3_sync.acl                        = 'public-read'
  s3_sync.encryption                 = false
end

設定が終わったらいよいよ Amazon S3 にアップロードです。以下のように実行してアップロードしますね。

1
middleman s3_sync

middleman s3_sync を実行すると以下のように Amazon S3 にアップロードが完了しますね。_

お疲れ様でした…Amazon S3 のダッシュボードでも以下のように各種ファイルがアップロードされていることが確認出来るかと思いますね。

アクセスしてみる

Amazon S3 にアップロードした内容は以下のような URL にて確認が出来るんです。

1
http://${バケット名}.s3-ap-northeast-1.amazonaws.com

上記の FQDN を CNAME で DNS レコードを設定して…

1
http://${バケット名}

でアクセス出来るようになりますな。

おまとめ申し上げます

  • middleman 自身のセットアップも Ruby が動いている環境であれば簡単だと思います
  • そしてなによりも Amazon S3 でホスティング出来るという点が有り難いですね