how to relaunch "sapporojs.org" ~introduction to middleman~

佐藤 竜之介(Ryunosuke SATO)Sapporo.js

Sapporo.js-2013.07.27

http://www.flickr.com/photos/poria/161511765

How to relaunch“sapporojs.org”

~ Introduction to Middleman ~

提供

Sapporo.js

Community for people who like JavaScript.

自己紹介

@tricknotesI am a software developer who love JavaScript and Ruby.

http://tricknotes.hateblo.jp/

I love OSS

108Commits to Ember.js

/* * advertising * about Ember.js * * !!Important!! *

2013.9.14http://www.ospn.jp/osc2013-do/

OSC Hokkaido

2013.9.28Ruby勉強会@札幌

2013.11.11Ember.js ハンズオン

http://www.deos.co.jp/SK010.html

*/

よろしくお願いします

佐藤 竜之介(Ryunosuke SATO)Sapporo.js

Sapporo.js-2013.07.27

http://www.flickr.com/photos/poria/161511765

How to relaunch“sapporojs.org”

~ Introduction to Middleman ~

http://sapporojs.org/

今日の話* Middleman の紹介* sapporojs.org での Middleman 運用について

対象者

* 会社のホームページ* 自分のブログ* イベントの告知サイト

こんなサイトを簡単につくりたいひと:

Hot

* 会社のホームページ* 自分のブログ* イベントの告知サイト

こんなサイトを簡単につくりたいひと:

* 現在 Jekyll でサイト運用をしている

Jekyll days

Good

* GitHub pages デプロイが楽* コンテンツ管理が楽

Bad

* 独自記法つらい...* haml とか scss とか使いたい... (自分でビルドすればいいんだけど...)* ファイル分けるのめんどい...

そんなあなたにオススメなのが...

http://middlemanapp.com/

What is Middleman?

Middleman is a static site

generator using all the shortcuts

and tools in modern web development.

features:* Asset Pipeline* Local Data* Blogging

etc ...

* Rails でお馴染み* CoffeeScript や SCSS を簡単に使える* haml や slim も使える* minify や concat ができる

Asset Pipeline

Asset Pipeline

Concat

first.js.coffee

main.js.coffeesecond.js.coffee

Asset Pipeline

Compile

first.js.coffee

main.js.coffeesecond.js.coffee

main.js

Asset Pipeline

minify + Asset Hash

Local Data

* data を yaml (or json) で管理できる* マスタデータ、カテゴリ一覧など* データを一箇所で管理できる

Local Data

Blogging* ブログ機能* 日付付きURL* “続きを読む”* 次のページ* タグ付け

* 2013-07-27-hello-world.html

* /blog/2013/07/27/hello-world.html

Blogging

他にも機能は盛りだくさん!

$ bundle exec middleman server

$ bundle exec middleman build

開発用のサーバを起動

html 生成

demo

Getting Started

http://middlemanapp.com/getting-started/

Middleman days

Improvement

* asset のファイル分割が簡単* haml、SCSS が使える* コンテンツの管理が楽

but...

運用面

デプロイがちょっと面倒...

$ cd build$ git commt -a -m “Update”$ git push origin gh-pages

自動で build してdeploy すればよいのでは!

https://travis-ci.org/

1. pushmaster

2. hook

3. build

4. pushgh-pages

http://tricknotes.hateblo.jp/entry/2013/06/17/020229

✓ Middleman を使いたい

And more...

for Ember.js users.

http://emberjs.com/

https://github.com/tricknotes/ember-middleman

* Ember.js 関連のJSを gem で管理* handlebars サポート* テンプレートジェネレータ

Features:

http://sapporojs.org/

http://sapporojs.org/

まとめ

✓ Middleman は静的サイトジェネレータ✓ Web 制作に使うと、楽に開発できる✓ GitHub pages での運用も簡単

sapporojs.org の運用方法のご紹介でした

http://www.flickr.com/photos/donfuan/7744043986

Middleman で快適な開発を!!