また Middleman blog のテンプレートができたので宣伝にきました


Drops という middleman-blog 用のテンプレートを作ったので宣伝にきました。

https://github.com/5t111111/middleman-blog-drops-template

## 画面

こんな見た目です。

![screenshot.jpg](https://raw.githubusercontent.com/wiki/5t111111/middleman-blog-drops-template/images/screenshot.jpg)

## 主な特徴

- 黒い水滴くんみたいなキャラがかわいいです
- Heroku へのデプロイ準備OKです (New Relic アドオンもすぐ追加できます)
- サイトマップと Atom のフィードが自動的に作られます
- [Breakpoint](http://breakpoint-sass.com/) を使って割とレスポンシブになってます
- シンタックスハイライトが効きます ([middleman-syntax](https://github.com/middleman/middleman-syntax) と [rouge](https://github.com/jneen/rouge) を使ってます)
- アセット管理に [Rails Assets](https://rails-assets.org) 使ってます (Bower のインストール不要です)
- Nokogiri 使いません ([Oga](https://github.com/YorickPeterse/oga) を使ってカスタマイズしたフォーク版の middleman-blog を使います)

## インストールのしかた

Middleman をインストールしてなかったらインストールしてください。

```console
$ gem install middleman
```

### テンプレートをローカルにクローン

```console
$ mkdir ~/.middleman # if it doesn't exist
$ cd ~/.middleman
$ git clone https://github.com/5t111111/middleman-blog-drops-template.git blog-drops
```

### Middleman ブログのプロジェクトを作る

```console
$ middleman init my_blog_project --template=blog-drops
```

### Gem をインストールする

```console
$ cd my_blog_project
$ bundle install
```

### Middleman サーバーを起動する

```console
$ bundle exec middleman
```

起動したら `http://localhost:4567` を Web ブラウザで開いてみてください。

### 記事を書く

一応、記事を書く準備はこれでOKです。
`source/posts` に Markdown 形式のファイル (拡張子: `.md`) を作ってそこに書いてください。
`2014-11-20-this-is-an-example-article.html.md` というサンプルの記事ファイルがあるのでそれを参考にすると早いです。

## ブログの構成

公開の際には、`config.rb` の最後の方にある以下の設定を変更してください。

| name                        | description                                                                             |
|:---------------------------:|:---------------------------------------------------------------------------------------:|
| :site_url                   | ブログの URL                                                                           |
| :site_title                 | ブログのサイトのタイトル                                                                         |
| :site_description           | ブログの説明 (今のところ、META タグの description でしか使われません)                   |
| :site_author                | ブログの著者の名前                                                                             |
| :site_author_profile        | ブログの著者のプロフィール                                                               |
| :site_author_image          | ブログの著者の画像                                                                    |
| :reverse_title              | true だとページのタイトルがブログのサイトのタイトルの先にくる          |
| :social_links               | 著者ページのソーシャルリンク設定                                 |
| :google_analytics_account   | Google Analytics アカウント (オプション)                                                     |

## Heroku へのデプロイ

静的サイト用の Rack appliction の構成が設定されいてるので、ほとんど何もしなくても Heroku にデプロイできます。 

Ruby バージョンだけは手動で指定してください。

```ruby
source 'https://rubygems.org'
source 'https://rails-assets.org'

ruby '2.1.5'

# middleman
gem 'middleman', '~> 3.3.5'

...
```

変更を全部コミットして、Heroku アプリケーションを作ります。

```text
$ heroku create
```

Heroku にプッシュ。

```text
$ git push heroku master
```

Web ブラウザで確認。

```text
$ heroku open
```

詳細は、`config.ru` と `Procfile` の中身を直接見てください。

## ライセンス

コードは MIT です。
が、テンプレートに含まれている以下の画像の使用だけは、このテンプレートと一緒に使う用途に限るとし、テンプレートのフォーク以外での2次利用と再配布はだめよーだめだめとさせてください。

- drops.png
- favicon.png
- profile.png