Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
佐藤 竜之介(Ryunosuke SATO)
Sapporo.js
Sapporo.js-2013.07.27
http://www.flickr.com/photos/poria/161511765
How to relaunch
“sappo...
提供
Sapporo.js
Community for people who like JavaScript.
自己紹介
@tricknotes
I 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.14
http://www.ospn.jp/osc2013-do/
OSC Hokkaido
2013.9.28
Ruby勉強会@札幌
2013.11.11
Ember.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
“sappo...
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.coffee
second.js.coffee
Asset Pipeline
Compile
first.js.coffee
main.js.coffee
second.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. push
master
2. hook
3. build
4. push
gh-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 で快適な開発を!!
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
How to relaunch "sapporojs.org" ~Introduction to middleman~
Upcoming SlideShare
Loading in …5
×

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

2,282 views

Published on

Published in: Technology, Design
  • Be the first to comment

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 で快適な開発を!!

×