第12回 Cloudflareビルド失敗を修正―Astroのカテゴリ・タグ・トップページも見直す

第11回までで、ロゴの適用、カテゴリ表示の日本語化、スマホ表示、RSS導線などを修正した。

そのあと、新しく「AstroとWordPressを比べて、自分はAstroを選んだ」という記事を追加してGitHubへpushしたところ、Cloudflare Workersのビルドが失敗した。

今回は、このビルドエラーの原因を確認してMarkdownを修正し、公開後に見つかったカテゴリ分類とタグ一覧の問題、さらにトップページの縦方向の余白まで続けて修正する。

Cloudflare Workersのビルドが失敗#

記事を追加してpushしたあと、Cloudflare Workersのデプロイ画面を見ると最新ビルドが失敗していた。一瞬Cloudflare側の問題かと思ったが、ログを追うと違った。

ログを確認すると、依存関係のインストールまでは正常に進んでいる。

問題が出ているのはastro buildでContent Collectionsを読み込むタイミング。

[InvalidContentEntryDataError]
blog → web-development/initial-setup/astro-vs-wordpress data does not match collection schema.

category: 半角英小文字・数字・ハイフンの識別子を指定してください
subcategory: 半角英小文字・数字・ハイフンの識別子を指定してください

対象ファイルも明確に出ている。

src/content/blog/web-development/initial-setup/astro-vs-wordpress.md

今回はCloudflareやWranglerの問題ではなく、追加したMarkdownのFrontmatterがContent Collectionのschemaに合っていない。

原因はFrontmatterの日本語カテゴリ#

追加した記事では、Frontmatterを次のようにしていた。

category: "Web制作"
subcategory: "初期構築"

画面に表示したい名前をそのままFrontmatterへ入れた形だが、現在のゆまラボではcategoryとsubcategoryに識別子を使う。

schema側も半角英小文字・数字・ハイフンを要求しているため、日本語ではビルドを通せない。

そこで一度、次のように変更した。

category: "web-development"
subcategory: "initial-setup"

記事本文や画像、slugには触れず、Frontmatterだけを修正して再度pushする。

Frontmatterを修正するとビルドは成功#

修正後のCloudflare Workersでは、ビルドからデプロイまで正常に完了した。

ビルド履歴でも、直前の失敗と修正後の成功を確認できる。

ここで一旦エラー自体は解消。

ただし、実際のサイトを確認すると別の問題が見つかった。

initial-setupでは「初期構築」にならなかった#

記事の配置先は、

src/content/blog/web-development/initial-setup/

なので、最初はsubcategoryもinitial-setupでよいと考えた。

しかし、ゆまラボで既に「初期構築」に使っている内部値はsetup。

つまり、

フォルダ名      initial-setup
subcategory    setup
表示名          初期構築

という別々の役割になる。

フォルダ名に合わせてsubcategory: "initial-setup"とすると、taxonomy側では未定義の値として扱われ、「その他のサブカテゴリ」に入ってしまう。

そこで最終的にFrontmatterを次の形へ変更した。

category: "web-development"
subcategory: "setup"

重要なのは、記事の分類はFrontmatterを基準にし、フォルダ名とsubcategoryを無理に一致させないこと。

修正後は「その他のサブカテゴリ」が消え、「初期構築」が3件から4件になった。

タグ一覧を見ると同じタグが分裂していた#

カテゴリを確認したあと、タグ一覧も見てみる。

すると別の問題が見つかった。

#Astroが1件と10件に分かれ、#静的サイトも同じ名前が別々に表示されていた。

見た目が同じでも、Frontmatter側の大文字小文字、前後空白、Unicode、slug生成などに差があると、内部的には別タグとして扱われる可能性がある。

タグ処理も見直し、集計・slug生成・表示で同じ正規化ルールを使うように修正する。

考え方はカテゴリと同じで、内部で扱う値と画面に表示する名前を分ける。

例えばAstroなら、

内部キー  astro
表示名    Astro

という形。

Markdown側に表記揺れがある場合も同じ表記へ寄せ、タグ一覧とタグ詳細ページで別々のルールを使わないようにする。

#Astroは11件、#静的サイトは2件へ統合#

修正後のタグ一覧では、分裂していたタグが1つにまとまった。

#Astroは11件。

#静的サイトは2件。

以前のように同じ表示名が2つ並ばず、記事数も合算されている。

タグは記事が増えるほど表記揺れが起こりやすいので、記事ごとに気を付けるだけでなく、サイト側でも正規化しておく方が扱いやすい。

トップページの縦余白も少し詰める#

もう1つ気になっていたのがトップページの縦方向の余白。

構成自体は、

• キャッチコピー
• カテゴリ
• 連載
• 新着記事

という流れで問題ない。

ただ、PCで見るとキャッチコピーからカテゴリまでの空間がかなり広く、最初の1画面では新着記事まで到達しにくい状態。

全面的にデザインを変える必要はないので、ヘッダー直下、ヒーロー、カテゴリ、連載の間隔を中心に、PC表示の縦余白を少し減らす。

狙いは余白をなくすことではなく、現在の白を活かしたデザインを残しながら、画面内に入る情報量を少し増やすこと。

修正後は、カテゴリと連載に続いて「新着記事」の見出しまで同じ画面内で確認しやすくなった。

Cloudflareの公開画面でも確認#

カテゴリ、タグ、トップページの余白をまとめて修正し、再度pushする。

最終ビルドも正常に完了した。

ビルド履歴を見ると、最初に失敗したビルド、その後のFrontmatter修正、今回のタグとトップページ修正まで流れを追える。

今回もローカルだけで終わらせず、実際にCloudflare Workersへデプロイされた状態まで確認して完了。

Content Collectionsで注意した点#

最初の原因は単純で、Content Collectionのschemaに日本語のcategoryとsubcategoryを渡していたこと。

ただ、そこだけ直せば終わりではなかった。

ビルドが通ったあとにサイトを見ることで、

• initial-setupが既存のsetupと別扱いになる
• 同じタグが複数に分裂する
• トップページの縦余白が少し大きい

という別の問題も見つかった。

ビルド成功は大事だが、ビルドが通ることと、サイト上で意図した状態になることは別。

今回のように、

エラーを確認
↓
原因を修正
↓
ビルド成功
↓
公開画面を確認
↓
表示上の問題を追加で修正
↓
もう一度ビルドと公開を確認

という流れで見ていくと、単にエラーを消すだけでなく、公開後の状態まで確認できる。

AstroのContent CollectionsはFrontmatterをschemaでチェックできるので、間違った値をビルド時に止められるのは便利。

一方で、setupとinitial-setupのようにschema上は正しくてもサイト内のtaxonomyとしては別物というケースまでは自動では判断できない。

カテゴリ、サブカテゴリ、タグの内部値を増やすときは、既存の定義を確認してから追加する必要がある。

今回はCloudflareのビルドエラーから始まり、記事分類、タグ、トップページまで続けて修正する回になった。