How to relaunch "sapporojs.org" ~Introduction to middleman~

1,962 views
1,891 views

Published on

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,962
On SlideShare
0
From Embeds
0
Number of Embeds
895
Actions
Shares
0
Downloads
2
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

How to relaunch "sapporojs.org" ~Introduction to middleman~

  1. 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. 2. 提供 Sapporo.js Community for people who like JavaScript.
  3. 3. 自己紹介
  4. 4. @tricknotes I am a software developer who love JavaScript and Ruby. http://tricknotes.hateblo.jp/
  5. 5. I love OSS
  6. 6. 108Commits to Ember.js
  7. 7. /* * advertising * about Ember.js * * !!Important!! *
  8. 8. 2013.9.14 http://www.ospn.jp/osc2013-do/ OSC Hokkaido
  9. 9. 2013.9.28 Ruby勉強会@札幌
  10. 10. 2013.11.11 Ember.js ハンズオン http://www.deos.co.jp/SK010.html
  11. 11. */
  12. 12. よろしく お願いします
  13. 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. 14. http://sapporojs.org/
  15. 15. 今日の話 * Middleman の紹介 * sapporojs.org での Middleman 運用について
  16. 16. 対象者
  17. 17. * 会社のホームページ * 自分のブログ * イベントの告知サイト こんなサイトを簡単につくりたいひと:
  18. 18. Hot * 会社のホームページ * 自分のブログ * イベントの告知サイト こんなサイトを簡単につくりたいひと: * 現在 Jekyll でサイト運用をしている
  19. 19. Jekyll days
  20. 20. Good
  21. 21. * GitHub pages デプロイが楽 * コンテンツ管理が楽
  22. 22. Bad
  23. 23. * 独自記法つらい... * haml とか scss とか使いたい... (自分でビルドすればいいんだけど...) * ファイル分けるのめんどい...
  24. 24. そんなあなたに オススメなのが...
  25. 25. http://middlemanapp.com/
  26. 26. What is Middleman?
  27. 27. Middleman is a static site generator using all the shortcuts and tools in modern web development.
  28. 28. features: * Asset Pipeline * Local Data * Blogging etc ...
  29. 29. * Rails でお馴染み * CoffeeScript や SCSS を簡単に使える * haml や slim も使える * minify や concat ができる Asset Pipeline
  30. 30. Asset Pipeline Concat
  31. 31. first.js.coffee main.js.coffee second.js.coffee Asset Pipeline Compile
  32. 32. first.js.coffee main.js.coffee second.js.coffee main.js Asset Pipeline minify + Asset Hash
  33. 33. Local Data * data を yaml (or json) で管理できる * マスタデータ、カテゴリ一覧など * データを一箇所で管理できる
  34. 34. Local Data
  35. 35. Blogging * ブログ機能 * 日付付きURL * 続きを読む * 次のページ * タグ付け
  36. 36. * 2013-07-27-hello-world.html * /blog/2013/07/27/hello-world.html Blogging
  37. 37. 他にも機能は盛りだくさん!
  38. 38. $ bundle exec middleman server $ bundle exec middleman build 開発用のサーバを起動 html 生成
  39. 39. demo
  40. 40. Getting Started http://middlemanapp.com/getting-started/
  41. 41. Middleman days
  42. 42. Improvement
  43. 43. * asset のファイル分割が簡単 * haml、SCSS が使える * コンテンツの管理が楽
  44. 44. but...
  45. 45. 運用面
  46. 46. デプロイがちょっと面倒... $ cd build $ git commt -a -m “Update” $ git push origin gh-pages
  47. 47. 自動で build して deploy すればよいのでは!
  48. 48. https://travis-ci.org/
  49. 49. 1. push master 2. hook 3. build 4. push gh-pages
  50. 50. http://tricknotes.hateblo.jp/entry/ 2013/06/17/020229
  51. 51. ✓ Middleman を使いたい
  52. 52. And more...
  53. 53. for Ember.js users.
  54. 54. http://emberjs.com/
  55. 55. https://github.com/tricknotes/ember-middleman
  56. 56. * Ember.js 関連のJSを gem で管理 * handlebars サポート * テンプレートジェネレータ Features:
  57. 57. http://sapporojs.org/
  58. 58. http://sapporojs.org/
  59. 59. まとめ
  60. 60. ✓ Middleman は静的サイトジェネレータ ✓ Web 制作に使うと、楽に開発できる ✓ GitHub pages での運用も簡単 sapporojs.org の運用方法のご紹介でした
  61. 61. http://www.flickr.com/photos/donfuan/7744043986 Middleman で快適な開発を!!

×