Astro + shadcn + MicroCMS + Cloudflareで最速Jamstackブログ構築

AstroとMicroCMSとCloudflareで実現する何も捻くれていない王道Jamstack

このブログは、Astroを使用してMicroCMSから受け取ったコンテンツを表示する、いわゆるJamstackな構成になっています。

ホスティングはCloudflare Pagesで、ギャラリー(必見) 用の画像はCloudflare R2に配置しています。

「パフォーマンスが良くセキュリティの高いブログにしたい...... 。」

という立派な理由は別になく、シンプルに最速で構築し、低コストで運用したくて技術選定を行った結果この構成になりました。

Geminiさんと相談しながら考えたので、かなり想定通りにスムーズに構築できたなと思っています。

とにかく早くブログを作りたい！

自分のサイトを自分で構築して運用してみようと思ったことは今まで幾度となくあったんですが、毎回スタイリングの途中で飽きてしまって運用まで行きませんでした。

なので、今回は凝ったデザインにしようとか考えず、とにかく早く・それっぽくブログを作ることを目標にして制作しました。

ｍicroCMS + Astro

ちょっと前にブログを作ろうとしたときは、フレームワーク自体への興味や学習の意味も込めてNext.jsやDenoのFreshを使用していたのですが、制作途中に調べもので手が止まることが当たり前に多々あったため、手段が目的化してしまわないよう、学習コストが低いAstroを選択しました。

わたくしはReactがチョットワカルのでコンポーネントの作成はほとんど.tsxで、ページ自体は.astroで作っています。

Astroで特に良かったのが、フルスタックフレームワークのSSGモードを学習していろいろ設定して......みたいなことしなくとも、デフォルトでSSGモードな部分です。

（Next.jsやReactRouter v7で悩まされた記憶があり......。）

サイトマップの生成@astrojs/sitemapやGoogleAnalyticsをパフォーマンスを損なわずに設定するためのPartytown@astrojs/partytownの導入など、Webサイトの運営に必要なことが簡単に実装できるのもポイント高いです。この辺は他のフレームワークとの比較まではしてないですが。

Shadcnblocksをフル活用

今回はUIライブラリとしてshadcn/uiを導入して、Shadcnblocksというshadcn/uiでレイアウトされたレスポンシブなパーツを、コピペで組み合わせて制作していくことにしました。

Shadcnblocksのサイトを見に行くと分かりますが、当ブログはほぼそのままの見た目をしています（2025/10/04現在 あとでいろいろ手を加えているかも）。

レスポンシブなレイアウトが準備されているので特に面倒なレスポンシブ対応をもすっ飛ばし、コピペしたコンポーネントをレゴブロックのように配置して、ほんの少し手を加えるだけでブログを制作することができました。

環境のセットアップ

shadcn/uiのマニュアルに従うだけでOKです。

まずプロジェクトの作成

npx create-astro@latest {appname} --template with-tailwindcss --install --add react --git

tsconfig.jsonを編集

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

shdcn/uiをインストール

npx shadcn@latest init

あとはShadcnblocksからコピペしてくるだけ✌️

とにかく安くブログを運用したい！

わたくしは昔WordPressのブログを運用していたことがあったんですが、その時の初期費用が大体1~2万円くらいだった記憶があります。今はもっと安かったりするのかも分かりませんが。

ドメインやサーバーの費用が発生するのは当たり前ですが、個人ブログを運用するにあたってランニングコストを抑えるのが最重要ミッションでした。

Cloudflareをフル活用

最速、最安！を実現するために選ばれたのはCloudflareでした。

Cloudflare内ですべてを完結させることで、運用が楽になることも狙っています。

ビルド完了時にCloudflare Global CDNのすべてのエッジロケーションに配置される（Push型のデプロイモデルと言うらしい）ため、多分アクセスもめっちゃ速いです。

Cloudflare Pages

まず最初にデプロイ先のプラットフォームとして選定したのがCloudflare Pagesです。

無料でホスティングできることや、GitリポジトリやMicroCMSと連携させるだけで、リポジトリ更新時や記事作成時に自動でビルドとデプロイを行ってくれる運用の手軽さが魅力です。

