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

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

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

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

Jekyllstrap - (Source Code)

主な機能

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

また、広告とか設置する予定がなかったので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臭でよかったら使ってやってください。

Jekyllstrap - (Source Code)

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

• Jekyllいつやるの？ジキやルの？今でしょ！
• 静的HTMLジェネレータ jekyllを考えるの巻

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

• 静的ページをJekyllとGrunt/Yeomanで作る

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