GitHub PagesのJekyllと独自ドメインを使って任意のURLへのリダイレクトを実現する方法 (+ URL一覧表示)

皆さん、限られたスペースへURLを載せたりする場合どうしていますか？
短縮URLサービスがあるものの、オリジナル感を出すのが難しかったり。

今回は、自前の独自ドメインを使いつつも、短いURLを作成する方法を備忘録として書く。

もっと簡単な実現方法があると思うので、知っている人がいればそっとコメントに書いていってください🙇‍♂️

前提条件

• GitHubアカウントを所有していること
• 独自ドメインを所有していること

…など

リポジトリの作成

GitHub上でサクっと作ってしまう。

右上の + > New repository で Repository name を埋めて Create repository する。

Create a new repository

Jekyllの設定

_config.yml の作成

_config.yml とは、Jekyllの設定を行うファイル。

今回は、リダイレクトの設定が簡単に出来る jekyll-redirect-from プラグインを使用する為、以下のようにする。

gems:
    - jekyll-redirect-from

独自ドメインの設定

CNAME の作成

CNAME とは、GitHub Pages上で独自ドメインの設定を行うファイル。

リダイレクトに使用したい自前の独自ドメインを追記する。例は以下。

example.com

DNSレコードの設定

私はCloudflareを使用しているので、Cloudflareを例に説明する。

GitHub Pagesでは、CNAMEレコードのターゲットに {GitHubユーザ名}.github.io を指定する必要があるので、そのように設定を行う。

ルートドメインを使用したい場合は @ を入力

最低限の設定が終わったので、一度 Commit してGitHubのリポジトリに Push する。

GitHub Pagesの有効化

GitHub > 作成したリポジトリ > Settings > GitHub Pages の Source をPushしたブランチに変更して Save する。

GitHub Pagesの有効化

リダイレクトの設定

リダイレクト元のパスに対応したファイルを作成

今回は、https://example.com/o にアクセスすると https://example.org へリダイレクトすると想定する。

リポジトリ直下に o.md ファイルを作成して、以下のようにする (ファイル名がパスに対応)

---
redirect_to: https://example.org
---

Commit してGitHubのリポジトリに Push する。

GitHub PagesのBuildが完了してから https://example.com/o にアクセスすると https://example.org へリダイレクトする。

Example Domain

階層の深いURL (https://example.com/o/o) を作成したい場合:
リポジトリ直下に o ディレクトリ、その下に o.md ファイルを作成する

同じ要領で様々なURLへリダイレクトすることが出来る。

トップページにアクセスするとリダイレクトするURL一覧を表示

リポジトリ直下に index.md ファイルを作成して、以下のようにする。

{% for page in site.html_pages %}
{% if page.url != "/" %}
### {{ page.title }}
`{{ page.url | absolute_url | remove: ".html" | split: "://" | last }}` -> [`{{ page.redirect.to | split: "://" | last }}`]({{ page.redirect.to }})
{% endif %}
{% endfor %}

リダイレクト元のパスに対応したファイル に関しては、以下のように編集する。

---
title: {対応するサイト名など}
redirect_to: {リダイレクト先URL}
---

Commit してGitHubのリポジトリに Push すると、以下のようになる。

こんな感じになる

あとがき

タイトルの内容を実現するために Jekyll や Liquid の公式ドキュメントが非常に役立った。
欲しかったり、大切な情報は公式ドキュメントに書いていることが多いので、読んでみると面白いかもしれない👀