読者です 読者をやめる 読者になる 読者になる

はざまブログ

cybozu.com の中の人の個人ブログ

ずぼらな人のための Jekyll 入門

毎日暑いですね。私はようやく明日から夏休みです。

さて。今日は Jekyll で Web サイトやブログを作る話です。
俺もう知っているって人は、特に得られる情報ないと思います。ずぼら入門なんで。

Jekyll は Ruby でできたツールで、CSS や HTML のテンプレートから静的にページを生成してくれます。
GitHub Pages のエンジンとして使われており、以下のようなサイトが Jekyll で動作しています。

いまどきブログサイト作るだけなら、たとえばこのはてなブログでもいいし、Blogger でもいいし選択肢はたくさんあります。 なぜ手間をかけて Jekyll というツールを使いたいかと言えば、以下の利点があるからです。

  1. 任意のコンテンツを置ける

    スタティックコンテンツを置くだけなので、なんでも置くことができます。
    例えば Doxygen で生成したドキュメントを置くこともできるので、API マニュアルの公開に便利です。

  2. 広告がない

    無料ブログホスティングサービスは通常広告がついてきますが、GitHub Pages なら広告がつきません。 静的ファイルなので、Amazon S3 でホストすることもできます。

  3. 手元で編集してプレビューできる

    編集は Markdown でテキストファイルを作るだけ。
    プレビューは jekyll serverake preview と打つだけです。

難点があるとしたら、Jekyll 単体では綺麗なスタイルがあたった Web サイトにはならないことです。 でも大丈夫、色々な人がオープンソースとして Jekyll のテーマを公開してくれています。

有名どころとしては Jekyll BootstrapOctopress がありますが、ちょっと古かったりテーマが少ないようなので、新しめのテーマを検索するのがお勧めです。

「Jekyll theme github -bootstrap」

というキーワードで検索するとたくさん出てくると思います。

あとは書いてある通りの手順でセットアップするだけなんですが、一つお勧めの設定を紹介しておきます。

Markdown のレンダリングエンジンが選べるようになっているのですが、機能が豊富な redcarpet を使いましょう。 _config.yml に以下のように記述してください。

markdown: redcarpet 
redcarpet: 
    extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", 
                 "tables", "with_toc_data"] 

あと gem install redcarpet も必要かも。gem もないって人はそこから。

$ sudo apt-get install ruby1.9.1
$ sudo gem install jekyll redcarpet

これで GitHub Flavored Markdown のようにコードブロックやテーブルを記法で書くことができるようになります。

以上、Ruby も HTML も CSS も知らなくても、きれいな Web サイトを作るずぼらな方法でした。