インストール gem をインストールし, 新たに Middleman を使ったサイトを作成するために CLI から middleman init my_project を実行します。 インストール方法を参照する サイトのカスタマイズ cd my_project してください。 Middleman は細かい設定なしに動作します。各ディレクトリの意味や サイトのカスタマイズの行い方を理解するためにドキュメントを読んでください。 カスタマイズ方法を参照する
BUILD_DIR = 'build/2013' DEPLOY_DIR = 'deploy' DEPLOY_BRANCH = 'master' DEPLOY_REPOSITORY = 'git@github.com:nodefest/nodefest.github.com.git' module.exports = (grunt) -> grunt.task.loadNpmTasks 'assemble' grunt.task.loadNpmTasks 'grunt-contrib-sass' grunt.task.loadNpmTasks 'grunt-contrib-copy' grunt.task.loadNpmTasks 'grunt-contrib-clean' grunt.task.loadNpmTasks 'grunt-contrib-connect' grunt.task.
11/22(金) に開催された Tokyo Middleman Meetup #1 に参加してきました。 P4D さん管轄のイベントとして開催していただき, 長らく東京で Middleman の勉強会したいなーと思っていたのでとてもありがたかったです。何か勉強会を東京で〜と考えた時に群馬にいるのはかなり不利な感じある。 発表資料 Middleman Guides 日本語版 に関する発表をしました。群馬に戻ってから何があって Middleman をいじってるのか, Middleman Guides との向き合い方といった主旨のお話でした。 デザイナーとプログラマそれぞれが使う可能性のあるツールについて話すというのは結構難しい。両者に 1 度に話す内容は難しいので, 今回は「主にデザイナー向け, Middleman を始めようと思っている人, 始めたばかりの人」といったターゲットをイメージしな
2013年11月22日、今をときめく静的サイトジェネレータ "Middleman" について語る会ことTokyo Middleman Meetup #1が株式会社ジェニュインブルー様で開催されました。 せっかくの機会だったので、自分もお気に入りのcss frameworkであるところのSusyについてお話させていただきました。 MIDDLEMAN MEETS SUSY by kumano ayumi スライドに出ているgridのサンプルはこちら。 Middleman Meets Susy - DEMO (Source on github) 当日の様子はこんな感じでした。(@machidaさんのtweet引用しまくります) ayumikoさんの発表。 (at SonicGarden Inc.) [pic] — https://t.co/awdzESOV68 — machida (@machi
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい(ヘッダ・フッタくらいは共通化したい) JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの?と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
gh-pagesブランチの更新自動化がゴール masterにpushするだけで内容を動的に取得してgh-pagesブランチにpushをします。 今回もTravisのお力を借ります。以下がポイントになります。 gh-pagesブランチの内容はmiddlemanによる出力 masterブランチにコミットしたあと、Travisからmiddlemanのビルドを実行 生成された内容をgh-pagesブランチへpush middlemanのインストール middlemanはrubyで動く静的サイトジェネジェネレータです。 テンプレートをほぼhtmlで記述することが出来て、ブログ等の管理を非常に簡単にすることが出来ます。 jekyll使ったことのある人なら学習コストはさらに低めです。詳しくはこの辺り。 middleman - web サイトの開発をシンプルに まずはmiddlemanのインスト
ちょうど一年くらい前にWordPressからJekyllに移行したんだけど、今回middlemanで作りなおしてみた。 hokaccha/webtech-walker - GitHub 特にJekyllに不満があったわけでもなく単に技術的興味によるもの。 middleman Middleman: Hand-crafted frontend development middlemanはほぼJekyllのようなものなんだけど、Asset Pipelineが使えたり、テンプレートがerbとかhaml、Slimなどで書けたり、helperが充実してたりする。 RailsのViewまわりの機能をそのまま持ってきたような感じなので、普段Rails使ってる人にとってはJekyllよりも使いやすいかもしれない。個人的にもJekyllよりはmiddlemanのほうが好みだった。 調べた時にでてくる情報量など
よく、要素につけるidやclassを動的にしたい時とかに、Hamlだとこんな感じの書き方をする %li{class: "item #{item.name}"}この書き方がSlimだとダメっぽくてつまずいた。 Slimだとこんな感じの書き方になるらしい li[class="item #{item.name}"]こういうのもいけるっぽい。割と素のHTMLに近い感じで書けるのですね。 li class="item #{item.name}"そして条件つけるとこうなるっぽい li class=(if item.present? ? "#{item.name}" : 'no-item') li class=("#{item.name}" if item.present?)classを複数付け、かつ1つのclassにのみ条件を付加する場合はこのように入れ子にすればよいみたい。 li class="it
前回は Middleman を習得する前準備として Haml という HTML の拡張メタ言語について学びました。 #00 Haml 再入門 Haml は Middleman においてレイアウトファイルやテンプレートファイルを作成するのに使用します。デフォルトでは Haml ではなく ERb という Ruby 標準のテンプレートファイル形式が使われており、こちらは PHP や JSP と非常によく似た書式となっています(※拡張子はerb)。 身も蓋もないことを言ってしまうと、Haml を知らなくても ERb 形式で書くことで Middleman を使うことは可能です。ソースコード自体も標準の HTML 内に Ruby のコードが埋め込まれたような見た目なので、学習コスト自体は ERb のほうが低いかもしれません。しかしそれを考慮したとしても、コーディング自体の効率性やコードの見通しの良さか
先日 Middleman を使って sapporojs.org をリニューアルしました。 その際に得られた Middleman での web サイト運用の知見をご紹介します。 Middleman って?? 簡単に説明すると、静的 web サイトジェネレータです。 Jekyll をご存知の方であれば、似たようなものをイメージしていただけるとよさそうです。 Middleman の方が優れている点は、 Asset Pipeline や Template Helpers などの便利な機能を利用をすることができることです。 http://middlemanapp.com/ 逆に Jekyll の方が有利な点としては、 GitHub pages が使えるためデプロイが楽であるという点があります。 そこで今回は、 Jekyll と同じく Middleman を GitHub pages に簡単にデプロイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く