no_picture

GitHub Pages で jekyll を使うなら safe: false で開発したほうが良いかもしれない

3月ぐらいから GitHub Pages でも使える Jekyll のプラグインが一部使えるようになりました。 最新の github-pages gem の v18 だと jemoji - GitHubの絵文字が使える jekyll-mentions - @github-id と、書くと自動でユーザへのリンクになる jekyll-redirect-from - 別のページからこのページに飛ばせる jekyll-sitemap - sitemap.xml が自動生成される が使えます。 ローカルで開発する場合、_config.yml に safe: true と記述してしまうと、これらのプラグインが動作しません。 GitHubに push すると動作してました。 ただし、GitHub上では safe: true の状態で動いてるはずなので、注意が必要です。(実際に確認はしてないけど) github-pages v19 で Jekyll が 2.0.2 になるのでこれはこれでまた違ってくるかもしれませんが、確認していません。(まだリリースされてない) そういえば、SASS とか CoffeeScript が使えるようになりそうなので非常に期待したい v19 です。 ローカルやTravisで生成すればだいたいのことができますが GitHub で生成できるとGitHub 入門として使いやすいですし、どんどん機能拡張されると良いですねー。 補足 プラグインを利用するには _config.yml に gems: - jekyll-mentions - jekyll-redirect-from - jemoji - jekyll-sitemap の記載が必要です。

no_picture

Jekyll 使うときは exclude: vendor しとけって話らしい。

素のJekyll なんて使う人はあまりいないと思うけど一応書いておこう。 以前から jekyll build が失敗するっていう話をしてる人がいて自分の環境じゃ、おきてなかったんだけど、bundle install --path vendor/bundle してるのが原因だったらしい。 _config.yml に exclude: ['vendor'] するのがよいでしょう。 ついでに以下のような感じにした。 exclude: ['Gemfile','Gemfile.lock','Rakefile','vendor'] 具体的なコミットはこちら 素のJekyllから拡張してる場合は注意。 middleman などなどを使うことをおすすめしとこう。 自分が発見したネタじゃないけど記録しておいた。

no_picture

pygements を利用してると jekyll serve --watch のファイル生成が遅いらしい

以下の質問を受けた。 反映されるのに、なんでこんなに時間がかかるのじゃ。 Jekyll on Vimeo https://t.co/RrU2ABliHw — Terasawa Shuuhei (@shuuheyhey) August 30, 2013 --watch を使うと jekyll build の部分が異常に遅くなるらしい。 初回は遅くないのですが、ファイル変更を検知した時が遅い。 @shuuheyhey pygments: falseにすると速いんですけど、それだとシンタックスハイライトが効かないという…。 — Hideki Abe (@_hideki_a) August 30, 2013 pygments を有効にしていると遅くなるらしい。 --watch を使うとファイルの生成する部分がメインスレッドでないのがあやしい。pygements は popen とかつかって実行されるっぽいし。 とはいえ、原因を特定するまではいけなかった。 仕方ないので無理矢理ごまかす方法を考えた。 以下のような Rakefile を用意してみた。 require 'directory_watcher' require 'jekyll' desc 'preview' task preview: [:watch] do sh 'bundle exec jekyll serve' end task :watch do options = Jekyll.configuration({}) source = options['source'] destination = options['destination'] dw = DirectoryWatcher.new(source,

no_picture

ローカルサーバ起動と同時にブラウザで開く。 - Jekyll とかで。

この記事は すごい広島 #015 で書いております。 GitHub Pages などを使っていて、プッシュする前に ローカルサーバで確認すると思います。以前、Github Page で公開する サイトを ローカルで Preview するのに使ってる方法 で、その方法を紹介しました。 $ rake preview で、ローカルサーバを起動するようにしています。 今回は、この rake preview コマンドを実行した時に自動的にブラウザを起動して http://localhost:4000/ へアクセスするようにしてみました。 Rakefile をこんな風に書きました。 require 'bundler/setup' require 'thread' require 'launchy' desc 'preview' task :preview do Thread.new do sleep 1 Launchy.open 'http://localhost:4000/' end sh 'bundle exec jekyll serve --watch' end 別のスレッドで Launchy を使って起動しているだけです。 ちなみに Gemfile はこんな感じ。 source 'https://rubygems.org' gem 'github-pages' gem 'launchy' 関連 Github Page で公開する サイトを ローカルで

no_picture

github-pages Gem というのが用意された - Github Page で使う gem のバージョンをあわせてくれる

