第8回 ゆまラボのデザインを実装する―目次・前後記事リンク追加とCloudflareのエラー修正

前回は、Astroの初期ブログテンプレートから離れるために、noteの見せ方を参考にしながら「ゆまラボ」をどう修正するか決めた。

今回はその続き。決めた方針を実際のサイトへ反映する。

トップページ、記事一覧、About、記事本文、ヘッダー、フッターを修正。さらに記事が増えてきたので、目次と「前の記事・次の記事」も追加した。

ここまでは順調。ところが、修正内容をGitHubへpushしたところCloudflare側でエラーが発生した。

デザイン変更直後なので最初はAstro側を疑った。タイミングが良すぎて少し紛らわしかったが、ログを見ると原因は別。

今回は、デザイン修正からCloudflareのエラーを直して再公開するところまでを記録する。

トップページを「ゆまラボ」用に変更#

まずトップページを修正した。

Astroの初期テンプレートをベースにしていた頃は、ブログとしては動いていたものの、トップを見ただけでは何を扱うサイトなのか分かりにくかった。

そこで、サイトの説明を最初に表示する構成へ変更。

現在は「Web制作とAI活用の実践記録」という見出しを置き、その下にAstro、Cloudflare、Web制作など、このサイトで扱っている内容が分かる文章を入れている。

さらに、その下には新着記事を表示。

記事タイトルに加え、公開日、概要、タグも見えるようにした。

初めて来た人でも、トップページを見れば「何のサイトなのか」「最近どんなことを書いているのか」が分かる形になった。

記事一覧も日本語の記事向けに修正#

次に記事一覧。

Astroの初期テンプレートは、タイトルや画像を大きく見せるデザイン。

ただ、このサイトの記事タイトルは日本語で長めになることが多い。

たとえば、

第6回 Cloudflareでbringain.comを取得してAstroサイトへ接続する

のようなタイトルを大きく表示すると、それだけでかなり場所を使う。

そこで記事一覧は、縦方向にシンプルに並べる形へ変更した。

各記事には、

• カテゴリ
• 公開日
• タイトル
• 概要
• タグ

を表示。

記事同士は薄い線で区切った。

公開日もSep 5, 2026のような英語表記から2026年9月5日へ変更した。

派手な変更ではないが、日本語の記事を並べたときはこちらの方が自然に見える。

Aboutページも作り直した#

Aboutページも初期テンプレートの内容を削除した。

About Meとサンプル文をやめ、「ゆまラボについて」というページへ変更。

ここでは、Webサイト制作、Cloudflare、Astro、AI活用などについて、実際に試した内容を記録しているサイトであることを説明。

このサイトでは成功した作業に加え、今回のような途中のエラーも残していく。

完成した手順だけよりも、「どこで失敗したのか」「何を確認して直したのか」まで残っていた方が、あとから見返したときにも役に立つ。

記事に目次を追加#

記事本文には目次を追加した。

このシリーズも第1回から続けているうちに、1記事あたりの文章量が増えてきた。

作業手順だけならまだ短く済むが、エラーの内容や確認したことまで書くと、どうしても見出しが多くなる。

記事内の見出しを使って、本文上部へ目次を表示するようにした。

これなら、たとえばCloudflareのエラー部分だけ確認したい場合でも、記事の先頭から目的の見出しへ移動できる。

ブログとして記事数が増えることを考えると、このタイミングで追加しておく。

「前の記事・次の記事」も追加#

もう一つ追加したのが、記事下部の「前の記事・次の記事」。

このサイトは単発記事だけでなく、Astroでサイトを作り始めたところから第1回、第2回と続けている。

記事を読み終わったあと、一覧へ戻らなくてもそのまま前後の記事へ移動できる方が分かりやすい。

そこで記事の並びから前後の記事を取得し、自動的にリンクを表示するようにした。

今後、第9回、第10回と記事が増えても、そのたびに本文へリンクを手書きする必要はない。

デザイン変更をGitHubへpush#

