BlankSlate

いや、そういう声もあるというだけです

にっき

メモ用のページをJekyllでゴリゴリつくった。

Jekyllの経験は昔つくったLog村まとめだけなんだけど、テンプレートの仕組みをよく理解しないで書いたので、めちゃくちゃ汚い。今読んでもまったくわからない(ので、村まとめをフルスクラッチで作りなおしてくれる方募集中です)。

モチベーション

前書いたとおりなんだけど、投稿のためにmasterブランチにpushするので、Current streakを稼げるんじゃないかと思ったため。

方針

ローカルで使ってる自作メモ用CSSをそのまま当てて、最低限記事一覧をリストで見れるくらいにしとこうと思ったけど、見た目がしょぼいと使うモチベーションが起きないので、Qiitaを丸パクリ。

あとは、同じBootstrap使ってるんだから、GistList1よりはかっこ良くしたいなぁという無駄なライバル意識。

使ったライブラリ等の一覧

  • Bundle(依存関係の解決)
  • Jekyll(pages-gemでGitHub側で動いてる環境をそのままローカルで再現できる)
  • Less(CSSを手で一個ずつ書くのが面倒だった)
  • Guard(後述するLessの自動コンパイルとか)
  • Bootstrap(外枠)
  • highlight.js(記事中のコードのシンタックスハイライト)
  • Font Awesome(アイコンフォントセット)

コーディング

アドベントでは受けが悪いのでカット。

基本的に、外枠はNuitterでの成果物をそのまま当てて、それプラス、ヘッダにある編集履歴とか編集リクエストの作成もちゃんと動くようにした(履歴はGitHubのファイルコミット履歴、編集リクエストはPR作成に飛ぶようにした)。

Jekyllとは

さすがにこれは説明しておかないといけないので。

簡単に言っちゃうと、指定されたディレクトリ構造に従ってファイルを置いてビルドすると、HTMLを吐き出してくれる静的ウェブページジェネレータ。

それだけだと普通なんだけど、Liquidっていうテンプレートエンジンを使って、HTML内でも共通しているコンポーネント、例えばヘッダーとかフッター、ナビゲーションバーをそれぞれ別個のファイルとして別けておいて、使いたいところでインクルードすることで、DRYな感じにできる。みたいなツール。

<!DOCTYPE html>
<!-- このページの基本レイアウト -->
<html>

  {% include head.html %}

  <body>
    {% include navbar.html %}

    <!-- {{ content }}に各ページのメイン部分が入る -->
    {{ content }}

    {% include footer.html %}
  </body>
</html>

前述したとおり、村まとめもJekyllを使ってるんだけど、その頃はそういうの全く理解しないで使っていたので、全てのページを1からHTMLを手書きして、それをコピーしていくっていうバカみたいな書き方をしている。あたしって、ほんとバカ。

いいとこ

Redcarpetのreadmeちゃんと読んだら、fenced_code以外に色々な拡張Markdown記法を有効に出来るみたいで、せっかくなのでGitHub準拠+footnoteを有効にした2Jemojiも有効にしたので絵文字が使える:sushi:

あと、Guard::LiveReloadでライブリロード出来るようにした。Lessのコンパイルで元々使う予定だったけど、ライブリロードも出来るっぽいので入れておいた。previmとは違って必ず保存しないと更新されないけど、いちいちブラウザにフォーカスを移して<C-r>押すよりは楽。

最後に、リポジトリそれ自体がサイトの構成物全てだから、gemをbundle installしてJekyllのプレビューサーバをローカルで立ち上げたら、ヘッダ・フッタ等含めたサイト全要素のライブプレビューができること。出来るのは当たり前と言えば当たり前なんだけど。

学び

  • Bootstrapはだいぶ小慣れてきた感がある。ページトップの記事一覧で使った.list-group要素とか初めて使った。
  • Font Awesomeは偉大。アイコンがあるのとないのでは画面の印象が全く違う。
  1. GistListは今あるbody要素全体をdiv.containerに入れるだけでも、だいぶ変わると思うんだけど

  2. ただ、注釈に飛んで元の文に戻ると、navbarに被って元の文が見えない。なんとかしたい。

History