前提知識

GitHub Pages

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

Jekyll

Rubyで書かれた静的ページジェネレーター。Markdownを静的ページに変換してくれるツールです。具体的には、以下の3つのファイルを用意するとそれを元に静的ページを生成してくれます。

  • Markdownで書かれたコンテンツ(ブログの記事など)
  • TemplateとなるHTMLやCSS
  • 設定ファイル( _config.yml )

基本の設定の仕方もかんたん。

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

参考：Jekyllいつやるの？ジキやルの？今でしょ！

やりたいこと

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

これを満たすのが GitHubPages + Jekyll でした。ちなみにGitHubPagesは内部でJekyllが動いているので、上記の必要な3つのファイルをGitHubのリポジトリに配置すると、自動でジェネレートしてデプロイまでしてくれます。ありがたい😂

(このブログではもう少し複雑なことをしたかったので、ジェネレート部分はGitHubに任せずに自分でやることにしました)

やったこと

Jekyll用のファイルの準備

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

テーマ選び＆適用

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

適用方法は様々だけど、それぞれのThemeのリポジトリのソースをまるっと持ってくるってものが多いので、その場合は上の「Jekyll用のファイルの準備」の手順が不要になります。このブログの場合はJekyll-nowでつくったベースにして、_includes、_sass、_config.yml、*.htmlをTemplateリポジトリのもので置き換えました。

_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」とかやって記事つくれちゃったり…いろいろ便利だなーという感じです。

というわけで今後ともよろしくお願いします。