jekyllでリダイレクト処理を行う

これまで、jekyll でブログを投稿していたのですが、WordPressに移行したので、WordPressの記事へ転送する対応を行いました。その時の手順を残します。

1. やりたいこと
2. 前提事項
3. リダイレクト方法の調査
- 3.1. 301
- 3.2. 302
4. 方針
5. jekyllでのリダイレクト設定

やりたいこと

jekyllで生成したページを他サイトのページに転送したい。

前提事項

jekyllで生成したページはGithub Pagesで運用しているため、
htaccessやphpは使えない。

リダイレクト方法の調査

リダイレクトする際、HTTPステータスコード「301」を返して、ページ遷移する方法と「302」を返して、ページ遷移する方法がある。
違いは、恒久的なリダイレクトか一時的なリダイレクトかどうか。

301

恒久的なリダイレクトをする場合に利用される。
URL自体を変更してしまうことが多い。

302

「302」は、一時的なリダイレクトをする場合に利用される。
URLは変更せず、別のページを表示したりするケースが多い。

方針

Github Pages × jekyll で301リダイレクトをやりたいが、事例が少なく、
jekyll 公式リポジトリでもmetaを使ったリダイレクトプラグインしかない。
jekyll 公式プラグイン「jekyll-redirect-from」を利用する。

jekyll/jekyll-redirect-from:
Seamlessly specify multiple redirections URLs for your pages and posts.
https://github.com/jekyll/jekyll-redirect-from

jekyllでのリダイレクト設定

Gemfile の最下行に以下を追加

gem 'jekyll-redirect-from'

jekyll-redirect-from をインストール

$ bundle

実行結果

Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 12.3.3
...
Fetching jekyll-redirect-from 0.16.0


Your user account isn't allowed to install to the system RubyGems.
  You can cancel this installation and run:

      bundle install --path vendor/bundle

  to install the gems into ./vendor/bundle/, or you can enter your password
  and install the bundled gems to RubyGems using sudo.

  Password: 

Installing jekyll-redirect-from 0.16.0
Using jekyll-seo-tag 2.1.0
Using plainwhite 0.6 from source at `.`
Bundle complete! 5 Gemfile dependencies, 30 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

_config.yml のplugins設定に、以下を追加

plugins:
  -- jekyll-redirect-from

_layouts/default.htmlの、head開始タグ直下に追加

<head>
  {% if page.redirect_to %}
  <link rel="canonical" href="{{ page.redirect_to }}"/>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="refresh" content="0;url={{ page.redirect_to }}" />
  {%- endif -%}

_layouts/default.htmlの、body開始タグ直下に追加

<body>
  {% if page.redirect_to %}
  <h1>Redirecting...</h1>
    <a href="{{ page.redirect_to }}">Click here if you are not redirected.<a>
    <script>location='{{ page.redirect_to }}'</script>
  {%- endif -%}

以下のように、redirect_to: を追加する

---
layout: post
comments: true
title:  "zoom の始め方から使い方をまとめる"
date:   2020-07-26 00:00:00 +0000
categories: zoom
redirect_to: http://danroo.com/tool/post-82/
---

meta refresh による、リダイレクトですが、目的は達成できました。