爆速のブログページを一瞬で立ち上げるテンプレートを作った


##はじめに

静的ページジェネレーターの[Middleman]()を始めてみて、シンプルかつモバイルに対応しているテンプレートがなかなか見つからなかったので、自分で作成してみました。

[middleman-simple-template](https://github.com/syui/middleman-simple-template)


ここで、ホスティング先に[GitHub Pages](https://help.github.com/categories/20/articles)のプロジェクトページを採用したのですが、これを自動化してみました。

なので、一般的には、以下のコマンドを実行すれば、自動でブログページが立ち上がります。

ちなみに、`projectname`のところは、好きな名前にしてください。これがURLになります。プロジェクトページの場合は、`http://username.github.io/projectname`という感じになります。

```bash:
$ git clone https://github.com/syui/middleman-simple-template projectname

$ cd !$

$ bundle

$ rvm use 1.9.3

$ ./setup.sh

$ middleman build

$ ./build.sh

$ middleman deploy
```

[setup.sh](https://github.com/syui/middleman-simple-template/blob/master/setup.sh)は何をしているのかというと、現在ディレクトリ名で新しいリポジトリの作成と`gh-pages`ブランチの作成です。リポジトリの作成には、GitHubのパスワードを入力してください。中身は大体以下のようなコマンドになります。

```bash:setup.sh
# New Repository
curl -u 'USERNAME' https://api.github.com/user/repos -d '{"name", "PROJECTNAME"}'

# New Branch
git checkout -b gh-pages

# Push <projectname:gh-pages>
git push
```


##middleman-simple-template

[middleman-simple-template](https://github.com/syui/middleman-simple-template)

###デモ

[http://syui.github.io/middleman-simple-template/](http://syui.github.io/middleman-simple-template/)


###特徴

特徴としては、何も入ってないシンプルなサイトなので、速いです。お好きにカスタマイズしていただければと思います。カスタマイズのヒントは最後に書きます。


by [http://gtmetrix.com/](http://gtmetrix.com/)


###インストール

```bash:
$ git clone https://github.com/syui/middleman-simple-template

$ cd !$:t

$ bundle

$ middleman server
```

または、

```
$ gem i middleman middleman-blog

$ git clone https://github.com/syui/middleman-simple-template ~/.middleman/middleman-simple-template

$ middleman init my_new_project --template=middleman-simple-template

$ cd my_new_project

$ bundle install

$ middleman server
```

`bundle`コマンドは、`Gemfile`に記述されたモジュールをインストールするコマンドです。

ページの生成から公開までをすべて自動化したい場合は、最初に挙げたコマンドになります。ただし、`bundle`などを導入していることが前提で、上級者向けです。

```bash:
$ git clone https://github.com/syui/middleman-simple-template projectname

$ cd !$

$ bundle

$ rvm use 1.9.3

$ ./setup.sh

$ middleman build

$ ./build.sh

$ middleman deploy
```


####bundler

`bundler`を導入していない場合は、導入してください。

```bash:
$ gem i bundler
```

また、`Ruby --version`は、`1.9.3`で動作するのを確認しています。

したがって、`bundler install`する前にバージョンを変更してください。

```bash:
$ rvm use 1.9.3
```

###基本コマンド

```bash:
# 現在のディレクトリにある source フォルダをプレビューを行うコマンド(http://localhost:4567/)
$ middleman server

# 現在ディレクトリの source フォルダ build フォルダ内に HTML 変換するコマンド
$ middleman build

# 指定されたホストにデプロイするコマンド
$ middleman deploy

# 記事を作成するコマンド
$ middleman article hoge
```

####Zshの補完関数


```bash:
$ cd ~/.zsh/functions/

$ curl -O https://raw.githubusercontent.com/sshankar/dotx/master/.zsh/completions/_middleman

$ source ~/.zshrc
```


###初期設定

####GitHub Pages

ホスティング先であるサーバーは設定しておいてください。ここでは、`GitHub Pages`のプロジェクトページを使用する前提で書きます。

まず、GitHubで新しいリポジトリを作ります。そして、`gh-pages`ブランチを作ります。これは、新しいリポジトリを作る際に案内されると思います。


ページができたら、その設定、具体的には、`projectname`の部分にリポジトリ名を設定します。

```bash:config.rb
configure :build do

  activate :asset_host, :host => '/projectname'

end
```

####config.rb

ページの公開元を用意できたら`config.rb`で設定を行います。

```ruby:config.rb
# ブログタイトルなどの基本設定
set :site_url, 'http://username.github.io/projectname'
set :site_author, 'username'
set :site_title, 'blog title'
set :site_description, 'blog description'

# デプロイやビルドに関する設定
configure :build do
  #activate :gzip
  activate :minify_css
  activate :minify_javascript
  activate :asset_host, :host => '/projectname'
  activate :asset_hash
  set :relative_links, true
end

activate :deploy do |deploy|
  deploy.build_before = true
  deploy.method = :git
  deploy.branch = 'gh-pages'
end
```

設定すべきポイントは、最低限、`activate :asset_host, :host => '/projectname'`と`deploy.branch = 'gh-pages'`辺りです。

これは、`middleman deploy`や`middleman build`などのページ作成とアップロードコマンドの指定になります。

ただし、`middleman deploy`は、`gem i middleman-deploy`を導入済みである必要があります。これについては、`Gemfile`に記述してあります。

初期設定を終えるとやっとページの生成から公開ができるようになります。

###カスタマイズ

####変数

> config.rb


| title | html | sample |
| --- | --- | --- |
| トップアドレス | <%= site_url %> | set :site_url, 'http://syui.github.io/middleman-simple-template/' |
| 名前 | <%= site_author %> | set :site_author, 'User Name' |
| タイトル | <%= site_title %> | set :site_title, 'Blog title' |
| サブタイトル | <%= site_description %> | set :site_description, 'Blog description' |

####ページタイトル


```html:source/layouts/layout.erb
<title><%= current_page.data.title || site_title %></title>
```


`A || B`は、優先順位を示す記述方式です。

`current_page.data.title`は、現在ページのタイトルを表します。

####アイコンの変更

タイトル部分は、以下のファイルを編集します。具体的には、`h1`タグ内です。

```html:source/layouts/layout.erb
<!-- Logo & Top Nav -->
<div class="row">
  <div class="small-3 columns">
      <h1 style="line-height:0px;font-weight:200;"><a href="<%= site_url %>"><span class="icon-phoenix-logo"></span></a><%= site_title %></h1>
      syui's blog mba-hack3.
  </div>
</div>
```

アイコンはいくつか用意されています。`icon-phoenix-logo`を変更してください。変更できるものは以下の通りです。

> source/stylesheets/icomoon.css.scss

- icon-phoenix-logo
- icon-home
- icon-image
- icon-mobile
- icon-quotes-left
- icon-switch
- icon-menu
- icon-link
- icon-checkmark
- icon-radio-checked
- icon-embed
- icon-console
- icon-share
- icon-googleplus
- icon-twitter
- icon-vimeo2

[IcoMoon](http://icomoon.io/)


####モバイル表示



モバイルに対応した表示は、個別に分けて書きます。

```css:source/stylesheets/media.css.scss
@media screen and (max-width: 650px) {

  .column, .columns {
    padding-left: 0;
    padding-right: 0;
  }

}
```

はみ出してしまう場合は、悪さをしている要素に対し以下を設定するとよいでしょう。あとは、`margin`なども見落としがちです。


```css:
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -webkit-pre-wrap;
  white-space: -o-pre-wrap;


  word-wrap: break-word;
  word-break: break-all;
  white-space: inherit;
```

[Building Smartphone-Optimized Websites](https://developers.google.com/webmasters/smartphone-sites/)

####digest

`digest`により設定がまとめられています。



```html:source/blog/_article.html.erb
<% if digest %>
  <time datetime="<%= article.date.strftime('%Y-%m-%d') %>"><%= article.date.strftime('%Y-%m-%d') %></time>
  <%= link_to article.title, article %>
<% else %>
  <%= article.title %>
<% end %>
```

`:degest => true`

```html:source/index.html.erb
<%= partial '/blog/article', :locals => {:article => article, :digest => true} %>
```

ERB記法はなれませんので、slimに移行するかもしれません。


####datatime

日付の表示は、以下のタグになります。

```html:
<%= article.date.strftime('%Y-%m-%d') %>
```


###書いた記事

[middlemap-simple-tempate](http://syui.github.io/middleman/blog/2014/01/01/example-article.html)

[middleman-simple-template - MBA-HACK2](http://syui.github.io/blog/2014/07/02/middleman-template-simple/)

[customize](http://syui.github.io/middleman/blog/2014/07/02/middleman-theme-customize.html)

[fix](http://syui.github.io/middleman/blog/2014/06/29/middleman-theme-fix.html)

[Webの高速化を試してみた - MBA-HACK2](http://syui.github.io/blog/2014/06/30/middleman-speed-test/)

[Middlemanのテンプレートを使うときのarticle.url - MBA-HACK2](http://syui.github.io/blog/2014/06/28/middleman-slim-theme/)

[Middlemanのブログテンプレートを使ってみた - MBA-HACK2](http://syui.github.io/blog/2014/06/28/middleman-blog-template/)

[MiddlemanでGitHub Pagesを構築してみた - MBA-HACK2](http://syui.github.io/blog/2014/06/23/blog-github-middleman/)


###参照と謝辞

[Middleman](http://middlemanapp.com/)

[middleman-zurb-template](https://github.com/mattolson/middleman-zurb-template)

[IcoMoon](http://icomoon.io/)

[r7km/s](http://r7kamura.github.io/)

参考にさせていただいたページなどです。ありがとうございます。


###To-Do

1. [Bower](http://bower.io/)

2. [Bootstrap](http://getbootstrap.com/)

3. [Slim](http://slim-lang.com/)