Jekyll + Github Pagesでブログを作る


この記事はFrontrend Advent Calendar 2014 – Qiita 12日目の記事です。
あんまりフロントエンドっぽくないけど、ちょっと前に英語ブログを作ったときにJekyll + Github Pagesで作ってこれがかなりしっくり来たのでまとめます。

要件

まず英語ブログを作る前に決めていた要件は以下の二つでした。

  • ブログはマークダウンで書きたい
  • 自由度が高い方が良いのでブログサービスは使いたくない
  • でもサイトをどこかにホストするのは面倒くさい

んでたどり着いたのが、Jekyll + Github Pagesでした。

 

Jekyllとは

Jekyllとは、Rubyで書かれた静的サイトのジェネレーターです。DBは不要でgemをインストールしてごにょごにょやると、Markdownファイル等から簡単にHTMLが生成されます。Github Pagesにも標準搭載されています。Github PagesのJekyllは色々と制限があるので、今回はJekyllで生成された静的ファイルをGithub Pagesにホストすることにしました。

 

Githubでリポジトリの用意

Github Pagesを使うためにまずブログ用のレポジトリを作ります。Github Pagesに搭載されたJekyllを使う場合は”username.github.io”というリポジトリ作って、”master”ブランチにコミットするだけで、”http://username.github.io”にサイトがホストされます。

しかし今回はGithub PagesのJekyllは使わず、静的ファイルをホストする形にしたいので、違う名前でリポジトリを作ります。その場合、”gh-pages”ブランチのファイルが”http://username.github.io/repository”にホストされます。

詳しくはこちらをご覧下さい。

 

Jekyllのインストール

Jekyllをインストールしてブログを作ります。

これで色々なファイルがmyblog以下に出来上がります。
先ほど作ったリポジトリと紐づけておきましょう。

Jekyllサーバーを立ち上げてみます。

“http://localhost:4000″にjekyllサーバーが立ち上がります。

 

記事を書く

記事のMarkdownファイルは”_posts”以下に配置します。ファイル名は”YYYY-MM-DD-article-title.md”という形式で保存します。例えば”2014-12-12-jekyll-github-pages.md”というファイルを作成すると、”http://localhost:4000/2014/12/12/jekyll-github-pages.html”というファイルが出来上がります。

また、JekyllのMarkdownはファイルの先頭を下記の様に書く事で、様々なセッティングを記述できます。

セッティングの記述方法等、詳しくはこちらをご覧ください。

 

デプロイ

前述の通り、”username.github.io”でリポジトリを作った場合は”master”ブランチにpushすれば良いだけです。しかし今回は違う名前で作っているので、Github Pagesを利用するには”gh-pages”に静的ファイルをコミットしなければならないので若干面倒です。

その場合は拙作のjekyll-gh-pagesを使ってみてください。

Rakefile

まず準備をします。

以下のコマンドを実行すると、Jekyllで静的ファイルを生成して、”gh-pages”にコミットしてプッシュします。

 

おわりに

基本は以上になります。僕のブログのレポジトリはこちらです。

ちなみにJekyllのデザインは探すと色々あるので、そういったものをベースにしても良いと思います。