個人サイトをAstroで作り直した

Astro使ってみた！#

以前まで、Next.jsを使って個人サイトを運営していましたが、Astroに移行しました。

今までの経験から、手癖でNext.js使いがちでしたが、はじめてAstroを使ってみました。

コンテンツの量もそんなに多くないので、ドキュメント読んで、1日ぐらいでベースは完成しました。

独自の.astroファイルを使うということを知って、癖あるかな〜とかちょっと心配でしたが、ほとんどJSXと同じような感じで書けるので、特に違和感なく書けました。

移行のモチベーション#

ざっくりの移行理由。

1. Next.jsに飽きた。（メンテするモチベがなくなってきた。）
2. 本屋でAstroの本を見かけて、面白そうだなと思った。
3. コンテンツをMDXで管理してたが、移植性とか考えたときにどこでも使えるMarkdownのほうがシンプルで良くね？と思った

Astroにしてみて#

まず、ビルドがめっちゃ速い。体験としてすごい良かったです。

あと、ほとんど何もしなくても、面倒なMarkdownのパースとか、コンテンツの読み込みとかデフォルトで整備されているのも楽でした。

んー、って言う点を上げるなら、フォーマッターのPrettierが重くなるというのと、ドキュメントが日本語対応してない箇所も結構あるということぐらいです。

フォーマッターについては、もうちょっとちゃんと調べて見ようかと思います。

関連#

UI#

Astroの構築はshadcn/uiのプロジェクト作成から始めました。スタイルはTailwindCSSベースです。

Astro

Install and configure shadcn/ui for Astro.

ui.shadcn.com

デプロイ#

デプロイはCloudflare Pagesを使っています。

一旦手動でデプロイしてますが、割と簡単にできて嬉しいです。

pnpm astro build && pnpm wrangler pages deploy ./dist

今後やりたいこと#

• ブログのスタイルをもうちょっとリッチにしたい
• ブログ執筆のハードルを下げたい
  • CI/CD頑張る
  • コンテンツの管理を楽にしたい（特に画像とか）
• パフォーマンスの改善とか
• これぐらいの文字数で良いから、ブログを更新する習慣をつける（学習のアウトプットとして）

継続は力なり…