1. 佐藤 竜之介(Ryunosuke SATO)
Sapporo.js
Sapporo.js-2013.07.27
http://www.flickr.com/photos/poria/161511765
How to relaunch
“sapporojs.org”
~ Introduction to Middleman ~

2. 提供
Sapporo.js
Community for people who like JavaScript.

3. 自己紹介

4. @tricknotes
I am a software developer who
love JavaScript and Ruby.
http://tricknotes.hateblo.jp/

5. I love OSS

6. 108Commits to Ember.js

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

8. 2013.9.14
http://www.ospn.jp/osc2013-do/
OSC Hokkaido

9. 2013.9.28
Ruby勉強会@札幌

10. 2013.11.11
Ember.js ハンズオン
http://www.deos.co.jp/SK010.html

11. */

12. よろしく
お願いします

13. 佐藤 竜之介(Ryunosuke SATO)
Sapporo.js
Sapporo.js-2013.07.27
http://www.flickr.com/photos/poria/161511765
How to relaunch
“sapporojs.org”
~ Introduction to Middleman ~

14. http://sapporojs.org/

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

16. 対象者

17. * 会社のホームページ
* 自分のブログ
* イベントの告知サイト
こんなサイトを簡単につくりたいひと:

18. Hot
* 会社のホームページ
* 自分のブログ
* イベントの告知サイト
こんなサイトを簡単につくりたいひと:
* 現在 Jekyll でサイト運用をしている

19. Jekyll days

21. Good

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

23. Bad

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

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

26. http://middlemanapp.com/

27. What is Middleman?

29. Middleman is a
static site
generator using
all the shortcuts
and tools in
modern web
development.

30. features:
* Asset Pipeline
* Local Data
* Blogging
etc ...

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

32. Asset Pipeline
Concat

33. first.js.coffee
main.js.coffee
second.js.coffee
Asset Pipeline
Compile

34. first.js.coffee
main.js.coffee
second.js.coffee
main.js
Asset Pipeline
minify + Asset Hash

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

36. Local Data

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

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

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

40. $ bundle exec middleman server
$ bundle exec middleman build
開発用のサーバを起動
html 生成

41. demo

42. Getting Started
http://middlemanapp.com/getting-started/

43. Middleman days

44. Improvement

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

46. but...

47. 運用面

48. デプロイがちょっと面倒...
$ cd build
$ git commt -a -m “Update”
$ git push origin gh-pages

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

50. https://travis-ci.org/

51. 1. push
master
2. hook
3. build
4. push
gh-pages

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

53. ✓ Middleman を使いたい

54. And more...

55. for Ember.js users.

56. http://emberjs.com/

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

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

59. http://sapporojs.org/

61. http://sapporojs.org/

62. まとめ

63. ✓ Middleman は静的サイトジェネレータ
✓ Web 制作に使うと、楽に開発できる
✓ GitHub pages での運用も簡単
sapporojs.org の運用方法のご紹介でした

64. http://www.flickr.com/photos/donfuan/7744043986
Middleman で快適な開発を!!