Go back

Astro + Cloudflare Pagesで始めるテックブログ

Updated:

このブログ「POIKTS.COM」は、静的サイトジェネレーター(SSG)1の Astro2 とホスティングサービスの Cloudflare Pages3 を組み合わせて構築しました。

今回は、なぜこの技術スタックを選んだのか、そしてどのように構築したのかについて紹介します。

Table of Contents

Open Table of Contents

この構成にした理由

ブログを始めるにあたり、WordPressなどのCMS4ではなく、あえてこの構成を選んだ理由として以下のものがあります。

1. 静的サイトジェネレーター (SSG) を使ってみたかった

最近のWeb開発のトレンドの一つであるSSGに興味がありました。Astroはパフォーマンスが非常に高く、JavaScriptを最小限に抑える設計思想に惹かれました。

2. WordPressの構築・管理が面倒そうだった

WordPressは便利ですが、サーバーの用意、データベースの設定、セキュリティ対策、プラグインの管理など、運用コストが高いイメージがありました。もっとシンプルに管理したいと考えました。

3. IDE上ですべてを完結させたかった

これがMicroCMSなどのヘッドレスCMS5を導入しなかった理由でもあります。 記事の執筆からサイトのデザイン変更まで、すべて使い慣れたVSCodeなどのIDE上で完結させたかったのです。Markdownファイルで記事を管理することで、Gitによるバージョン管理も容易になります。

4. 圧倒的な安さ

個人ブログにおいてランニングコストは重要です。 この構成なら、基本的に 無料 で構築・運用が可能です。

私の場合、独自ドメイン（.comなど）をCloudflareで購入しているため、その費用として 年間約1,800円 かかっていますが、サーバー代などは一切かかっていません。

※Cloudflare Pagesの無料プランにはビルド回数などの制限がありますが、個人のブログであれば十分な枠があります。

ホスティングサービス比較

「どのホスティングサービスを選べばいいの？」という方のために、代表的なサービスを比較してみました。

静的サイトホスティング（PaaS）の比較

サービス月額料金商用利用デプロイ特徴
Cloudflare Pages無料〜⭕ 可能Git連携で自動CDN6が超高速、無料枠が太っ腹
Vercel無料〜❌ 無料プランでは不可Git連携で自動Next.jsとの相性抜群、プレビュー機能が便利
Netlify無料〜⭕ 可能Git連携で自動フォーム機能が便利、CMS機能あり
GitHub Pages無料❌ 不可GitHub Actionsで自動GitHubユーザーなら手軽に始められる

VPSとの比較

「もっと自由にサーバーを触りたい」という方はVPSという選択肢もあります。

項目Cloudflare PagesVPS（例: さくらVPS, ConoHa）
月額費用無料〜約700円〜2,000円
セットアップ数クリックで完了サーバー構築の知識が必要
保守・運用不要（フルマネージド）自分でOS・ミドルウェア管理
自由度静的サイト・サーバーレス関数のみ何でもできる（DB、API、etc.）
スケーラビリティ自動（CDNで世界配信）手動でスケールアップ
セキュリティ自動で対策済み自分でファイアウォール設定等

私がCloudflare Pagesを選んだ理由

  1. 無料プランでも商用利用OK - アフィリエイトも安心
  2. 圧倒的なパフォーマンス - 世界中にエッジサーバーがあり超高速
  3. 運用の手間ゼロ - サーバー管理不要、セキュリティも自動
  4. 無料枠が充実 - 月500ビルド、帯域無制限

構築方法

構築の大まかな流れは以下の通りです。

1. テンプレート「AstroPaper」の使用

ゼロから構築するのは大変なので、AstroPaper というテーマを使用させていただきました。 シンプルでSEO対策もされており、ブログに必要な機能が揃っています。

2. カスタマイズ

テンプレートをベースに、自分の好みに合わせて以下のような多少のカスタマイズを行いました。

3. GitHubでリポジトリ管理

ソースコードはすべてGitHubのリポジトリで管理しています。

4. Cloudflare Pagesへのデプロイ

GitHubとCloudflare Pagesを連携させました。 記事を書いてGitHubにプッシュすると、自動的にCloudflare Pages側でビルドが走り、サイトが更新される仕組みになっています。

まとめ

これからブログを始めたいエンジニアの方や、コストを抑えて運用したい方にはおすすめの構成です。

特に以下のような方には最適です：

技術的なハードルは少しありますが、一度セットアップしてしまえば、あとは記事を書いてGitHubにプッシュするだけ。非常に快適なブログ運用ができています。

注釈

Footnotes

  1. SSG（Static Site Generator / 静的サイトジェネレーター） - ビルド時にすべてのHTMLを事前生成するツール。表示が高速でセキュリティも高い。 ↩

  2. Astro - 2021年に登場した新しいSSG。JavaScriptを最小限に抑え、高速なサイトを構築できる。React, Vue, Svelteなど様々なフレームワークのコンポーネントを混在させることも可能。 ↩

  3. Cloudflare Pages - Cloudflare社が提供する静的サイトホスティングサービス。世界中のエッジサーバーでコンテンツを配信するため非常に高速。 ↩

  4. CMS（Content Management System） - コンテンツ管理システム。WordPressが代表例。Webの知識がなくてもブラウザ上で記事の投稿・管理ができる。 ↩

  5. ヘッドレスCMS - フロントエンド（見た目）を持たないCMS。APIでコンテンツを取得し、好きなフレームワークで表示できる。MicroCMS, Contentful, Strapiなどがある。 ↩

  6. CDN（Content Delivery Network） - 世界中に配置されたサーバーからコンテンツを配信する仕組み。ユーザーに近いサーバーから配信されるため、表示が高速になる。 ↩

  7. CI/CD（Continuous Integration / Continuous Delivery） - 継続的インテグレーション/継続的デリバリー。コードの変更を自動でテスト・ビルド・デプロイする仕組み。 ↩

Next Post
電子マネーのチャージルート