ローカルで表示を確認したあと、変更内容をGitHubへpushした。

トップページに加え、ヘッダー、フッター、記事一覧、記事本文、Aboutなど共通部分にも手を入れている。

GitHubへpushすると、これまで設定したCloudflareの自動デプロイが動く。

そのまま公開されると思っていたが、Cloudflareの管理画面を確認すると赤い表示が出ていた。

最新のビルドに失敗しました

デザインを大きく変更した直後なので、最初に疑ったのはAstro側のエラー。

ビルド詳細を確認する。

Cloudflareではビルドコマンドとして、

npm run build

その後のデプロイコマンドとして、

npx wrangler deploy

を実行している。

Astroのビルド自体は成功していた#

ログを確認すると、Astro側には次の表示が出ていた。

[build] Complete!
Success: Build command completed

つまり、npm run build自体は正常に完了している。

実際、ログには静的ルートの生成が並び、最後までAstroのビルドが完了していた。

デザイン変更でHTMLやCSSを壊したわけではなかった。

問題が発生していたのは、その次に実行されるnpx wrangler deployの部分。

エラーは次の内容。

✘ [ERROR] CommaExpected

/opt/buildhome/repo/wrangler.jsonc:9:2:
  9 │   "workers_dev": false,
    ╵   ~~~~~~~~~~~~~

CommaExpected。

Cloudflare Workersの設定ファイルであるwrangler.jsoncを正しく解析できていない。

原因はwrangler.jsoncのカンマ抜け#

wrangler.jsoncを確認すると、assetsのブロックが閉じたあと、そのままworkers_devが続いていた。

JSONCでは項目と項目の間をカンマで区切る必要がある。

原因はAstroではなく、設定ファイルの単純な構文エラー。

設定を修正し、最終的には次の形にした。

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "yumaru-site",
  "compatibility_date": "2026-09-05",
  "workers_dev": false,
  "preview_urls": false,
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

今回のログを見ると、Cloudflareの画面に「ビルド失敗」と表示されていても、Astroのビルドそのものが失敗しているとは限らないことが分かる。

まず、

Success: Build command completed

まで到達しているか確認する。

到達していれば、少なくとも今回のようなケースでは、その後のデプロイ処理を確認すればよい。

修正後にもう一度ビルド#

wrangler.jsoncを修正したあと、ローカルでももう一度ビルドを実行した。

静的ルートの生成まで正常に完了。

その後、修正内容を反映し、Cloudflare側でも新しいデプロイを確認した。

bringain.comを開くと、新しく変更した「ゆまラボ」のデザインが表示された。

これで第7回で決めた内容を実際のサイトへ反映できた。

デザイン変更とCloudflare修正の一覧#

変更点をまとめると、以下。

• サイト名を「ゆまラボ」に変更
• ヘッダーをシンプルな構成へ変更
• トップページにサイト説明と新着記事を追加
• 記事一覧のレイアウトを変更
• 公開日を日本語表記へ変更
• Aboutページを作り直し
• フッターを修正
• 記事本文のレイアウトを修正
• 記事に目次を追加
• 前の記事・次の記事へのリンクを追加
• GitHubへpush後のCloudflareエラーを確認
• wrangler.jsoncの構文エラーを修正
• 再ビルドとデプロイを確認

第1回ではAstroのテンプレートを使ってサイトを作り始めたが、ここまで変更するとかなり初期状態とは違うサイトになった。

今回もっとも時間を使ったのはデザインそのものより、push後に出たCloudflareのエラー対応。

ただ、ログを順番に見れば、

Astroのビルド → Wranglerによるデプロイ

のどちらで止まっているのかは判別できる。

Cloudflareで失敗しても、すぐソースコードを戻さず、最初に失敗した工程を見る。

今回のエラーで、その見方も少し分かるようになった。

サイトの基本的なデザインはこれでひとまず完成。

次からは、実際に記事を増やしながら、必要になった機能をその都度追加・修正していく。