Moristapaper

by Morishitter

ブログを Astro で作り直した

作成日

Gatsby 製だったこのブログを Astro で作り直した。 Gatsby v5 のリリースが控えていて、ブログは全然更新していないけどまた Gatsby のアップデートだけするか〜と思っていたが、ふと目の前を横切った Astro が良さそうだったので作り変えることにした。

Gatsby で作っているときも gatsby build で HTML を出力してそれをホストしていたので、Astro を使ったからといってユーザーに知覚できる表示パフォーマンス改善はないはずだ。
が、このサイトのようなただテキストを読むだけのウェブサイトで、UI ライブラリとして React を使い、Markdown のパース結果を GraphQL を使って取得する必要はない。 Gatsby で Markdown ブログを SSG するくらいなら React や GraphQL で知っておくべき知識はごくわずかだが、そうなのであればそれはオーバーエンジニアリングなんだと思う。

Astro に移行するにあたって、Gatsby ブログで実装していた、

  • 記事をカテゴリーとタグで分類
  • 目次の自動生成
  • 吹き出しの見た目のブロックを挿入

をドロップした。試験的に実装したものでほとんどの記事で使っていなかったのでまあよし。

また、記事ページの URL が、/:post_id から /posts/:post_id に変わった。 これまではトップページに記事の一覧を表示していたが、トップページには最新の5件だけにして、/posts に記事一覧を表示することにした。 URL が変わってしまうのは嫌だったが、URL は情報の階層を表すのが原理上正いので変更した。

あとは、サイトのスタイルも変更している。 大きい変化としては、サイト内のテキストサイズをビューポートのサイズに合わせて変わるようにしたのと、OS やブラウザの設定に合わせてダークモード表示に対応したこと。

CSS は Tailwind を使って書いている。 Tailwind のような CSS の (ライブラリ|フレームワーク) は class 名が手に馴染むまではドキュメントを参照する回数が多くて面倒だが、慣れると楽なんだろうなと思う。

今は Tailwind のデフォルトの設定のままほぼ全ての CSS を書いているが、style 属性に CSS を直接書いているのとメンテナンス性は大差ないので、早くも冗長になってきている。 Tailwind には @apply という独自の (Tab Atkins の @apply とは別物の) At-Rule があり、これを使って複数の class をまとめられるので利用してみるといいかもしれない。 ただ、やり過ぎるとそれはセレクタ名をがんばって考えていたあの頃と大差ないようにも思う。


何はともあれ、またせっかくブログを作ったのだから、これを機に投稿頻度も増やしていきたい。

前の記事
ポートフォリオサイトを作った