GitHubPagesを使ったBlogに草を生やす #Vue.js

GitHubPagesを使って、Blogを書いているのですが、GitHubPagesに草を生やす機能を作成したので、ざっくり解説します。

前提知識

GitHubPagesではJekyllを利用したWebPageを作成することが可能で、BlogはJekyllを利用して書いています。
JekyllではCoffeeScriptを使用することが出来るので、使用しています。
また、個人的にvue.jsを気に入っているので、使用しています。

作ったもの

こんな感じのものを作成しました。

解説

上記3つのファイルで構成されています。

posts_date.json

このJSONファイルは、書いた記事を日付別に扱うために存在しています。
~~Jekyllの記法を使って書いていること、JSON出力結果に無駄な空白を入れないために非常に可読性の低いファイルになっています~~
Jekyllでは、記事一覧をループを使用して取り出すことは出来るのですが、日付別に取り出すことが出来ない＆仮に独自に日付毎に取り出すプラグインを作成したとしても、GitHubPagesで使えない可能性がある(※未検証)ため、このようなファイルを作成しています。
非常に可読性が悪いのですが、最終的に次のようなJSONが出力されています。

posts_date.json

{
  "yyyy-mm-dd": [
    {"title": "...","url": "..."},
    ...
  ],
  ...
}

このJSONファイルを利用して、日付毎の記事の有無を判定しています。

gorw-grass.yml

このファイルは、背景色、月名、曜日名の値をまとめたものになります。
変更するときに、いちいちソースコードを読むのが面倒なのでこのように外部に出しています。

gorw-grass.yml

# BackGroundColor
less: 'dimgray'
one: 'rosybrown'
two: 'indianred'
more: 'firebrick'

# MonthName
month:
  jan: 'Jan'
  feb: 'Feb'
  mar: 'Mar'
  apr: 'Apr'
  may: 'May'
  jun: 'Jun'
  jul: 'Jul'
  aug: 'Aug'
  sep: 'Sep'
  oct: 'Oct'
  nov: 'Nov'
  dec: 'Dec'

# WeekName
week:
  sun: ''
  mon: 'mon'
  tue: ''
  wed: 'wed'
  thu: ''
  fri: 'fri'
  sat: ''

less ~ more はそれぞれCSSの背景色に対応しています。

less: 記事が0件
one: 1件
two: 2件
more: 3件以上

monthとweekは月名と曜日名に対応しています。
ここを日本語に書き換えれば、日本語の曜日名と月名を表示可能です。
表示しない場合は、空文字を指定します。

grow-grass.coffee

この*.coffeeは*.jsに置き換わります。
なので、HTML側で呼び出すときは、grow-grass.jsを呼び出します。

grow-grass.coffee

grow_grass = new Vue {
  delimiters: [
    '$'
    '$'
  ]
  el: `#grow-grass'
  # ...
}

jekyllで変数を呼び出す場合とvue.jsで変数を呼び出す場合に、どちらも2重波括弧を使用します。なのでvue.js側を$囲みに変更しています。
あとは、良い感じにcoffeeScriptでvue.jsを書いています。

<div id="grow-grass"></div>
<script async src="{{ site.url }}/assets/js/grow-grass.js"></script>

これで表示されます。

まとめ

今回文字色と背景色は指定していないため、読み込んだ環境に依存すると思います。
なので、gorw-grass.ymlの色さえ変更してしまえば、比較的どの環境にも移植しやすいのかな？と思います。
もし、GitHubPagesで、Jekyllを使ってブログを書く機会があれば使用してみてください。
どのような感じに表示されるか気になる方はこちらで確認してみてください。