Astroでビルド時に絶対パスではなく相対パスで出力する【HTML/CSSデータ納品】

最近はHTML/CSSで納品する案件でもAstroで作ってしまいたくなるくらい、Astroは便利なフレームワークです。

通常ビルドされたデータはcssや画像ファイルなどの参照が相対パスではなく絶対パスで出力されます。Cloudflareなどのホスティングサービスで公開する際は問題にならないのですが、データ納品やレンタルサーバーにそのままアップする場合はそのまま使用することができません。

本記事ではデータ納品時などに、ビルドで出力されたHTMLを相対パスで出力しそのまま使用できる方法をまとめました。

ビルド時にHTMLを相対パスで出力する方法

相対パスで出力する方法は、astro-relative-linksを使用します。astro-relative-linksはビルド時にファイル参照パスを相対パスに変換してくれるプラグインになります。

開発頂きありがとうございます。

astro.config.mjsなどを編集してどうにかならないか検討しましたが、どうにもなりませんでした…。astro-relative-linksを使うことをおすすめします。

astro-relative-linksの使い方

実際の使い方を解説します。使い方はとても簡単で、たった2ステップで完了します。

astro-relative-linksをインストールする

npmでastro-relative-linksをインストールします。

npm install astro-relative-links

astro.config.mjsに追記する

つぎにastro.config.mjsに以下の内容を追記します。

import { defineConfig } from 'astro/config';
import relativeLinks from 'astro-relative-links';

export default defineConfig({
  // ...
  integrations: [relativeLinks()],
});

準備はこれで完了です。

ビルドする

後はいつも通りnpm run buildでビルドします。ビルドされたhtmlファイルを確認し、ファイルが相対パスになっていれば完成です。

<!-- astro-relative-links 導入前 -->
<link rel="stylesheet" href="/assets/style/index.css">

<!-- astro-relative-links 導入後 -->
<link rel="stylesheet" href="./assets/style/index.css">

HTMLで納品するときはastro-relative-linksを使いましょう

Astroで作ったサイトをHTML/CSSのデータ納品する際はファイルの相対パス化に気をつけましょう。相対パス化の要望は2023年頃からあったようですが、公式で未だ対応されていないところをみると今後も対応する可能性は少なそうですね。

もしこの記事が役に立ったと感じていただけた方は、ぜひX（旧Twitter）やブログなどでシェアしていただけると嬉しいです。

最後までお読みいただき、ありがとうございました！