はじめに
ウェブフレームワークAstro（Astro.js）を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。
この記事を読むとAstro.jsでの相対リンクのプラグインの設定方法がわかります。
Astro（Astro.js）とは
Astro.jsはウェブサイトやアプリを作るためのツールです。サイトの速度を上げ、リソースの使用を抑えることが目指されています。サーバーサイドで描画しながら静的なサイトを作ることができ、HTML、CSS、JavaScriptの最適化も自動で行います。ReactやVue、Svelteなどのフレームワークと組み合わせて使うことも可能です。
静的サイトも簡単につくることができ、ビルド後のフォルダを納品することも可能です。
▼Astro（Astro.js）公式サイト
https://astro.b
実際とても使いやすく静的サイトならもう全部これでつくればいいんじゃないかと思ってしまうほどです。
Astro.jsはjavasctriptを大量に生成するフレームワークではありません。逆に余計なjavascriptを生成しないようにします。
具体的にはbuildコマンドでサイトに必要な静的HTMLと必要最小限のjsを吐き出すことができます。
単純な静的サイトならbuildされたフォルダをそのままレンタルサーバーやホスティングサービスにアップするだけでリリースできてしまうのです。
この点（デプロイの汎用性）がほかのフレームワーク（Next.jsやVue、React）と違って扱いやすいといえる点でしょう。
ただしAstro.jsはデフォルトではリンクや画像パスが／（スラッシュ）から始まるパスになってしまいます。このままだとビルドされたフォルダをサイトのルートに置かないといけなくなってしまいます。
既存のサイトに子ページコンテンツとしてアップしたりするときには相対リンクに設定できると活用の幅が非常に広がります。
相対リンクの設定方法を覚えて気軽にAstro.jsで静的ページを作成しましょう。
相対リンクを実現するために
Astro.jsは相対リンクに対応していませんがプラグインが存在するのでそのプラグインを利用すれば画像パス、リンクパスを相対リンクに変更することができます。
プラグイン「astro-relative-links」の設定方法
プラグインは「astro-relative-links」というプラグインになります。
導入方法は非常に簡単で
npx astro add astro-native-linksこのコマンドをいれるだけで自動的に有効化されます
npm run devでの開発時には反映されませがnpm run buildでのビルド時には絶対パスで書いていたところが相対パスに変換されていることが確認できます。
