Astro + Keystatic + Cloudflare Pagesで自分だけの完全無料ブログを構築！

こんにちは、鈴木俊吾（すずしん）です。

一般的に、マネタイズ目的でブログ運営を本格的にしようと思ったら…。
基本的にはWordPressを利用する方が多いのではないでしょうか？

私も以前はWordPressを使ってブログを構築していました。
ただ、しばらくして、セキュリティ問題や動作の快適さなどが気になるようになっていたのです。

「もっと安全にブログを運営したい」
「どうせなら無料でブログを運営できるようにしたい」
そう思った私は、これまでに色々な方法を試してきました。

そして、今現在採用しているのは、Astro + Keystatic + Cloudflare Pagesという組み合わせです。
この組み合わせなら、ローカルでブログ記事を書き、静的ファイルとして出力、配信自体は無料でできます。
もちろん、この記事も、Keystaticから執筆していますよ。

非エンジニアの方からすると若干敷居が高いかもですが、試してみる価値はあると思います。
この記事では、Astro + Keystatic + Cloudflare Pagesの構成でブログを構築することのメリットについて解説します。

なぜAstro + Keystatic + Cloudflare Pagesという構成なのか？

この組み合わせに行き着くまでには、色々な試行錯誤がありました。
そんな中、なぜこれらの組み合わせに落ち着いたのか？
それには、まるで「静かな図書館」をインターネットの海に建てるような、圧倒的な快適さをもたらしてくれたことが要因です。

メリット１：維持費が完全無料の範囲という究極の安心感

WordPressを運営する場合、レンタルサーバー代やドメイン代で毎月数千円の固定費がどうしても発生します。
「ブログで生活したい」と願う挑戦者にとって、この固定費は地味に心を削るノイズになりかねません。

しかし、Cloudflare Pagesの無料枠は驚くほど寛大です。
アクセスがどれだけ急増しようとも、基本的には0円。
サーバーの維持費という「兵糧」の心配を完全に捨て去り、純粋にコンテンツ制作だけに全精力を注ぎ込める環境が、ここにはあります。

メリット２：光速の表示速度と、鉄壁のセキュリティ

WordPressの画面が遷移する際の「あの、ほんの数秒のモタつき」。
あれが読者の離脱を招くことは周知の通りです。

Astroは、不要なJavaScriptを徹底的に削ぎ落とした「静的ファイル」を出力するため、ページを開いた瞬間に文字と画像が目に飛び込んできます。
文字通り、思考の速度を追い越すような快感です。

さらに、データベースを持たない「JAMstack」な構成であるため、悪意あるハッカーから狙われる脆弱性もほぼ皆無。
夜、セキュリティプラグインの警告に怯えながら眠る必要はもうありません。

メリット３：Markdownの煩わしさを消し去る、Keystaticの静かな魔力

「静的ブログは速くて安全だけど、記事を書くたびにエディタを開いて、フロントマターを手動で整えて、マークダウン記法で打っていくのが苦行すぎる……」
そう思っていた私を救ってくれたのが、Keystaticでした。

ローカル環境で /keystatic にアクセスした瞬間、目の前に現れるのはWordPressやNotionのように洗練されたビジュアルエディタ。
静寂に包まれた部屋でキーボードを叩くと、心地よいテンポで文字が紡がれていきます。
裏側では自動的に美しいMarkdownファイルが生成されているため、技術の複雑さを一切感じることなく、「書く楽しさ」だけに没頭できるのです。

ブログ構築にあたっての大きな壁（デメリット）

ここまで絶賛してきましたが、すべてが完璧というわけではないのです。
この構成でブログを構築するにあたっての大きな壁についても言及しておきますね。
実際、私自身もかなり苦しめられました……。

大きな壁その１：非エンジニアには敷居が高い！？

「ボタン一つでインストール完了！」というWordPressとは違い、Gitの操作やターミナルでのコマンド入力、Cloudflareとの連携設定など、最初は暗闇の中を手探りで進むような泥臭い作業が必要です。
私も最初、設定ファイルの記述を一つトチっただけで画面が真っ白になり、冷や汗を流しながらコードとにらめっこする夜を過ごしました。

