Bootstrap臭のする静的サイトが作れるJekyllテンプレ

2014年1月4日 Masaki Ogata

AuthorMasaki Ogata

Published 2014年1月4日

新年あけましておめでとうございます。彡^･∋★A Happy New Year★∈･^ミ

以前使っていたJekyllテンプレートのデザインに飽きたので、「【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方」を横目にBootstrap臭のするお洒落じゃないレスポンシブなテンプレを自分で作ってみました。

ｽ、ｽﾐﾏｾﾝ…、CSSへの理解が足りないエンジニアの自分にはBootstrapのオイニーがとれない(´；ω；｀)ﾌﾞﾜｯ

このサイトのデザインを刷新する目的で作ったので、ブログ向けの実装がメインになってます。

また、広告とか設置する予定がなかったのでPC向けのレイアウトでよく見かける一般的なサイド領域は無視しました。

アーカイブ、カテゴリー、タグ一覧

一年毎の投稿一覧、カテゴリー毎（投稿が多い順）の投稿一覧、タグ毎（投稿が多い順）の投稿一覧を生成します。
インデックス一覧のページング

_config.ymlで5件毎のページング処理を有効にして、ページネーションをインデックスページに追加しました。
ATOMフィード

一応ブログなのでRSS的な配信ができるようにatom.xmlを生成します。
SEO対策

Google先生がインデックスし易いようにsitemap.xmlとrobots.txtを生成します。
Google Analytics対応

サイト計測用にGoogleアナリティクスのjsを各ページに埋め込んでます。 _config.ymlに取得したトラッキングコードを定義するだけで機能が有効になります。
```
  google_analytics :
    tracking_id : 'UA-XXXXXXXX-X'
```
AddThis対応

投稿ページの共有用と記事レコメンド用にAddThisのjsを埋め込んでます。 Analyticsと同様に_config.ymlに取得したコードを定義するだけで機能が有効になります。
```
  addthis:
    pub_id: 'ra-XXXXXXXXXXXX'
```
レスポンシブ画像対応

Bootstrap3からレスポンシブ画像に対応したようなので、対応したimgタグを生成できるように簡単なJekyllプラグイン作りました。

~~SEO強化（schema.orgの構造化データ対応）~~

~~最近記事でちょいちょい見かけるやつ。全然理解してないのでSEO勉強がてら実装してみたい。~~ (1/14追記) スキーマ(Schema.org) 入門編を参考に実装してみました。
テーブル構造のレスポンシブ対応

Bootstrap自体はtableタグのレスポンシブに対応してるんですが、どうもdivタグでtableタグを囲むと定義した部分より1つ前の部分に記載されたMarkdown構文が解釈されず、そのまま出力されるという現象に悩まされてます。 Markdownの仕様なのか、パーサーで使用しているredcarpetの仕様なのか、もしくは不具合なのか原因不明ですが、なんとかしたいﾃﾞｽ。。

Bootstrap臭でよかったら使ってやってください。

もっとJekyllについて詳しく知りたい方はこの辺のサイトを参考にすると分かりやすいでしょう。

Gruntを組み込んで使ってる方もいるようです。

会社でもGHEが導入されたのでプライベートリポジトリで社内用メモ帳として使ってみるかな〜 |ﾟДﾟ)))ｺｿｰﾘ!!!!