architecturecloudflare-pages

このブログの公開構成

このサイトは、記事を Markdown で書き、Astro で静的ファイルへ変換して公開しています。ホスティングは Cloudflare Pages です。独自ドメインの DNS も Cloudflare に置いています。

公開 URL は https://morimori.cloud/blog/ です。ドメインのルートはブログへ転送します。

全体の流れ

訪問者のリクエストは Cloudflare の DNS とプロキシを経由し、Pages の静的ファイルに届きます。ビルドは main への push を GitHub Actions が受けて実行します。

flowchart LR
  author[Markdown記事]
  astro[Astro]
  actions[GitHub Actions]
  pages[Cloudflare Pages]
  visitor[訪問者]
  cf[Cloudflare]
  blogPath["morimori.cloud/blog"]

  author --> astro
  astro --> actions
  actions --> pages
  visitor --> cf
  cf --> pages
  pages --> blogPath

選んだ理由

ソースリポジトリを private にしても、Pages はビルド結果だけを公開できます。GitHub Pages は Free プランだと public リポジトリ前提なので、ホスティングをこちらへ移しました。DNS も同じ Cloudflare アカウントにあるため、プロキシを有効にして証明書も Cloudflare 側で出せます。

記事にはシステム構成図を置く想定なので、Markdown の mermaid ブロックをそのまま描画できるようにしています。アクセス数は Google アナリティクス 4 で見ます。