大きな壁その２：動的な機能（コメント欄や高度な検索）には一工夫必要

この構成の場合、データベースがありません。
読者からのコメント欄や、サイト内検索を実装しようとすると、外部サービスを組み合わせるなどの工夫が求められます。

実装のヒント：私自身の構築例

私の場合、ブログの構築にはAntigravityを利用しました。
ブログの運営に必要そうな機能を洗い出して、仕様を固め、実装を指示しています。
ちなみに、私の場合は、仕様一覧をspec.mdに書き出しています。
大体、9割ほどはAI製で、残りは自分で微調整していますね。

あなたも、Astro + Keystatic + Cloudflare Pagesの構成で行きたい場合には……。
これらの構成で実装したいとAIに指示してください。

参考までに、私のブログでは、以下のようなディレクトリ構成となっています。

.astro
.cache
.vscode
.wrangler
dist
node_modules
public
scripts
src
  assets
  components
  content
  layouts
  lib
  pages
  styles
  content.config.ts
.env
.gitignore
.astro.config.mjs
bun.lock
keystatic.config.ts
package.json
README.md
spec.md
svelte.config.js
tsconfig.json

個人的なこだわりとしては、パッケージマネージャにBun、フレームワークにSvelteを採用していること。
Bunでパッケージを管理すると、爆速で環境構築ができますよ。
Svelteを採用しているのは、個人的に好きだということと、純粋なコードを出力してくれることが大きいですね。

私のブログの場合でのkeystatic.config.tsは以下のようになっています。
ブログ運営で必要となりそうなフィールドをカバーしています。

import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: {
    kind: 'local',
  },
  ui: {
    brand: {
      name: 'SUZUSHINLAB CMS',
    },
  },
  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title', validation: { isRequired: true } } }),
        description: fields.text({ label: 'Description', multiline: true, description: '記事の概要（SEOや一覧ページで使用されます）' }),
        slug: fields.text({ label: 'Custom Slug', description: '任意のURLスラッグ（空白の場合はファイル名が使用されます）' }),
        image: fields.image({
          label: 'Cover Image',
          directory: 'src/assets/images/posts',
          publicPath: '../../assets/images/posts/',
        }),
        category: fields.text({ label: 'Category', defaultValue: '雑記' }),
        tags: fields.array(fields.text({ label: 'Tag' }), {
          label: 'Tags',
          itemLabel: props => props.value
        }),
        publishedAt: fields.date({ label: 'Published Date' }),
        updatedAt: fields.date({ label: 'Updated Date' }),
        isDraft: fields.checkbox({ label: 'Draft', description: 'Set this post as a draft' }),
        content: fields.mdx({
          label: 'Content',
          extension: 'mdx',
          options: {
            image: {
              directory: 'public/images/posts',
              publicPath: '/images/posts/'
            }
          }
        }),
      },
    }),
  },
});

AIエージェントに任せれば、ある程度は形になると思います。
エラーが出た場合やイメージとちょっと違う時に、方向性を上手く指示できるかがポイントとなります。

まとめ：「書くこと」そのものに没頭できる至福

かつての私は、プラグインの更新やサーバーの不調といった「ブログの周辺作業」に多くの時間を奪われていました。
しかし、Astro + Keystatic + Cloudflare Pagesという環境を手に入れた今、そのストレスは完全に霧散しました。

客観的に見れば、これはただの効率的な技術選定かもしれません。
ただ、主観的な体験として、私にとってこのブログは、誰にも邪魔されない、私だけの言葉を蓄積していく「人生の図書館（あるいは静かな書斎）」そのものです。

システムを構築すること自体が目的ではありません。
すべては、再び「書くこと」の喜びに没頭するために。

もしあなたが、既存のブログ環境にどこか息苦しさを感じているなら。
この静かで強力な新世界へ、一歩踏み出してみませんか？