ウェブサイトで IPFS を使う

必須ではありませんが、IPFS でホストするウェブサイトでは、別ドメインへのリンクを除き、相対リンクだけを使うことを強く推奨します。同じデータへ、次のような複数の（最終的には同等な）方法でアクセスできるためです。

• カスタムドメインから: https://ipfs.tech/index.html
• ゲートウェイから: https://cloudflare-ipfs.com/ipns/ipfs.tech/index.html
• 不変ハッシュで: https://cloudflare-ipfs.com/ipfs/QmNksJqvwHzNtAtYZVqFZFfdCVciY4ojTU2oFZQSFG9U7B/index.html

Web アプリケーション内で相対リンクだけを使うと、これらすべてに一度に対応でき、利用者の柔軟性も最も高くなります。まだ相対リンクを使っていない場合の切り替え方法は、利用中のフレームワークによって異なります。

これらのよく使われる JavaScript フレームワークについては、Pinata ↗ の ブログ記事 ↗ で解説されています。設定の小さな変更で対応できます。

Gatsby は React ベースの JavaScript フレームワークです。リンクを相対にする プラグイン ↗ があります。

_includes/base.html ファイルを追加し、次の内容を入れます。

{% assign base = '' %}
{% assign depth = page.url | split: '/' | size | minus: 1 %}
{% if    depth <= 1 %}{% assign base = '.' %}
{% elsif depth == 2 %}{% assign base = '..' %}
{% elsif depth == 3 %}{% assign base = '../..' %}
{% elsif depth == 4 %}{% assign base = '../../..' %}{% endif %}

このスニペットは、現在のページからサイトのルートへ戻る相対パスを計算します。ルートへリンクする必要がある各ページの先頭に、次を追加します。

{%- include base.html -%}

このスニペットでは、リンクの先頭に {{base}} も付けます。たとえば、href="/css/main.css" を href="{{base}}/css/main.css" に変更します。

ほかのフレームワークの場合、またはフレームワークを使っていない場合は、make-relative ↗ というスクリプトで、ウェブサイトの HTML を解析し、リンクと画像を自動で相対に書き換えられます。