Middlemanで 技術ブログ作ると みんな幸せになるよ！2015/06/11 (Thu) teratail開発チーム　出川 幾夫

自己紹介• 出川 幾夫（デガワ イクオ）

• 2015年4月Leverages新卒入社

• teratail開発チーム エンジニア

• PHPの人

• 趣味：サーバー自動化@ikuwow

Middleman知ってる？

https://middlemanapp.com

Middlemanとは？

• Ruby製フロントエンド生成ツール

• ERB、Haml、Sass、Less、CoffeeScriptからHTML、CSS、JSを生成

$ gem install middleman

$ middleman init myblog

Middlemanでブログ作りました

http://ikuwow.website/

なんでMiddlemanでブログ？

• Markdownで書きたい！WordPressの闇はもう見たくない！！

• Vimで記事書きたい・・・。

• YeomanはJSこわいし、Jekyllは重いらしいし、Octpressよくわからんし・・・

• Middlemanは最近開発が活発。日本語ドキュメント充実。公式サイトのデザイン印象よい。あとRuby

ブログが超簡単に作れる

• middleman-blogという公式プラグインが超優秀

• タグ付け、下書き、URL整形、アーカイブ、…

$ middleman init —template=blog$ middleman serve

## config.rb

activate :blog do |blog| # ブログ機能のオプションを設定end

ディレクトリ構成

• Jekyllに比べて超シンプル

myblog/+-- .gitignore+-- 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+-- build/

いつものエディタでMarkdown

YAMLでFrontmatter書く$ middleman article my-article

RailsのViewっぽく書ける

<% wrap_layout :layout do %>

<h1><%= current_article.title unless current_article.nil? %></h1> <p class="post-meta""> <% if !current_article.nil? %> <% current_article.tags.each do |tag| %> <%= link_to tag, tag_path(tag), :class => "post-category post-category-design"%> <% end %> <% end %> </p>

<div class="social-buttons-box"> <%= partial "social_buttons" %> </div> <%= link_to ‘ホーム’, ‘http://ikuwow.website' %><% end %>

GitHub Pagesにデプロイ

$ git push origin master

or…

$ middleman deploy

記事を書く=> git commit => git push

=> その場で反映

いつものエディタで

Markdownで記事を書き git commit

GitHub Pagesに即反映 git push

普段の開発の流れで ブログが書ける！

Middleman 最高

Middlemanで 技術ブログを書こう！

ドキュメントに載せてもらえます

ご静聴ありがとうございました