まず読む
Astro＋Cloudflare Workersでブログを作る｜WordPressを使わない構成と選んだ理由
AstroとCloudflareを選んだ理由を整理し、これから作るサイトの土台を決める段階で読む記事。
内容を確認する →
テーマ別まとめ
Astro＋Cloudflareでブログを作る
これからサイトを作りたい人向け
Astroを選ぶところから、ローカル環境、GitHub、Cloudflare Workers、独自ドメイン、ブログ機能、画像、公開品質までを順番に確認できます。
このまとめで分かること
- Astroでサイトを始める理由と初期構築
- GitHub連携とCloudflare Workersへの公開
- 独自ドメイン、ブログ機能、画像・公開品質の進め方
STEP 01
Astroでサイトを作る
WordPressとの違いを確認し、Astroを使った開発環境をWindows上に用意します。
読む段階：何でサイトを作るか決め、まずローカルで動かしたい段階。
この段階で行うこと
Astroを使う理由を確認し、Windows上でローカル開発環境を用意します。
この段階のゴール
Astroプロジェクトを作成し、localhostでサイトを表示できる状態にします。
おすすめの読む順番
条件付きで読む記事
通常ルートを進めていて該当する状況になったときに確認してください。
ここまでできればOKAstroのプロジェクトが作成され、ローカルでページを確認できればOKです。
STEP 02
GitHubとCloudflareへ公開する
作成したサイトをGitHubで管理し、Cloudflare Workersへ公開するまでの流れを確認します。
読む段階：ローカルで作ったサイトをインターネットへ公開したい段階。
この段階で行うこと
GitHubで変更を管理し、Cloudflare Workersへ公開して自動デプロイを確認します。
この段階のゴール
リポジトリへのpushから公開サイトの更新までをつなげます。
おすすめの読む順番
条件付きで読む記事
通常ルートを進めていて該当する状況になったときに確認してください。
ここまでできればOK公開URLでサイトが表示され、記事更新が自動で反映されればOKです。
STEP 03
独自ドメインで公開する
独自ドメインを接続し、公開後のURLとsitemapの状態を確認します。
読む段階：仮の公開URLから、自分のドメインでサイトを運用したい段階。
この段階で行うこと
独自ドメインを取得し、Cloudflare Workersへ接続した後のURL状態を確認します。
この段階のゴール
自分のドメインでサイトを開ける状態にします。
おすすめの読む順番
条件付きで読む記事
通常ルートを進めていて該当する状況になったときに確認してください。
ここまでできればOK独自ドメインでサイトが表示され、sitemap.xmlも正しいURLで応答すればOKです。
STEP 04
ブログとして使いやすくする
記事分類、一覧、ページネーション、404ページ、コード表示など、ブログとして必要な機能を追加します。
読む段階：サイトを公開できたので、記事を増やしやすく読みやすい構成へ見直したい段階。
この段階で行うこと
記事分類、一覧、ページ移動など、記事を増やすための機能を確認します。
この段階のゴール
読者が記事を探しやすく、運用中も追加しやすい構成にします。
おすすめの読む順番
条件付きで読む記事
通常ルートを進めていて該当する状況になったときに確認してください。
ここまでできればOKカテゴリ・一覧・ページ移動が目的どおり動けばOKです。
STEP 05
画像と公開品質を確認する
画像最適化、アイキャッチ、OGP、リンク検査、Frontmatter検査を通じて公開品質を確認します。
読む段階：記事を継続公開する前に、表示速度と公開時の確認項目を見直したい段階。
この段階で行うこと
画像表示、OGP、リンク、記事データを確認し、公開後の問題を見つけやすくします。
この段階のゴール
表示速度と公開前後の確認手順を用意します。
おすすめの読む順番
条件付きで読む記事
通常ルートを進めていて該当する状況になったときに確認してください。
ここまでできればOK画像とOGPが表示され、ビルド時の確認で問題を検出できればOKです。