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へリダイレクトすることが出来る。
トップページにアクセスするとリダイレクトする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 の公式ドキュメントが非常に役立った。
欲しかったり、大切な情報は公式ドキュメントに書いていることが多いので、読んでみると面白いかもしれない👀
Discussion