前提知識

• 簡単なコマンドライン操作ができる
• rubyを自分のPCにインストールするこができる
• gem,bundle installができる

実行環境

• mac(Mountain Lion)
• ruby(2.0.0p247)
• middleman(3.2.0)

※windowsだとあんまりうまく動かないという話をよく目にします。

middlemanのインストール

gemからインストールするだけです。

terminal

1
$gem install middleman

middlemanのコマンド

1
2
3
4
5
6
7
middleman build [options]           # 最終成果物を生成する
middleman console [options]         # irbが立ち上がり、rubyを直書きして実行できたり
middleman extension NAME [options]  # middlemanのプラグイン？をつくる時のやつ？
middleman init NAME [options]       # プロジェクトを生成する
middleman server [options]          # 開発時にプレビューする用のサーバをたてる
middleman upgrade                   # bundle installされたものをアップグレードする
middleman version                   # バージョンを表示

middleman init の実行

terminal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
> middleman init testProject

      create  testProject/Gemfile
         run  bundle install from "."
Fetching gem metadata from http://rubygems.org/........
Fetching gem metadata from http://rubygems.org/..
Resolving dependencies...
Using i18n (0.6.5)
Using multi_json (1.8.2)
Using activesupport (3.2.15)
       ・
       ・
       ・
       ・bundle install の実行
       ・
       ・
       ・
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.
      create  testProject/.gitignore
      create  testProject/config.rb
      create  testProject/source/index.html.erb
      create  testProject/source/layouts/layout.erb
      create  testProject/source/stylesheets
      create  testProject/source/stylesheets/all.css
      create  testProject/source/stylesheets/normalize.css
      create  testProject/source/javascripts
      create  testProject/source/javascripts/all.js
      create  testProject/source/images
      create  testProject/source/images/background.png
      create  testProject/source/images/middleman.png

bundle installが実行された後middlemanに必要なプロジェクトが生成されます。

よく触るファイルとディレクトリ

• config.rb
• sourceディレクトリ配下全部

config.rbで設定を行った後はsourceの中をごりごりいじっていきます。

middleman server の実行

上記のようにプロジェクトを作ったら、まずは開発環境でプロジェクトを実行してみる。

terminal

1
$ middleman server  #middleman s でも可

http://localhost:4567/

middleman serverが立ち上がっている状態で上記URLを確認してみましょう。

上記のように表示されたらOKです。

middleman build の実行

webサイトが完成したらこのコマンドで静的ファイルを生成します。

terminal

1
2
3
4
5
6
7
8
9
10
11
12
13
$ middleman build  #middleman b でも可

WARN: Unresolved specs during Gem::Specification.reset:
      activesupport (~> 3.2.6)
      listen (~> 1.1)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
      create  build/images/background.png
      create  build/images/middleman.png
      create  build/javascripts/all.js
      create  build/stylesheets/normalize.css
      create  build/stylesheets/all.css
      create  build/index.html

なんかいろいろ作られてます。(WARNはほっといてください。めんどいだけです) このbuild配下を全部サーバにあげればwebサイトの完成。

こういう構造になってます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.
├── Gemfile
├── Gemfile.lock
├── build #ここのファイルをサーバにUP
│   ├── images
│   │   ├── background.png
│   │   └── middleman.png
│   ├── index.html
│   ├── javascripts
│   │   └── all.js
│   └── stylesheets
│       ├── all.css
│       └── normalize.css
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts
    │   └── all.js
    ├── layouts
    │   └── layout.erb
    └── stylesheets
        ├── all.css
        └── normalize.css

感想

ほんとrailsっぽいって思った。（あんまりrails知らないけど）

基本的な仕組みはそんなに難しくないし、練習用にどんどん書いていこうと思う。
ちなみに、今回この記事を書く上で一番はまった点は、このブログの記事がmiddlemanを利用した初めての画像投稿となった点でした。

markdownでの画像の投稿の仕方がわからない。
通常道理に記述したらどのようなパスになるのかがわからない。
等々まだまだ初心者丸出しですが、まがりなりにもブログを書くところまで至ったので、それができるようになるところまでは今後も書いていきたいと思います。

middlemanについて解説

markdwonやblogを書く作業に慣れるために、とりあえずmiddlemanについてちょっとずつ解説していこうと思います。

middlemanは一言で書いてしまうとruby製の静的サイトジェネレーターです。
ローカル内でhtml,css,javascriptを生成します。 本ブログはmiddlemanを使って静的なファイルで構成いますが、ブログとしてはとてもマイナーなやり方だと思います。

メリット

• 運用するサーバにDBやruby,php等のプログラミング言語がいらない
  
• つまり安いレンサバでいいのでコストパフォーマンスがいい
• SQLインジェクション等アプリケーションレイヤーのサーバ攻撃には強い
  
• 軽くなる（と思う）
  
• github pageが使える
• バージョン管理もしやすい
• サイトの引っ越しもしやすい

デメリット

• 単純にブログを始めようとかwebサイト作ってみようという人にとっては敷居が高い。
• テーマが少ない。てか、ない（テーマが豊富なツールがいいならoctopressをおすすめします）

僕がmiddlemanを使っている理由

• 流行ってるみたいだから( ･ㅂ･)و ̑̑

このgithub pageでブログ作るってのが流行ってるっぽいというのが僕がこのサイトを作った最大の理由です。
むしろ、メリットデメリットは(　´_ゝ｀)ﾌｰﾝぐらいに流し見してとりあえずやってみた感が強いです。

次回からは、実際に導入編を書いていきたいと思います。

テスト投稿です。 middleman-deployをするためにテストをしています。

初投稿成功。

markdown記法を下記にまとめます。
表記自体はcssの設定に依存します。

見出し

表記

1
2
3
4
5
6
7
8
9
10
# レベル１の見出し
レベル１の見出し(別の書き方)
============
## レベル２の見出し
レベル２の見出し(別の書き方)
---------------------
### レベル３の見出し
#### レベル４の見出し
##### レベル５の見出し
###### レベル６の見出し

表示

レベル１の見出し

レベル１の見出し(別の書き方)

レベル２の見出し

レベル２の見出し(別の書き方)

レベル３の見出し

レベル４の見出し

レベル５の見出し

レベル６の見出し

リンクする

表記

1
[マークダウンの記法](http://kojika17.com/2013/01/starting-markdown.html)

表示

マークダウンの記法

画像をはる

表記

1
![画像](middleman.png)

表示

水平線

表記

1
2
3
***
---

表示

テキストの強調

表記

1
2
**strong**
*em*

表示

strong
em

リスト

表記

1
2
3
* 順序無しリストのアイテム
  * サブアイテムは2つのスペースでインデントする
* 順序無しリストの別のアイテム

表示

• 順序無しリストのアイテム
  • サブアイテムは2つのスペースでインデントする
• 順序無しリストの別のアイテム

テーブル

表記

1
2
3
4
5
6
7
8
| Left align | Right align | Center align |
|:-----------|------------:|:------------:| <- ここを調節して寄りを決定
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

表示

引用

表記

1
2
>引用１
>>引用２

表示

引用１

引用２

コード

対応言語

https://github.com/github/linguist/blob/master/lib/linguist/languages.yml

表記

1
2
3
4
5
6
7
8
9
10
*test.rb*

```ruby
puts 'The best way to log and share programmers knowledge.'
p test
def test()
    array.each do | ary |
      p ary
    end
end

表示

test.rb

1
2
3
4
5
6
7
puts 'The best way to log and share programmers knowledge.'
p test
def test()
    array.each do | ary |
      p ary
    end
end