Jekyllで年月日別ページを生成する

Jekyllのブログでは/2020/ (year) や/10/ (month) にアクセスされた際、見られるページが生成されていません。そこで、サイトのディレクトリ構造に合せたページを生成するためにjekyll-archives を導入します。

使用しているバージョンは下記のとおりです。

jekyll (4.1.1)
jekyll-archives (2.2.1)
~~jekyll-tagging (1.1.0)~~

jekyll-archives は年月日ごとのページ、カテゴリ及びタグごとのページを生成してくれます。ページの生成場所をパーマリンク設定に合せれば、今回の目的にぴったりです。

jekyll-archivesのインストールは下記をGemfileに追記しbundle installするだけです。

# Gemfile
group :jekyll_plugins do
  gem 'jekyll-archives'
end

Jekyllのブログ投稿は、通常 /category1/category2/year/month/day/article-title.html に生成されますが、このサイトでは下記のようにパーマリンク設定を変更しています。

# _config.yml
# Permalink setting
permalink: /:year/:month/:title:output_ext

パーマリンク設定に合せてjekyll-archivesを設定すると、下記のようになります。

# _config.yml
plugins:
  - jekyll-archives

# jekyll-archives setting
jekyll-archives:
  enabled: ['year','month']
  layout: archive_page
  permalinks:
    year: '/:year/'
    month: '/:year/:month/'

これで各年 (例: /2020/index.html) と各月 (例: /10/index.html) のインデックスページが生成されます。 (もちろん適切なテンプレートが必要です)

また、このサイトではjekyll-taggingを使ってタグごとのページとフィードを生成しています。

jekyll-taggingの設定は以下です。

# _config.yml
# jekyll-tagging setting
tag_page_layout: tag_page
tag_page_dir: tag
tag_feed_layout: tag_feed
tag_feed_dir: tag

jekyll-taggingの機能はjekyll-archivesとjekyll-feedで代替可能です。

上記のtag_pageをjekyll-archivesで、tag_feedをjekyll-feeedで置き替えます。

# _config.yml
# jekyll-archives setting
jekyll-archives:
  enabled: ['tags']
  layout: tag_page
  permalinks:
    tag: '/tag/:name/'

tag_pageについては、Paginationの導入に備えて/tag/tag_name.htmlから /tag/tag_name/に変更しています。

# _config.yml
# jekyll-feed setting
feed:
  tags:
    path: '/tag/'

ただし、すべてが代替できるわけではありません。

jekyll-taggingには記事に適用されているタグ (page.tags) からリンクを生成するtagsフィルタとサイトで使用されているすべてのタグ (site.tags) からリンクを生成するtag_cloudフィルタが用意されていましたが使用できなくなるので、同等のものを用意する必要があります。

<ul>
{%- for tag in tags -%}
  <li>
    <a href="{{ tag | prepend: "/tag/" | append: "/" | related_url }}"></a>
  </li>
{%- endfor -%}
</ul>

タグ別のページのURLが変更になったので、.htaccessに設定を追加します。

# redirect tag page
RewriteRule ^tag/(.*).html$ https://otti.xyz/tag/$1/ [R=301,L]

最終的なjekyll-archivesの設定は以下のようになりました。

# _config.yml
# jekyll-archives setting
jekyll-archives:
  enabled: ['year','month','tags']
  layouts:
    year: year_archive
    month: month_archive
    tag: tag_archive
  layout: tag_page
  permalinks:
    year: '/:year/'
    month: '/:year/:month/'
    tag: '/tag/:name/'

Jekyll-archivesを使って、サイトのディレクトリ構造に沿ったページを生成し、 jekyll-feedとの連携でjekyll-taggingをjekyll-archivesに置き替えました。

Tag cloud

関連投稿