前提知識

GitHub Pages

GitHubのリポジトリで管理されるhtml/css等をもとに静的ページを公開するサービス・仕組み。これを利用してブログをつくったり、ライブラリのドキュメントページをつくったりできる。

Jekyll

Markdownでページを作れる静的ページジェネレーター。Rubyで書かれたプログラムで、Rubyのパッケージ管理ツールのRubyGemsで配信されている。 【Jekyllいつやるの?ジキやルの?今でしょ!】にいろいろ書いてあって助かりました。

  1. Rubyを公式サイトからダウンロード&インストール
    (OS X は最初からRuby入ってる)
  2. gem install jekyll

これだけで使えるから楽ちん。

やりたいこと

  • 最速で公開したい
  • Markdownで記事を書きたい
  • 後々たくさんカスタマイズしたい
  • 広告とかごちゃごちゃしたものはいらない

これを満たすのが GitHubPages + Jekyll でした。ちなみにGitHubPagesは裏ではJekyllが動いているようで、ビルドやサーバ再起動なんかも勝手にやってくれるので、その点もありがたい😂

やったこと

Jekyll用のファイルの準備

Jekyllのコマンド叩いてもよかったんだけど、お手軽そうかつReadme読みやすそうだったのでJekyll-nowを利用。書いてある通りだれど、このブランチからソースをフォークしてくることで必要なファイルが全部そろっちゃうよ🎉

テーマ選び&適用

Jekyll Themesからよりどりみどり。他にもテーマを選ぶサイトはいくつかあるみたい(似たような名前のサイトばっかりだな…)。

適用方法は様々だけど、それぞれのThemeのリポジトリのソースをまるっと持ってくるってものが多いので、その場合は上の「Jekyll用のファイルの準備」の手順が不要になる。あろえの場合は、_includes_sass_config.yml*.htmlを置き換えました。

_config.ymlの編集

ブログタイトルや作者の情報などは_config.ymlに書かれているので、それを書き換える必要がある。また、テーマによってカテゴリやSNS連携情報なども記載しているので、そのへんも適宜。

トップページの「続きを読む」

はてなブログにて青空コメントアウトというブログを並行運営してるのだけれど、あちらではトップページに一定の高さで記事を並べる(はみ出る部分を「…」として統一のレイアウトで記事が並ぶ状態にする)ことができなかったので、なんとかこっちで実現したかった。 現在このブログに使っているテーマではLiquidというテンプレートエンジンが採用されていて、これによって最初の50単語までを表示して残りを「…」で省略するということが可能になったのだ😉

<p>{{ post.content | strip_html | truncatewords: 50 }}</p>

けど落とし穴が…。50単語というのは英単語の話。日本語には適用されない!!!😰
というわけで対応が必要なんだけれど、どうせなら最初の○文字とかじゃなくて記事の要約を書けないかなーと思って、記事冒頭のメタデータに(タイトルと同じように)要約を書いて、それを表示するようにしました。

記事.md

---
title: Jekyll + GitHub Pages でブログをつくってみた
outline: このブログを公開するまでの道のりを公開します。Jekyllについてはネット上に情報が多い分散り散りになっているイメージがあるので、シンプルに必要なことだけまとめました。
---

index.html

{% if post.outline %}
<p>{{ post.outline }}</p>
{% else %}
<p>{{ post.content | strip_html | truncatewords: 50 }}</p>
{% endif %}

いったんこれにて

いったんこれにてブログの体裁が整ったので、後はどんどん記事を書いて_postに投下するだけ。所感としては、デザインテーマがいろんなプラグインを組み込んでくれてるおかげでカスタマイズしやすそう(依存性が低くて切り離したりプラグイン追加したりしやすそう)だったり、 Liquidテンプレートが扱いやすくてカスタマイズページもガンガン作れそうだったり、何もせずともレスポンシブデザインだったり、GitHub上で「New File」とかやって記事つくれちゃったり…いろいろ便利。メインブログの青空コメントアウトの下書きとしても活躍しそう。

両ブログを今後ともよろしくっ😘