静的サイトジェネレータの一つとして最近注目を集めているフレームワークの一つにAstroがあります。
そのテンプレートはこちらから選べます。最近の注目リポジトリについてはGitHubのTrending Astro repositories on GitHub todayから確認できます。
テーマの中で注目を集めているのはOpenblogです。見栄えもよく、無料で大変使い勝手のいいテーマだと思います。
しかし、このテーマには一つ、大きな問題があります。それは（少なくとも私の環境では）「本文中の画像の表示ができない」ことです。
解決方法
結論から言うと、GitHubの以下の議論を見てください。
投稿者は以下の点を問うています。
- （Head部分にある）Hero Image（カバー画像）はdist/_astroディレクトリに格納され、ちゃんと見える
- しかしMDXファイルのBody部分の画像ファイルはdist/_astroディレクトリに格納されない
- 結果としてBody部分の画像が表示されない
ほかの方々も以下の現象を報告しています。
- TinaCMSで画像を指定して
src/assets/imagesディレクトリに入れても反映されない
解決方法としては、画像をpublic/imagesディレクトリに保存し、以下のコードをastro.config.mjsに書き加えると解決できるそうです。（私は未挑戦）
export default defineConfig({
media: {
tina: {
// mediaRoot: '/src/assets/images',
// publicFolder: ''
mediaRoot: '/public/images',
publicFolder: ''
}
}
})
しかし、いまだに明確な解決方法は見つかっていないようです。
結論
私が作ろうとしていたブログは画像がメインだったので、画像の問題でドハマリしてしまってはにっちもさっちもいきませんので、別のテーマを選ぶことにしました。転進というやつです。（fuwari | astroにしました。）
Demoではカバー画像以外、Body部分には画像を使っておらず、この問題が生じないようにしています。
Qiita、Zenn、Stackoverflowで調べても同様の話題は出てこず、デプロイしたCloudflare Pagesの問題かと思いましたが、Cloudflareのページでもそんな問題は起きていないようでした。Astroのページでも画像の保管場所についての話が出てくるだけです。灯台下暗し、結局、GitHubで見つかりました。
さらに厄介なのが、local環境ではちゃんとbody部分の画像が表示されることです。デプロイする際に画像の圧縮とdist/_astroディレクトリへの移動をするはずが、うまくできていないのがそもそもの原因のようです。そのため、CloudflareやAstroに原因があるのではなく、このテーマ「Openblog」に原因があるようです。
私はTypeScriptに詳しくないので、解決方法は思いつかず…わかったのは以上のようなことでした。