第1章 セクション7　リンクの書き方

このセクションでは、サイト内の記事へのリンクの書き方を説明します。

URLの書き方

リンクの元となるURLについて、まず説明します。

URLは、サーバーのリソース（HTMLファイルなど）の場所を見つけるための、いわば住所のようなものです。 その意味では「アドレス」と言われることもあります。

その構造は、例えばつぎのような形をしています。

https://example.com/a/b/c/d/efg.html

ブラウザとサーバ間の通信のためには、この完全なURL（「絶対URL」などという）が必要ですが、簡略化されたURLも用いられます。

簡略化されたURLを使うには、すでにブラウザがウェブページを読み込んでいる必要があります。 その表示ページの場所を用いて、簡略化されたURLを完全なURLに直してから通信をします。

「ルート相対パス」「相対パス」というのは、URLの仕様書RFC 3986とは異なります。 その意味では、これは通称あるいは俗称です。

ベースURL

ドメインのURLをいくつかの部分に分けることがあります。 例えばweb-1とweb-2という部分に分けたとすると、それぞれのURLは

となります。 この/web-1や/web-2をベースURLといいます。 ベースURLによって、ドメインを複数の部分に分けられるので、次のようなことができます。

実際、GitHub Pagesでは、一人のユーザに対してusername.github.ioというドメインを割り当て、その人の持つ複数のレポジトリに対して、username.github.io/repository-nameのように、レポジトリ名のベースURLを割り当てます。 それにより、一人のGitHubユーザが複数のウェブサイトを構築することができるのです。

ベースURLがある場合、ビルドディレクトリ_siteのルートは、ドメインのルートではなく、ベースURLの下位に位置することになります。 例えば、ベースURLが/web-1であったとき、ビルドされたファイル/about/index.htmlのURLは

https://domain-name/web-1/about/index.html

でなければなりません。

https://domain-name/about/index.html

ではないことに注意してください。 それをルート相対パスで表現すると、

OK ダメ
/web-1/about/index.html /about/index.html

ということになります。

設定ファイルとベースURL

Jekyllの設定では、ベースURLは_config.ymlに記述することになっています。

baseurl: /web-1

細かいことですが、スラッシュのあるなしが重要です。 「先頭にはスラッシュがあり、最後にはスラッシュがない」ということを守る必要があります。 なぜなら、ベースURLとルート相対パスの間のスラッシュがひとつになるからです。

ベースURL ルート相対パス 結合されたパス 正しい/間違い
/web-1 /about/index.html /web-1/about/index.html 正しい
/web-1/ /about/index.html /web-1//about/index.html 間違い

ベースURLをソースファイル上で参照するには、Liquidのコードを使い

{{ site.baseurl }}

とします。 これは、Liquidで処理されると/web-1という文字列になります。

ソースファイルの生成とディレクトリ構成の変化

Jekyllでindex.md、about.mdや、ブログ記事をビルドすると、ファイルの拡張子や位置が変わります。 これに対して、画像ファイルは同じ位置にコピーされるだけです。 次の表では、ソースファイルはJekyllのルートディレクトリを基準（/）として、ビルドされたファイルは/_siteを基準（/）として表します。

ビルド前 ビルド後
/index.md /index.html
/about.md /about/index.html
_posts/2026-01-30-st-george-church.md /george/town/2026/01/30/st-george-church.html
_posts/2026-01-31-st-george-church.md /george/town/2026/01/31/kapitan-keling-mosque.html
/assets/images/StreetArt.jpg /assets/images/StreetArt.jpg

このことから、ソースの中の位置関係でリンクを貼ってもビルド後のリンク先にはならない（ずれが生じる）ということがわかります。 リンクを正しく書くために次のような方法をとります。

サイト内のファイルへのリンクの書き方

画像ファイルのようなルートからの位置が変わらないファイル

画像のようにビルドしても位置が変わらない場合は、ベースURLと組み合わせたルート相対パスを使えば良いことになります。

ソースファイルの中で_config/ymlに書かれたベースURLを先頭に付け加えるには次のように記述します。

{{ "/assets/images/KapitanKelingMosque.jpg" | relative_url }}

{{と}}で囲まれた部分はLiquidのコードです。 縦棒の右にrelative_urlがあると、縦棒の左の文字列の先頭にベースURLが付け加わり、

/web-1/assets/images/KapitanKelingMosque.jpg

となります。 ベースURLが入ることにより、正しいルート相対パスにすることができます。

ブログ記事のようにルートからの位置が変わるファイル

ブログ記事のようにルートからの位置がJekyllのビルドで変わってしまう場合はlinkタグを使います。 linkタグは、対象のファイルのビルド後のパス（_siteをルートとしたパス）を返します。 また、引数のリンクが間違っている場合はエラーを出して教えてくれるので、その点も役立ちます。 これにはベースURLが含まれないので、その直前に{{ site.baseurl }}をつけます。

{{ site.baseurl }}{% link ソース内のルートからの相対パス %}

linkタグの引数は、_config.ymlの位置から見た相対パスです。 ルート相対パスではないので、スラッシュから始まりません。 注意してください。

ソースの記述と、ビルド後のパス名を比較しましょう。

ソース ビルド後
{% link index.md %} /index.html
{% link about.md %} /about/
{% link _posts/2026-01-30-st-george-church.md %} /george/town/2026/01/30/st-george-church.html

画像ファイル（静的ファイル）の場合にも、linkタグを使うことができ、引数にルート相対パスを使うこともできます（記事ファイルではルート相対パスを使えません）。 しかし、複雑さを避けるなら、画像ファイルを含むすべてのファイルで_config.ymlからの相対パスを使うようにすれば良いでしょう。

ブログ記事の追加とリンク

それでは、ブログ記事を追加し、その中にリンクを書いてみましょう。

ファイル名は2026-01-31-kapitan-keling-mosque.mdとし、ファイルの内容は次のようにします。

---
layout: post
title:  カピタン・クリング・モスク
date:   2026-01-31 9:00:00 +0900
category: Mosque
---

[セント・ジョージ教会]({{ site.baseurl }}{% link _posts/2026-01-30-st-george-church.md %})
と同じハーモニー通りを少し歩いたところに**カピタン・クリング・モスク**があります。
このモスクはインド系ムスリムによって建てられました。

## インドとイスラムの融合

1801年に設立されたこのモスクは、ペナンのインド系ムスリム・コミュニティの中心地です。
「カピタン」はリーダー、「クリング」はインド系移民を意味しています。

![カピタン・クリング・モスク]({{ "/assets/images/KapitanKelingMosque.jpg" | relative_url }})

観光客も、見学できる時間帯があります。
その際は肌の露出の少ない服装が望ましいです。

記事を編集したら（上の内容をコピペしても良いです）、_postsディレクトリ直下に保存します。

出だしのセントジョージ教会のところにリンクが埋め込まれています（{{と}}で囲まれた部分と、{%と%}`で囲まれた部分）。 このリンクは、他のブログ記事へのリンクなので、linkタグが使われています。

下から3行目は画像ファイルへのリンクです。 ルート相対パスにrelative_urlをつけてリンクを表しています。