[Jekyll] ドキュメントを見て使い方をざっくりまとめた

Jekyll Jekyll

Nプログラマです。

Jekyllのドキュメントを見る機会が多くなってきたので、学んだことをメモして残しておきます。

学ぶたびに追記するので、増えていきます。

理解している範囲で書いているので、用語が間違っているかもしれないです。

Jekyllとは

Ruby製の静的ファイルジェネレータ。読み方はジキル。
MarkdownやHTMLなどで記述されたファイルを変換して、静的サイト用のHTMLを生成してくる(ブログも可能)

GitHub Pagesもこれを使っている。
ちなみに最近はカスタムドメインに加えて、httpsが使えるようになった。

Front Matter

記述したMarkdownやHTMLがJekyllの変換対象になるために必要な記述。
色々な設定ができるけど、設定なしでも記述はする必要がある。

この記述のかたまりは、YAML Front Matterというらしい。

設定なしの記述

---
---
<!-- markdownやhtmlなどの記述が続く --!>

設定ありの記述(layoutの継承)

---
layout: default_page
---
<!-- markdownやhtmlなどの記述が続く --!>

変数

投稿記事(_posts/)で使える変数: date

_postsディレクトリに入っているファイルはdate変数がファイル名の日付によって上書きされているようです。

page.dateで表示できますが、そのまま表示するとUTCのoffsetまで表示されるので、以下のようにフィルタを使って整形します。

_posts/2019-1-1-post_name.mdの場合、フィルタを使って表示されるのは2019-01-01になります(1が01の表示になっているのはフォーマット指定によるもの)

コード

{{ page.date | date: '%Y-%m-%d' }}

結果

2019-01-01

_posts以外に配置しているhtmlの場合は表示されない。

投稿記事

_postsディレクトリにファイルを作成すればそれが投稿記事になる。
注意するポイントはファイル名。

決まったフォーマットで作る必要がある。

プラグイン

jekyll-sitemap

Jekyllのビルドでサイトマップを生成できるようになるプラグイン。
設定するだけで利用できるので、最初に設定しておいた方がいい。

注意点は、開発モードではURLがlocalhostなどになるので必ずビルドして生成すること。

設定でサイトマップの一部を対象から外すことも可能らしい。。。

投稿記事

jekyll-paginate

Jekyllでページネーションが使えるようになるプラグイン。
簡単な設定で利用できる。ただし、タグやカテゴリのページネーションはできないなど制約がある。

jekyll-paginate-v2もあり、こちらはタグやカテゴリのページネーションも対応できるみたい。ただし、GitHub Pagesでは対応していないので注意。

参考

Jekyll

公式ページ

Jekyll • Simple, blog-aware, static sites
Transform your plain text into static websites and blogs

公式ページです。
この記事を書いた時は、v3.8.5でした。
じっくりと読んでいけば大抵のことはできます。
ただ英語なので、読むのが大変ですね。

公式の日本語翻訳ページ

Jekyll • シンプルで、ブログのような、静的サイト
プレーンテキストを静的サイトやブログに変えましょう

公式ページの日本語翻訳版です。
こちらはアナウンスにある通り翻訳がメンテナンスなれていないので、最新の仕様を確認するには公式ページを見ましょう。

ざっくり概要をみるためなら、こっちで確認してもいいと思います。

GitHub

Pages

GitHub Pages
Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

httpsのサポート

Custom domains on GitHub Pages gain support for HTTPS – The GitHub Blog

タイトルとURLをコピーしました