how to relaunch "sapporojs.org" ~introduction to middleman~
DESCRIPTION
TRANSCRIPT
佐藤 竜之介(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 ~
今日の話* Middleman の紹介* sapporojs.org での Middleman 運用について
対象者
* 会社のホームページ* 自分のブログ* イベントの告知サイト
こんなサイトを簡単につくりたいひと:
Hot
* 会社のホームページ* 自分のブログ* イベントの告知サイト
こんなサイトを簡単につくりたいひと:
* 現在 Jekyll でサイト運用をしている
Jekyll days
Good
* GitHub pages デプロイが楽* コンテンツ管理が楽
Bad
* 独自記法つらい...* haml とか scss とか使いたい... (自分でビルドすればいいんだけど...)* ファイル分けるのめんどい...
そんなあなたにオススメなのが...
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 すればよいのでは!
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.
https://github.com/tricknotes/ember-middleman
* Ember.js 関連のJSを gem で管理* handlebars サポート* テンプレートジェネレータ
Features:
まとめ
✓ Middleman は静的サイトジェネレータ✓ Web 制作に使うと、楽に開発できる✓ GitHub pages での運用も簡単
sapporojs.org の運用方法のご紹介でした
http://www.flickr.com/photos/donfuan/7744043986
Middleman で快適な開発を!!