odan blog

ブログを Nuxt.js から Astro に引っ越した

モチベーション

ずっと更新してなかったブログを Nuxt.js から Astro に引っ越しました。

元々は技術的なメモを残す場として用意した場所でしたが、zenn.dev のスクラップ機能がリリースされてからは更新する理由がなくなっていました。

Astro を選んだ理由

Nuxt.js v3 がリリースされているので単純にバージョンアップするだけでもよかったですが、最近 Astro をよく聞くので勉強も兼ねてこちらを選択しました。

特に最近リリースされた Content Collections という機能を使ってみたいと考えていました。幸いにもこの機能は Nuxt.js の Content に似ているので引っ越し作業もスムーズでした。

引っ越し作業

段階的に引っ越すのは手間が多そうなのと、最悪事故っても問題にはならいないと考えて一気に引っ越しました。

https://github.com/odanado/blog/pull/356

元々のブログは Vue.js でいくつかコンポーネントを作成していました。そのため既存のコンポーネントを https://docs.astro.build/ja/guides/integrations-guide/vue/ を使用して Astro から Vue.js のコンポーネントを呼び出す方法もありました。しかしコンポーネントの数も多くないので .astro ファイルに手動でコピペしました。

また引っ越しにあたって、記事のパスが変化しないように気をつけました。パスが変化するとリダイレクト処理を書かないといけないので面倒だからです。

パフォーマンスの変化

Astro に引っ越すことでパフォーマンスが向上しました。 引越し前は Lighthouse のスコアが 80 でしたが、引越し後は 100 になりました。

引越し前の Lighthouse のスコア 引越し前の Lighthouse のスコア

引越し後の Lighthouse のスコア 引越し後の Lighthouse のスコア

今後の展望

zenn.dev があるので今後もブログを更新することはないと思いますが、サンドボックスとして遊んでいきたいと思います。 具体的には次のことを導入したいと考えています。

参考記事

引っ越しにあたって hiroppy さんの記事が参考になりました。