Github Page は Jekyll プロジェクトを push すれば HTML に変換してくれます。 これを使う場合、Github 側とローカルで確認するときの Gem のバージョンを揃えておきたいです。 そのために Gemfile を記述しますが、github-pages という gem が用意されました。 というわけで、試してみた。 source 'https://rubygems.org' gem 'github-pages' bundle install とか実行せばあ必要な gem が手に入ります。 以前は、 source 'https://rubygems.org' ruby '1.9.3' gem 'jekyll', '=1.1.2' gem 'liquid', '=2.5.1' gem 'redcarpet', '=2.2.2' gem 'maruku', '=0.6.1' gem 'rdiscount', '=1.6.8' gem 'RedCloth', '=4.2.9' gem 'kramdown', '=1.0.2' のように書く必要ありました。 とてもすっきりしています。 利用する gem が更新されても bundle update ですむので、とても嬉しいですね。 もっと具体的に 依存している Gem の情報は gemspec にあります。 github-pages

no_picture

Jekyll を使ったGithub Pages で関数呼び出し的なことをする

この記事は すごい広島 #005 で試したことです。 Github Pages で Jekyll を使う場合は機能拡張などすることが基本的にできません。 関数のように汎用のHTMLを作成して、引数で動作を変えるようなことがしたい。 本来ではあれば Liquid のカスタムタグなどが使えるのですが、jekyll が safe モードで動いているので、カスタムタグを作成することができません。 しかし、 liquid の includeタグ を利用することでそれっぽいことができます。 流れは あらかじめ変数をセットしておく include を使う セットしておいた変数で分岐したり、表示内容として利用する となります。 変数 変数をセットするには FrontFormatter を利用するか、liquidの assignタグ か caputerタグを利用することになります。 FrontFormatterを使う FrontFormatter は ページの先頭に書く yaml の部分です。 例: title: "すごい広島 #5" date: 2013-06-19 19:00:00 place: tullys page.place という変数を追加して tullys という文字列をセットできます。 assign を使う Liquid の assign タグを利用して { % assign place = tullys % } place という変数を追加して tullys

no_picture

Github Page で公開する サイトを ローカルで preview するのに使ってる方法

すごい広島 #2 でしたことを書きます。 日記のほうはこちら 2013年8月23日追記。下記の方法を改良したものがあります。 ローカルサーバ起動と同時にブラウザで開く。 - Jekyll とかで。 以上、追記終了。 私は、Jekyllを使用したサイトをプレビューする際に、jekyll のインターフェイスが変化しても、または、jekyll 以外のものを使用しているときのことも考えて、 rake preview でサイトのプレビューをできるようにしています。 「Octopressでも、Hakyll でも Jekyll でも rake preview にしたいんだ!!」 具体的には以下のような、Rakefile を作成しました。 desc 'preview する。 http://localhost:4000/' task :preview do sh 'bundle exec jekyll serve --watch' end Jekyll は v1.0.0 で preview するためのコマンド名が変わりました。 あとは、他の人が gem のインストールのを軽減するために、Gemfile も書きました。 source 'https://rubygems.org' gem 'jekyll', '=1.0.2' gem 'liquid', '=2.5.0' gem 'redcarpet', '=2.2.2' これで、ruby と bundler さえ入っている人は bundle instnall というコマンドを実行すれば、サイトのプレビューができるようになります。 bundler は gem

no_picture

広島Ruby勉強会 #30で Liquidの簡単な説明をした

広島Ruby勉強会 #030で Jekyl の中で使用されている テンプレートエンジン Liquid のざっくりとした説明をする LT しました。 大したネタもないし、そんなに凝ったこともしてないですが、公開しておきます。

no_picture

Github で Jekyll を使う時に調べたこと

Github で Jekyll を使うときにできることとか調べたので整理しておきます。 今日の成果物。 この記事をいきなりポーンと書いても仕方ない気がして前の記事を書きました。 Github Pages について整理しておきます Jekyll を利用するかしないかの判断材料などに利用してください。 利用できる マークアップ HTML Markdown Textile 関連する gem liquid- テンプレートエンジン redcarpet - 高機能高速動作な Markdown maruku - 高機能な Markdown rdiscount - 高速動作な Markdown RedCloth - Textile Pygemnts.rb - シンタックスハイライト できること Layoutの利用 - ネスト可能 includeの利用 - Jekyll Boostrap がかなり利用してる様子 記事の作成 atom.xmlや記事一覧の作成 - site.posts 変数から参照可能 シンタックスハイライト できなかったこと Rubyのコードを書いて改造 pluginの利用 対応するファイルのないものを自動生成 拡張タグ 利用できるタグの追加 gem を読み込んで情報源などにする Scss, Sass, Less などメタCSSの利用 CoffeeScript などの利用 Jekyll Bootstrap がしてること