Astro 5でエンジニアリングウェブサイトを構築

Astroを選んだ理由

Godfrey Engineeringマーケティングウェブサイトを構築する際、複数のフレームワークを評価しました。Astroはコンテンツファーストなアプローチ、デフォルトではJavaScriptゼロという哲学、およびtype-safeなスキーマによるコンテンツコレクションの第一級サポートで際立っていました。

コンテンツコレクション

Astro 5のコンテンツコレクションにより、Zodを使用してブログ記事とケーススタディの厳密なスキーマを定義できます。すべてのフィールドはビルド時に検証され、frontmatterフィールドが欠落しているか不正な形式の場合、ビルドは明確なエラーメッセージで失敗します。YAMLのタイプミスによるサイレントバグはもう発生しません。

const blogSchema = z.object({
  title: z.string().min(1).max(100),
  description: z.string().min(10).max(300),
  publishDate: z.coerce.date(),
  // ... more fields
});

多言語対応

7つのロケールをサポートするため、コンテンツをロケールディレクトリで整理しています。各投稿には、他の言語の対応版にリンクするtranslationKeyがあります。ヘッダーの言語切り替えボタンは、一致する投稿を自動的に検出します。

次のステップ

今後の投稿では、GSAPアニメーションシステム、ヒーローセクション用のThree.js統合、およびCloudflare WorkersとResendでのコンタクトフォーム送信処理について詳しく説明します。

お楽しみに。