このブログで使っている技術スタック

このブログはAstroで記事を作って、Cloudflareで配信しています。
シンプルな構成だけど、更新しやすくて表示も速いのでかなり気に入っています。

この記事のポイント#

ブログの全体構成#

まず全体像はとてもシンプルです。

• フレームワーク: Astro
• 記事管理: GitHunリポジトリ内のMDXファイル
• 配信基盤: Cloudflare Pages
• 画像配信: Cloudflare Images

いわゆるJamstack構成に近いと思いますが、記事はCMSを使わずソースコード内で管理しています。

そのほうが記事自体のバージョン管理もできますし、GitHub Copilotからの指摘も受けやすくなるので便利です。

Astroを使っている理由#

一言でいうと、コンテンツ配信に強いからです。

Astroは静的HTMLを事前に生成するので、ページ表示が速く、運用もシンプルです。ブログのように「情報を読みやすく届ける」用途にはとても相性がいいです。

また、Markdown/MDXプラグインがビルトインなので、記事を書くハードルが低いのも大きなメリットです。最初はほぼ設定なしでも書き始められます。

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

Cloudflare Pagesを使っている理由#

Cloudflare Pagesは、静的サイトの公開がとても簡単です。無料枠でも十分試せますし、運用しながら育てやすいのが良いところです。

特に便利なのが、ブランチごとにプレビューURLが発行されることです。記事をコミットしていけば、ローカル環境を開かなくても変更確認ができます。

この仕組みのおかげで、スマホ中心でも記事更新が回ります。スマホで写真を撮って、そのまま記事に反映して確認できる流れが作れるので、思いついた時にすぐ公開準備できます。

Cloudflare Pages

Build your next application with Cloudflare Pages

pages.cloudflare.com

Cloudflare Imagesで画像配信をしている理由#

画像はCloudflare Imagesを使っています。理由は、Cloudflareの運用にまとめやすいことと、配信時の制御がしやすいことです。

例えば、配信URLのパラメータでサイズを調整できるので、モバイルとPCで最適な画像サイズを出し分けやすくなります。結果として、表示速度と見た目のバランスが取りやすいです。

Cloudflare Images | Storage, resizing, and delivery

Cloudflare Images is a robust, cloud-native image pipeline that ingests, stores, optimizes, and delivers images across a global network.

www.cloudflare.com

MDXで記事表現を広げる#

通常のMarkdownだけでも記事は書けますが、MDXを使うとコンポーネントをそのまま本文に埋め込めます。

このブログでも、例えば「Info」という名前のコンポーネントを作り、説明を読みやすく整理しています。必要なところだけ表現を強くできるので、長文記事でも伝わりやすくなります。

実際の記事では以下の感じで書きます。

1
2
3
4
5

<Info title="MDXコンポーネントの使い方">
  この中に文字を入れます。
</Info>

そうするとAstroがビルドして以下のようなリッチな見た目になるという流れです。

スマホ中心で執筆するなら入れておくと便利なアプリ#

スマホだけで更新するなら、GitHubアプリを入れておくとレビューや差分確認がかなり楽になります。

GitHub

GitHub

Issue確認、PRレビュー、通知確認までスマホで完結しやすくなる公式アプリです。

まとめ#

このブログは、Astro + Cloudflareを中心にしたシンプルな構成です。

• Astroで記事を作りやすくする
• Cloudflare Pagesで公開とプレビューを回す
• Cloudflare Imagesで画像配信を最適化する
• MDXで必要な表現力を足す

この組み合わせは、配信速度と運用のしやすさのバランスがとても良いです。特に「思いついた時にすぐ記事化したい」人には、かなりおすすめできる構成だと思います。