VercelやNetlifyでも似たような運用はできますが、CloudFlareのエコシステムを活用して、わたくしのブログに必要な全てを一つのサービス内で実現できることが選定理由です。

（VercelはFreeプランだと商用利用が禁止なので、今後広告とか載せてみたくなったときに困るなとも思いました。）

Cloudflare Registrar

卸売価格でのドメイン提供がされているので安価であることや、ワンクリックかつ無料で DNSSECを有効化できたりなどが、お名前ドットコムとかのサービスと比較してメリットとして挙げられると思います。

また、Cloudflare Registrarでドメインを購入すると「Universal SSL」が自動で有効になるため、取得したドメインとワイルドカードサブドメインのSSL証明書を、Cloudflareが無料で更新し続けてくれます。

ここに関してわたくしは正直、CloudFlare内ですべてを完結させたいというニーズで選定しています。個人で運用する以上、いろいろなサービスを組み合わせて構築するよりも、同一サービス内で完結させたほうが管理が楽ですからね。

（フワッとしていますが、あまり詳しくないのでこんな感じで......。）

当ブログのドメインpixelfringe.comは$10.46（2025/10/04現在）でした。

ちなみに.jpは買えません。

Cloudflare R2

10GBまで無料で利用できて、配信時の料金がなんと0の、ご機嫌なストレージサービスです。

ブログの運用に必須ではないんですが、使ってみたかったやつです。ギャラリー用の画像をアップロードしていくストレージとして活用しています。

今後動画とかアップロードしたくなってもこれを使用すれば安心です。

アップロードした画像を公開するにはカスタムドメインの登録が必須なので、わたくしの場合はimage.pixelfringe.comという感じでサブドメインを登録して運用しています。

Cloudflare Analytics

プライバシーに配慮された、Webのパフォーマンス計測に強いアナリティクス......らしいです。

今回わたくしはGoogleAnalyticsを導入しているので使用していませんが、Cloudflare Analyticsを使用すると確認もCloudflare内で完結できて楽だと思います。

（なんでここまでCloudflareのサービスに拘ってきたのにこれを使わないのかというと、単純にGoogleAnalyticsの方が見慣れているからです。）

あとがき

そんなこんなで完成したのがこのブログです。

昨日の仕事中にブログを作ろうと思い立ち、今日のうちに完成してこの記事を書いており、とにかく安く早く簡単に作れたのでAstroが使えるなら誰でも同じ構成で「誰でもできる楽々最速JamStackブログ構築」がやれると思います。

わたくしは最近SESをやめてWeb制作のお仕事に転職したので、「microCMSですか？Cloudflareですか？ 個人的に使っていますよ😤」って言いたかった的なモチベーションもあり構築してみましたが、とにかく本当に楽々実装で感動しています。

microCMS自体も使いやすいです。プレビュー機能が少し欲しいかもと思ったりしなくもないですが、どうしても欲しかったらローカルで見たり、自前で実装する方法がインターネットにはいくらでも転がっていますし（というか公式ブログやドキュメントにある）。

PixelFringe よろしくお願いします。

もっとあとがき（Cloudflare PagesとCloudflare Workersについて）

このブログをCloudflare Pagesで構築しようと思ったときに、Cloudflare 公式ブログのとある記事を読みました。

Cloudflareは投資・最適化・機能強化をWorkersに専念するよ。Pagesもサポートを続けるけど、Workersが静的アセットの配信とSSRの両方をサポートするようになったからWorkersを初めに検討してね。ということを言っています。

当然Workersでやるべきだ💪と一瞬思ったのですが、今回の目的は最新の技術を活用することでも、動的な処理やAPIを組み込んだりするようなアプリケーションを作ることでもなく、最速でブログを構築することでした。

そのため、今回わたくしはPagesの方がリファレンスも豊富で迷わないだろう！という判断でCloudflare Pagesで構築しています。

（移行も難しくないみたいなので、そのうち移行作業をするかもしれません。）