astroを利用したサイトをfirebaseからVercelに移行した

astroとVercelと公式にホスティングパートナーになったようです。

astro.build

AstroのMiddlewareがVercelのEdge Middlewareを利用して実行できるようになったり、Vercelの画像最適化をAstroで利用できるようになったりするようです。（※ 誤訳しているかもしれません）VercelのEdge Middlewareが利用できるということは今までより高速に動かせる可能性が高まりますし、画像最適化についてもNext.jsでそのメリットについては重々承知です。

これはぜひastro & Vercelの組み合わせのサイトを持っておかねばならぬ、ということで、firebase hostingにのせてたポートフォリオサイトをVercelに移行しました。手順は下記の感じ。

1. Github Actionsで動かしてたfirebaseへのhostingのymlを削除
2. Vercelに新規Projectを追加、ドメインを設定
3. CloudflareにてDNSの向き先を変更
4. 1日1回、RSSを反映のための定期更新をしたいので、Github ActionsでVercelへdeployを追加

   • こちらを参考にしました Next.js （SSG） + Vercel + GitHub Actions を使用した定期デプロイ | WWW WATCH

   • 実際のコードはコチラ

実際のサイトはコチラですが、見た目は変わらないです。

今はImageコンポーネントも使ってなくて最適化は動いていないので、今度適用やります。webpになってるのは、ローカルで変換してるからですね。1回lighthouseスコアを全部100点狙った時の名残りです。

画像をwebpに変換する作業、地味に面倒なので、Next.jsと同じ感じでpng使ってもwebpになるのは楽になって嬉しいですね。そのあたり面倒でずっと後回しにしてた画像の追加・差し替え、やっとできる。

あと最近デザインの勉強をちょっと本腰いれてやってるんですが、そしたら自分のサイトがめちゃダサに見えるのでそのへんも魔改造していこうと思います。目指せデザインエンジニア。