microCMS + Astro + Cloudflare Pages で高速・完全無料なブログを構築したら最高すぎた件

概要

今回は、microCMS + Astro + Cloudflare Pages のセットで完全無料なブログサイトを構築してみたら最高だったので、概要をまとめてみました。

ただし、完全無料といっても、カスタムドメイン（独自ドメイン）を使用する場合は、当然ですが「ドメイン費用」だけはかかります。
無償で提供されるサブドメイン（SSL通信可能）での運用をした場合は無料です。

脱「ブログ（CMS） ＝ Wordpress」

ブログやコーポレートサイト（会社のホームページなど）を運用する場合、基本的に CMS を使うことが多いと思います。

言うまでもなく、CMS（Contents Management System：コンテンツ管理システム） とは、本来は Web サイトの専門知識がなくとも記事の作成・更新などを運営できるシステムです。

Wordpress は運用が簡単じゃなくなってきた

CMS といえば、世界で最もシェアが大きいのは Wordpress（WP）だと思います。
サーバやクラウドサービスのデフォルト設定の選択肢にも当然のように存在するほど、まだまだ現役のサービスですが、実際には運用していて大変なことも多いです。

• 実際は、専門知識がある人が運用してるケースも少なくない
  • 高機能になり、プラグインも煩雑になり、結局エンジニアや専門知識がある人が触ってる
• テンプレートやプラグインに融通が利きづらい
  • 結局、項目・機能追加やちょっとした変更をしたい場合、やっぱりエンジニアが触ってる
• ちゃんと運用するとインフラ管理コストが意外とかかる
  • シェアが大きい分、攻撃対象にもなりやすいので、脆弱性へのケアが多くなる
  • プラグインのバージョンアップや仕様変更対応のメンテナンスなど
  • でも、実際は対応、システムが古くなっているケースも多い

そんなこともあってか、最近は 「ヘッドレスCMS」 での運用が注目され値ます。

ヘッドレス CMS とは

「ヘッドレス CMS（Headless CMS）」の「ヘッド」とは「Web ページ」を指します。つまり、フロントエンド機能を持たず、バックエンド機能のみを備えた CMS です。
もっと言うと、テンプレートやデザインの編集など見た目に関する設定・管理機能が無く、純粋にコンテンツの情報のみを管理するシステムです。コンテンツ情報を API で提供し、画面側はそのデータを使って表示するという流れになります。

従来の CMS ではテンプレート等も管理するため、バックエンドの言語など技術仕様に合わせて、バージョンアップ対応をしなければいけませんでした。
ヘッドレス CMS は見た目に関する設定などを行う機能がないため、表示画面に対する自由度が高く、カスタマイズ性や拡張性に優れます。

API での提供なので、サイトには「メール送信フォーム」も「決済機能」も「アナリティクス（解析ツール）」も連携可能です。

ただし、画面部分を別途用意する必要があるので、エンジニアや専門的な人が構築する必要があります。

ですが、実際にはヘッドレス CMS のサービス提供者が、数百種類の見た目のテンプレートが選択・利用できる仕組みを用意したりなど、簡単に構築することができます。テンプレートを利用した画面の設定・管理も Wordpress よりわかりやすく使いやすい画面になっているものが多い印象です。

今回はその中でも 「microCMS」 というサービスを利用しました。

microCMS とは

「microCMS」は、株式会社 microCMS より 2019 年 9 月にリリースされたヘッドレス CMS です。ヘッドレス CMS は英語のみに対応したシステムが多い中、microCMS は国内製なので、日本語にも完全対応しています。
画面の使いやすさ、運用のしやすさだけでなく、機能性やセキュリティ性など様々なメリットがありますし、国産だからこその問い合わせ・サポート依頼のしやすさ、無料プランの機能の豊富さも良いです。

また、管理画面がレスポンシブデザインに対応しているため、PC だけでなくスマホからもコンテンツの管理ができます。モバイル端末を横向きで使用すれば、PC用と同じ画面表示でも使用できます。

無料枠

料金プラン を確認すると、無料の 「Hobby」 プランは以下の通り

• クレジットカード登録不要
• 無制限の API 呼び出し（ブログ記事のデータ取得は完全無料）
• 最大３名のメンバー
• 最大3個の API（ブログ運営には十分な個数）
• コンテンツ上限は 10,000 記事

さらに、Webhook 機能が使えます。つまり 「記事を書いたら API で クラウドサービスや Slack に通知する」とかが API 単位で 可能です。これも無料です。

個人利用には十分ですね。
実際、画面も使いやすかったですし、慣れるとかなりいい感じでした。

