サイトをAstroで書き直した


先日このブログをAstroでリニューアルしました。 今回はちょっとその経緯とあわせて、記憶が残っているうちにこのサイトの遍歴なんかを残しておきます。

このサイトを初めて作った時はNuxtで作成しました。当時はVueもNuxtも全盛期で、いろいろ試してみたいという気持ちが強かった記憶があります。 Nuxtなのでサーバーとして起動しており、当時はGAEだかCloud Runだかに乗せていました。そのため、ニュース機能だけGoでバックエンドを作って遊んだりもしていました。
ただ、NuxtはやっぱりNode.jsということもあり、起動が遅く常にインスタンスを1つは立て続ける必要がありました。また、コンパイルやローカルでの起動も遅く、メンテナンス性はかなり悪かった記憶があります。 そういうこともあり、ブログの更新そのものが億劫になっていきました。 また、自分で作ったなんだかデザインがダサいサイトに対する恥ずかしさ、みたいな気持ちも少しありました。

という感じで、サイトをリニューアルしたいなーと思って色々考えていたら、好きなGo言語の静的サイトジェネレータのHugoが面白そうだと思い、思い切ってこれに変更しようと思いました。
ただ、自分で0から作るにはHugoの文法は面倒なところも多いため、テンプレートを探しそれに乗る形にしました。 しかし、このテンプレートも簡単には使えず少しいじる必要があり、分からないなりに頑張ってテンプレートを少し変更しました。
そんなこんなで完全静的サイトになったため、Cloud Runに乗せる必要もなくなり、ホスト先をFirebase Hostingに移行しました。 そうするとランニングコストも0円になり、お財布にも優しいサイトに生まれ変わりました。
しかし、なんとなくテンプレートのデザインが気に入らなかったのです。 自分の中では気に入った方のデザインのテンプレを選んだつもりでしたが、完璧に気に入ったわけでもなく、自分らしさを感じるわけでもなかったのです。 この「自分らしさ」というのが、やっぱり自分の中で大事だったようで、Nuxtで作った前のサイトの方がそれを感じました。 なので、サイトをリニューアルしたわりにブログを書く気もおきなかったのです。
では、自分らしくカスタマイズすればいいじゃんとなるには、Hugo製のサイトは書きづらくやる気がおきませんでした。

そして今。普通に業務でAstroを使ったりすることがあったため、Astroには慣れていました。そんなときに、なんとなく思い出した自分のサイト。 別にこのぐらいのコンテンツ量ならデザインにこだわらなければ一瞬じゃんと思い、1週間かからず今のデザインにリニューアルしました。
そして、今のサイトには自分らしさを感じます。 黒いズボンに白い無地のTシャツを着るような自分には、このようなデザインにこだわっていないサイトがしっくりきます。 自分らしさとは?とは思いますが、こんなもんな気がします。

Astroの移行自体は簡単でした。Astroの生成時にblogテンプレートを選び、生成されたものに適当にTailwind CSSを当てていった感じです。 AstroはHugoと同じく完全静的サイトになるため、ホスト先を変える必要もなく、あまり手間自体はなかったです。

余談ですが、このサイトはJavaScriptがなく、Tailwind CSSを使用しているためCSSもかなり最適化されており、ホスト先もFirebase HostingでCDNも効くため、現代のWebにおいても最速に近い読み込み速度になります。Lighthouseとか100点ですしね。 ここからさらに速くする方法を知っていますか? それは HTTPS をやめて HTTP にすることです。 HTTPS の場合 TLS ハンドシェイクがあるため、HTTP に比べてサーバーとのやり取りが1〜2回ほど多く発生します。 そのため、HTTPS のサイトと HTTP のサイトには越えられない速度の壁というのが存在します。
もちろん現代では HTTP のサイトはブラウザが警告を出しちゃうしSEOも点数が下がるのでメリットはほとんどありません。 実際、この辺の仕様も少しずつ改良されており、以前はプラス2回だった往復回数も1回に減り、再接続時は0回になったりします。 なのでこんなこと知っておく必要はないのですが、たまーに HTTP のサイトと HTTPS のサイトの速度を比較している人とかいるので、それは不毛な比較だよねって思えたりします。