Middelman + Google Spreadsheet を使ってみんなで編集できる静的サイトを作る - Qiita
最近 Middleman を活用しています。middleman は Rails からテンプレートエンジン部分だけを抜き出したようなもので、Haml や Slick などを使いたいが、ログイン処理などの動的なものは必要ないといった時に便利です。 静的なファイルのみの出力なので、Amazon S3 や Github Pages に、生成された HTML をアップロードすることでホスティング費用を劇的に少なでき、Wordpress 等のCMSのようにセキュリティ面を気にする必要もなくなります。 ブログの機能も備わっている他、データファイルを読み込むことができるので、データを元にページを生成するような事も簡単にできるのが魅力です。 今回、Code for Japan のイベント Social Hack Day のウェブサイトを作る際にも Middleman を使わせてもらいました。 システム全体は
Middleman + Foundation + Amazon S3 でのBlogサイト構築(8)Syntax Highlightの機能の追加
Posted on Mar 9 前回は記事の検索機能とコメント機能を追加する方法について書きました。今回Syntax Highlightの機能を追加して、Blogサイトは完成です。 Syntax Highlightの追加 middleman-syntaxというmiddleman公式の拡張があるので、これを使います。 Gemfileにmiddleman-syntaxを追加して、bundle installを実行します。 source 'http://rubygems.org' gem "middleman", "~> 3.2.1" gem "middleman-blog", "~> 3.5.1" gem "middleman-livereload" gem "nokogiri" gem "redcarpet" gem "html2haml" gem "middleman-disqus" ge
middleman-blogのハイライトにMonokaiテーマを使う - Room 3100
middleman-blogには、コードをシンタックスハイライトする機能があります。 middleman-syntaxをGemfileに加えて、必要な設定をconfig.rbに書くだけです。 middleman/middleman-syntax kramdownを使う場合は set :markdown_engine, :kramdown redcarpetなら set :markdown_engine, :redcarpet set :markdown, :fenced_code_blocks => true, :smartypants => true ですかね。 middleman-syntaxは内部でrougeというruby製pygmentsを目指しているハイライトパーサを使用しています。 jayferd/rouge これを利用して、rougeに用意されているハイライトテーマを利用する
middleman-ogp を作りました。
--- title: My First Fixture. description: This is my fixture Middleman article. ogp: og: image: '': http://mydomain.tld/path/to/fbimage.png secure_url: https://secure.mydomain.tld/path/to/fbimage.png type: image/png width: 400 height: 300 locale: '': en_us alternate: - ja_jp - zh_tw --- Hello ===== This is the __content__ <meta content='250606621791116' property='fb:app_id'> <meta content='http://
monolabs.org - monolabs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
WordPressからmiddlemanに移行してGithub Pagesで運用する方法
サイトをリニューアルしていました。 WordPressからmiddleman-blogに乗り換えました。 ホスティングもロリポップからgithub-pagesに乗り換え。 理由は普段使っているエディタでmarkdownでブログを書いてgitでデプロイする流れがやりたかったから。 static site generatorは数あれど、慣れたmiddlemanでやってしまおうと思っていました。 haml と sassでコーディングしています。コードはここに置いてあります→camuro.github.io 今回リニューアルするのにとった流れか下記の通りです。 WordPressからデータをmarkdown形式でブッコ抜く Pureを少し使ってmiddleman-blogでコーディング githubにorganizationアカウントを作る middleman-deployでdeploy トップレ
静的サイト開発ツールとしてのMiddlemanとGrunt - Webtech Walker
最近自分の周りを見ると、フロントエンドの開発ツールといえばGruntをみんな使ってるんだけど、Middlemanを使うのもけっこういいんじゃないかと思ったので比較してみる。 実現したいこと 例えば次のようなものをつくりたいとする。 HTMLは数ページ〜十数ページくらい（ヘッダ・フッタくらいは共通化したい） JSはconcatしてminifyしたい CSSはSassを使いたい 開発時はwatchしたり動的サーバーなりでJSやCSSは動的にビルドしたい 最終的には成果物として静的ファイルを出力したい まあ、フロントエンドの開発ではいたって普通な要件だと思う。普段サーバーサイドの開発してたり、サーバーサイドと一緒にフロントエンドも開発してる人にとっては、静的ファイルだけ成果物としてあればいいとかあるの？と思うかもしれないけど自分の周りではけっこうよくある。 Gruntとの比較について このような
Slimでセレクタを追加するときの書き方、及び 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWSのAPIをカジュアルに
Middleman Blogはじめました
Middleman: Hand-crafted frontend development