Astro とは

「Astro（アストロ）」は、JavaScript(JS）ベースのフルスタック Web フレームワークです。リリースしてからも非常に勢いがあり、人気が出始めている技術です。今回は、これを「静的サイトジェネレータ」として利用しました。

主な特徴は以下です。

• 「Web アプリ」ではなく「Web サイト」を作るための技術
  • 豊富なコンテンツを持った Web サイトを構築するために設計されています
  • SPA ではなく、MPA 向けのフレームワーク
• 世界最速レベルの高速表示ができる
  • 完全に静的なページで作られたサイトを作ることができます
  • 不要な JS を自動的に排除する仕組みがあり、パフォーマンスは最高レベルです
  • パフォーマンスが高いこともあって、SEO 的にも非常に優れています
• Astro Islands アーキテクチャ
  • サイトの高速化にもつながっているアーキテクチャ・技術です
  • 画面のコンポーネント単位で、サーバサイドとクライアントサイドを完全に分離できます
  • この技術により、「React と Svelte と Vue のコンポーネントでページを作る」とかもできます
• 拡張性とカスタマイズ性が高い
  • Tailwind CSS などに人気のツールとの連携ツールも揃っています
  • クラウドサービスのとの連携機能も既にかなり充実してます

無料で使える

Astro はオープンソースの技術で、無料で商用利用も可能です。
技術的な観点ではフロントエンドとしては申し分ない性能の技術なので、静的サイトジェネレータとして採用しました。

というか、普通に 「Stripe（決済サービス）」連携とか、メール送信の連携ツールとか普通にあるし、<a> タグ使えば LINE 連携とかもできるし、GA4 等のアナリティクスや広告の挿入も連携可能でした。
ブログ運営としてはこちらも申し分ないです。

Cloudflare Pages とは

「Cloudflare Pages」 CDN では最大手で有名な Cloudflare 社が提供する JAMstack プラットフォームで、以下の点が主な特徴となっています。

• 無料で手軽にサイトをホスティングできる
• 世界中にネットワークを持つ Cloudflare の CDN エッジサーバ上へコンテンツが配置されるので、高いパフォーマンスが期待できる

無料枠

料金プラン の「Cloudflare Pages」を確認すると、無料の 「Cloudflare Free」 プランは以下の通り

• 一度に１ビルド
• ビルド 500回/月まで無料
• 管理画面無料
• サイト無制限
• リクエスト無制限
• 帯域幅 無制限
• SSL通信（https 化）も無料
  • ただし、無料のドメインは .pages.dev

こちらもアクセスのトラフィックをほぼ気にしなくて良いので、個人運営としては十分過ぎるほどに十分です。

完全無料ハイパフォーマンスブログの構成図

それぞれの無料枠をフル活用し、以下の構成にすることで、ハイパフォーマンスなブログを 完全無料 で運営することが可能です。

構成

• microCMS で記事を作成
• Astro で完全に静的な高速 Web サイトをデザイン
• Cloudflare Pages で高速表示
• Clodeflare Pages のデプロイフックを、microCMS の Webhook 機能に登録

この構成のポイント

• 表示記事をどれだけ読まれても無料
• 大量アクセスが飛んできても無料
• microCMS で記事追加・更新・削除したら Clodeflare Pages が自動でデプロイ
• 記事更新作業（＆ビルド）が 500回/月 以内なら無料
• コンテンツ数は 10,000 記事まで無料

ちなみに
Cloudflare には、他のソリューションとして「Cloudflare Workers」と「Cloudflare Pages Function」があります。
（どちらも中身は Cloudflare のエッジサーバで稼働するサーバーレス・サービスなので、結局はどちらも「Cloudflare Workers」と言えるのですが）

SSR モード で Web サイト構築する場合は、これらを使ってデプロイする構成も可能です。
ただし、これらの機能はどちらも 10万回/日 リクエストまで なので、すぐに心配する必要はないですが、Pages だけで済ませた方が、より「放置しても平気」感があります。

まとめ

とりあえず、「ヘッドレス CMS + 静的サイトジェネレータ + クラウドのホスティングサービス」構成で CMS・ブログ運営をするのが良さそうって話ですが、その中でも「microCMS」「Astro」「Cloudflare Pages」の組み合わせが無料なのにパフォーマンスめっちゃ良いっていう話でした 🙌✨

個人ブログ、個人事業主や会社などのホームページ、ランディングページ（LP）とかは「もうこれで良いじゃん」という感じがしております。
以上、ご参考までに。