Astroでマークダウンファイルをページにする際の相対パスの注意点

少しハマったのでメモ。

Astroのマークダウンファイル

Astroではマークダウンファイルをページとしてルーティングすることができます。
例えば、

pages
　└1.md

というマークダウンファイルは、http://mysite.com/1というURLとして表現されます。
また、

pages
　└posts
　　└1.md

の場合は、http://mysite.com/posts/1というURLになります。

ハマったこと

これを利用して、次のようなディレクトリ構成もつWebサイトを作成していました。

pages
　└diary
　　├20220829.md
　　├20220830.md
　　└index.astro

Webサイトのトップページの下に日記のトップページがあり、そこから各日付のページにアクセスするような構造です。各日付のページには、いちいち日記のトップに戻らなくても前後の日にアクセスできるようなリンクを用意しました。

ハマったのは、そのリンクを作っていたときのことです。HTMLでWebサイトを作るときと同じように考えれば、各日付のマークダウンファイルは全て同じディレクトリにあるので、20220829のページから見た相対リンクで

<a href="./20220830">次の日へ</a>

と書けば、次のページへ飛んでくれそうです。

しかしデプロイしたものを動かしてみると、mysite.com/diary/20220829/20220830というURLになり、404エラーになってしまいました。

ビルドされたHTMLを見てみる

そこでAstroがどのようなHTMLを生成しているのか調べてみました。するとこのような構造になっていました。

pages
　└diary
　　├20220829
　　│　└index.html
　　├20220830
　　│　└index.html
　　└index.html

つまり、1つのマークダウンファイルから「ファイル名と同名のフォルダ+index.html」が生成されていました。そのため、20220829のページから20220830のページにアクセスするには、一度上のディレクトリに移動しなければいけませんでした。

というわけで、

<a href="../20220830">次の日へ</a>

とすることで解決できました。

まとめ

それにしても、各ページ用のフォルダを作ってindex.htmlファイルを置くことで、あたかも動的WebサイトであるかのようなURL体系を実現するとは、よく考えるものだなと感心してしまいました。