Jekyll とは

Ruby 製の静的サイトジェネレータ。

  • Markdown や HTML/CSS を利用してウェブサイトを生成
  • ブログのような形態を意識しており、テンプレートを用いて簡単にウェブページが作成できる
  • GitHub Pages はコレで動いている

基本的な使い方

(TODO)

GitHub Pages における利用

(TODO)

便利プラグイン

jekyll-redirect-from

https://github.com/jekyll/jekyll-redirect-from

リダイレクトの設定をする。

リダイレクト先 ページに対応する .md ファイルの YAML Front-matter で以下のような設定を行う。

---
redirect_from: /foo/
---

複数指定したいとき：

---
redirect_from:
  - /foo/
  - /foo/bar/
---

jekyll-gist

https://github.com/jekyll/jekyll-gist

gist のコードスニペットを埋め込める。

{% gist hkawabata/84464b4853dfdce81214f102746b0011 %}

jekyll-sitemap

https://github.com/jekyll/jekyll-sitemap

サイトのルートに sitemap.xml を自動生成する。

jekyll-seo-tag

https://github.com/jekyll/jekyll-seo-tag

検索エンジン向けのメタタグを生成する。

_config.yml:

plugins:
  - jekyll-seo-tag

webmaster_verifications:
  google: ...

_layouts/default.html:

<html>
  <head>
    {% seo %}
    <title>{{ page.title }}</title>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Tips

404

ルートディレクトリに 404.html または 404.md を配置する。

※ 404.md の場合、デフォルトでは _layouts/default.html が適用される（変更する場合は 404.md の Front-matter でlayoutの設定を行う）

Liquid タグのエスケープ

{% raw %}と{% endraw %}で挟む。

{% raw  %}
この中身がエスケープされる。
{% endraw  %}

本ページのように{% raw %},{% endraw %}自体を表示させる方法については変換元のマークダウンファイルを参照。