Astro＋Cloudflareでサイトを作る

個人サイトの構築にAstro、GitHub、Cloudflare Workersを選んだ理由と、最初に準備したアカウントをまとめます。

Astro公式ブログテンプレートの作成、ローカル表示、ビルド、Wrangler設定と、npmのEPERM警告への対応を紹介します。

AstroプロジェクトをGitHubへpushする手順と、not a git repository、Repository not found、origin already existsの解決方法です。

WranglerによるAstroサイトの公開、Cloudflareのメール認証エラー、workers.devの警告、GitHub自動デプロイ設定をまとめます。

Markdownのテスト記事を追加し、ローカル確認、GitHubへのpush、Cloudflare Workersへの自動反映を確認する手順です。

Cloudflare Registrarで独自ドメインを検索・取得し、Cloudflare Workersで公開中のAstroサイトへ接続するまでの手順をまとめます。

独自ドメインで公開したAstroブログの修正前画面を確認し、noteを参考にトップページ、記事一覧、記事本文、Aboutを見直す方針を整理します。

第7回で決めたデザイン方針を実際のAstroサイトへ反映。トップ、記事一覧、About、目次、前後記事リンクを追加し、GitHubへのpush後に発生したCloudflareのデプロイエラーも修正します。

記事数の増加に備え、第1回から第8回のMarkdownへカテゴリ・細分化カテゴリ・連載情報を追加しました。本文は変更せず、Frontmatterだけを整理した内容をまとめます。

第9回のFrontmatter整理をサイト側へ反映し、カテゴリ、細分化カテゴリ、連載、タグから記事を探せる構成へ変更。変更前後の画面を比較しながら確認します。

ゆまラボのヘッダーへロゴを適用し、新しく追加したサブカテゴリが英語で表示される問題、スマホでナビゲーションが崩れる問題、フッターのRSS導線をまとめて修正した内容を記録します。

AstroのContent Collection schemaに合わないFrontmatterでCloudflare Workersのビルドが失敗。categoryとsubcategoryの修正後に見つかった分類ミス、タグ重複、トップページの余白まで続けて修正した流れを記録します。

ゆまラボのサイトチェックで気になった個別タグページの扱いとフッターの導線を見直す。タグ機能は残したままnoindexを設定し、お問い合わせ、プライバシーポリシー、免責事項へのリンクを追加した内容を記録します。

Astroで公開しているゆまラボをCloudflare WorkersのFreeで運用し続けられるか、10万リクエスト、静的アセット数、ビルド上限、過去の障害、料金、別サーバーへの移行まで確認します。

ゆまラボのヘッダーへ記事一覧・カテゴリ・連載・タグとサイト内検索を追加。横長の表を表だけ横スクロールできるように修正し、404だったsitemap.xmlも追加した内容を記録します。

ゆまラボのAboutページへ運営者情報とプロフィール画像を追加し、全記事へパンくずとBreadcrumbListを実装。カテゴリページの重複ナビと記事本文のH1重複も修正した内容を記録します。

一度修正したはずのタグ重複が記事追加後に再発。Frontmatterの個別修正ではなく、タグマスタ、alias、共通のnormalizeTag、旧URL維持、未登録タグ警告まで追加した内容を記録します。

準備中のままになっていたお問い合わせページにmailto方式のフォームと直接メールできる連絡先を追加し、プライバシーポリシーにはGoogle AdSenseの広告設定に関する説明を追記した内容を記録します。

WEB制作・AI・開発支援の説明をtaxonomy側で管理するよう変更し、記事一覧・タグ・連載ページに残っていた本文側の重複ナビゲーションを削除した内容を記録します。

タグ一覧を記事件数の多い順に変更し、上位50件を通常表示、51件目以降を展開できるようにしました。/tags/のnoindexとサイトマップ除外、記事末尾の連載番号表示も修正します。

Google AdSenseのプライバシーポリシー追記、お問い合わせ先の独自ドメインメールへの変更、全記事へのupdatedAt追加、記事H1とfaviconの小さな修正を行った内容を記録します。

TOPページで連載をカテゴリより上へ移動し、記事一覧・カテゴリ・連載詳細へ10件表示、新しい順と古い順の切り替え、最初・前へ・次へ・最後のページ移動を追加した内容を記録します。

記事一覧、カテゴリ、サブカテゴリ、連載詳細で、一覧末尾だけにあったページナビを上部にも追加しました。上下のナビを共通コンポーネント化し、同じpage・sort状態を使うようにした内容を記録します。

カテゴリ・サブカテゴリに残っていた汎用説明を実際の記事内容に合わせて変更し、連載にも共通の説明データを追加しました。/series/を説明・記事数・導線を持つカード表示へ変更した内容を記録します。

記事本文のコードブロックへコピー操作を追加し、TOPページの「連載から読む」を3連載のカード表示へ変更しました。Clipboard APIのフォールバック、複数コードブロック、既存の連載カード再利用まで記録します。

存在しないURLでブラウザ標準の404だけが表示されていたため、Astroの404.astroを追加しました。SiteLayoutを再利用し、トップページ・記事一覧への導線、Cloudflare Workersで404を返す構成、ローカルと公開画面の確認まで記録します。

Astroの生成HTMLをビルド後に検査し、存在しない内部URLへのリンクがあればnpm run buildを失敗させる処理を追加。修正前後の実測、URL判定、parse5、意図的なリンク切れテストまで記録します。

記事本文の画像をAstro標準の画像処理へ移し、WebP、srcset、sizes、width/height、loading="lazy"を追加。278個の画像ファイルと281件の参照を対象に、容量削減とPC・スマホ表示を確認した記録です。

AstroブログのheroImageを記事一覧と記事本文へ表示し、同じ画像から1200×630のOGP画像を生成。画像なしの記事との互換性、summary_large_image、一覧レイアウトまで確認した記録です。

Astroで作成しているゆまラボの記事本文に、見出しアンカーとURLコピー用のリンクを追加した作業記録。あわせてトップページへヒーロー、連載カード、カテゴリカードを追加した。

タグ一覧を人気タグとカード型の一覧へ変更し、タグ検索と並び替えを追加。記事末尾には既存Frontmatterから最大3件の関連記事を自動表示し、既存のタグURLやnoindex、連載導線を残したまま動作を確認した記録です。

Cloudflare WorkersのビルドでseriesOrder重複を検出した経験から、FrontmatterをAstro build前に検査する処理を追加。category、subcategory、series、seriesOrder、tagsを既存schemaとtaxonomyで確認し、正常時の219ページ生成まで記録します。