個人用wikiをJekyllに移行したときにやったこと1 [Jekyll紹介編]

10年くらい前から、ブログとは別に学習した内容をアウトプットする場所として@wikiを利用していたのですが、それを数年前にGithubに移行し、Github Pagesで管理していました。 しかしGithub Pagesでは使用不可なプラグインやバージョンが古かったりしたため、最近になってGithub Pages のJekyllから脱却し、素のJekyllでコンテンツを管理するためにやったことの備忘録です。

Jekyllとは

Jekyll

jekyllrb-ja.github.io

Markdownで記述可能な静的サイトジェネレーター
Jekyll本体はRubyで記述されている

クイックスタート

Rubyがインストールされている環境でインストール

$ gem install jekyll

Jekyllコマンドで雛形作成

$ jekyll new myblog 
$ cd myblog
$ bundle install

localでJekyllサーバ立ち上げ (http://localhost:4000 で確認可能)

$ bundle exec jekyll serve

ディレクトリ構成

.
|-- Gemfile
|-- Gemfile.lock
|-- _config.yml
|-- _includes
|-- _layouts
|-- _posts
|-- _sass
|-- _site
|-- index.md

.config.yml

Jekyllの設定ファイル

_posts

ブログポストを保存するディレクトリ
下記のフォーマットでファイルを保存する必要がある

YEAR-MONTH-DAY-title.MARKUP

_layouts

コンテンツのレイアウトを保存するディレクトリ

_includes

レイアウトやポストに組み込むパーツを保存するディレクトリ

_site

Jekyllのビルド成果物を保存するディレクトリ

_sass

ここに保存されたSassがmain.scss にインポートされる

Liquid

JekyllではテンプレートエンジンLiquidを使用している

shopify.github.io

条件分岐

if - endif もしくは、unless - endunlessで囲む

{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

{% unless product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endunless %}

ANDとORはerbとは違い、and、or で記述する

{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

Loop

forで配列のループを記述する

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

変数

assign で変数を使用できる

{% assign my_variable = "tomato" %}
{{ my_variable }}

フィルター

Liquidではオブジェクトに対してフィルターがサポートされている。
詳細については公式サイトを参照

capitalize

先頭文字を大文字にする

{{ "title" | capitalize }}

conpact

空の配列を除去

{% assign site_categories = site.pages | map: "category" | compact %}

{% for category in site_categories %}
- {{ category }}
{% endfor %}

- business
- celebrities
- lifestyle
- sports
- technology

where

配列の中から指定されたkeyの条件に一致するものを抽出する

{% assign foo_pages = site.pages | where:"title","Foo" %}

url_encode/url_decode

URLをエンコード/デコードする

{{ "%27Stop%21%27+said+Fred" | url_decode }}
{{ "john@liquid.com" | url_encode }}

パーマリンク

Jekyll上でページやポスト、コレクションを出力するパス

グローバルは_config.ymlで定義

下記では、カテゴリー、年、月、日、タイトルの順でポストのURLが構成される

permalink: /:categories/:year/:month/:day/:title

Front Matter

Jekyllで管理するファイルは、3点ダッシュで囲まれたYAMLの記述で定義済みの変数を設定できたりする

layout: post
title: Blogging Like a Hacker
categories
  - Blog
tags
  - Article

変数	説明
layout	使用するレイアウト
title	出力するタイトル
category(categories)	ポストのカテゴリー(配列で複数指定可能)
tags	ポストのタグ

プラグイン

Jekyllではコンテンツ作成に役立つプラグインが提供されてます。

プラグインのインストール方法

• Gemfileに記述する

gem "jekyll"

group :jekyll_plugins do
    gem "jekyll-sitemap"
end

• config.ymlに記述する

plugins:
  - jekyll-sitemap

自分のサイトに利用したプラグインを紹介します。

jekyll-seo-tag

検索エンジンとSNSタグを動的に設置してくれる

github.com

jekyll-sitemap

サイトマップを自動生成してくれる

github.com

ベースとなるurlを指定する必要がある

url: "https://example.com"
plugins:
  - jekyll-sitemap

jekyll-last-modified-at

Jekyllではポストの日付は作成したファイルに基づいて、page.date で取得可能だが、更新日時は取得できない。
そこで、Gitの更新日時を追って、page 変数に更新日時を追加してくれるのが、このプラグイン

Github Pages非対応

plugins:
  - jekyll-last-modified-at

last-modified-at: # 日付のフォーマットを変更する
    date-format: '%d-%b-%y'

以下で最終更新日を出力する

{{ page.last_modified_at }}

jekyll-archives

アーカイブページを作成するプラグイン

github.com

Github Pages非対応

jekyll-archives:
  enabled: []
  layout: archive
  permalinks: # 以下のリンクにアーカイブページが作成される
    year: '/:year/'
    month: '/:year/:month/'
    day: '/:year/:month/:day/'
    tag: '/tag/:name/'
    category: '/category/:name/'

jekyll-optional-front-matter

Jekyllでは_posts以外のファイルの場合、Front Matterを先頭に記述しないと、ビルド対象にしてくれない。 そこで、自動でデフォルトのFront Matterの挿入サポートしてくれるのが、このプラグイン。

github.com

今回はJekyllの紹介編ということで、基本的なJekyllの内容とLiquidテンプレートについて、プラグインについて記載しました。
次回は実際に行ったカスタマイズの内容について触れていこうと思います。