ドメイン代だけで運用しているブログのスタック構成

dev 11分で読める
#Astro#Cloudflare#ブログ構築

このブログ、ドメイン代以外の維持費がゼロ円です。

フリーランスになってから固定費への目が厳しくなったので、個人ブログに毎月お金を払うのはちょっとなぁ…と思うようになってしまいました。

なるべく安く済ませたいなと。

  • ConoHaやエックスサーバーなどのレンタルサーバーでWordPressをインストールする
  • VPSを借りてWordPressを立てる

などの選択肢もあったけど、サーバー管理とかセキュリティアップデートとか、そういう管理作業を増やしたくない。

というより、長らくお世話になってはいたけど、WordPressは管理もしづらいし、バージョンやプラグインのアプデで画面が真っ白になるとか結構ザラなので正直新規ではもう使いたくない。

ブログを書くことに集中したいのに、インフラの世話をするのは本末転倒だしね。

なのでこのブログでは、最初から「タダで動いて、管理がほぼいらない」を条件にして構成を選びました。

スタック

選んだスタックはこんな感じ。

役割使っているもの
フレームワークAstro v6
ホスティングCloudflare Pages
ドメインムームードメイン
OG画像生成satori + sharp

そして、依存パッケージはこれだけ。

"dependencies": {
  "@astrojs/rss": "^4.0.18",
  "@astrojs/sitemap": "^3.7.2",
  "astro": "^6.1.8",
  "satori": "^0.26.0",
  "sharp": "^0.34.5"
}

そう、とってもシンプルなんです。

なぜAstroか。Next.jsじゃないのか

まず、そもそも、大前提。
どういう構成にしようか悩んでいた段階で、絶対に譲れない条件としてマークダウンファイル（.md）で記事を管理したいというベースがありました。

マークダウンでファイルを管理するとどんなメリットがあるか？というと

  1. リポジトリで管理できる
  2. Claude Codeで管理しやすい
  3. マークダウン記法が使える（当たり前）

などのメリットがあって、イメージとしてはObsidianと同じです。

ところで、ちょっと前にAI驚き屋さんがこぞって言っていた「Obsidianで第二の脳を作って稼ぐ！！」みたいな流行どこ行ったんですかね。

と、そんな前提で最初は素直にNext.jsを検討していたんですが、Next.jsはReactベースで、いい意味で機能が多すぎるかなと。

個人ブログの要件はMarkdownを書いてHTMLに変換することだけなので、覚えることをそこまで増やしたくなかった。というのも理由の一つです。

Astroにした決め手は「必要な箇所にしかJSを出力しない」設計になっていること。

Next.jsはReactの本体、ページを操作できる状態にする初期処理、ルーターのJSが問答無用で全ページに乗ってくる。ブログの記事ページはほぼ静的なコンテンツなのに、ページを開くたびにJSを読み込んで実行するコストがかかる。

AstroはデフォルトでJSをゼロに近づける設計で、インタラクションが必要な部分だけに絞って出力することができます。

実際にこのブログでJSを使っているのは：

  • ドロワーメニューの開閉（スマホ用ナビ）
  • Cmd+Kで検索を開くショートカット
  • スクロールに連動するTOCのアクティブ項目
  • ページトップへのスクロールボタン
  • URLコピーボタン
  • 検索フィルタリング

の、これだけです。

受託開発の案件柄、凝った見た目（Reactのモーションやエフェクト）や外部サービス（APIやデータベース）への接続などほぼ動的ページなので今回のスタック（静的）でのページは軽量すぎて、いい意味で意味がわからないレベルです。

表示速度はGoogleが検索順位の評価に使う指標の一つで、遅いサイトは検索結果で不利になるので「不要なJSを削る」は検索対策（SEO対策）にもなるので一石二鳥です。

記事はMarkdownで書いて、ファイルの先頭にカテゴリ・タグ・公開日を書く。
draft: true にしておけばビルドに含まれない。

---
title: "記事タイトル"
pubDate: 2026-04-21
category: claude-code
tags: [astro, blog]
draft: false
---

本文をここに書く。

記事ファイルも管理ファイルと同様のリポジトリで分離されている状態なのでGitで管理もしやすいのがポイントです。

なぜTailwindを使わなかったか

Tailwindは便利だけど、HTMLに className="flex flex-col gap-4 text-sm text-gray-600 dark:text-gray-300" みたいな文字列が並ぶのが結構苦手なんですよね。（好み）

コンポーネントの中でCSSが分散して、何がどこにあるか追いにくくなり、まるでWordPressの有料テーマような迷宮になりかねない。

でもAstroはコンポーネントごとに専用のCSSを書くことができ<style> タグに書いたCSSはそのコンポーネントにしか当たらないので、他のページに影響が出ない。

色や余白は変数（root）で管理すれば、ブログ規模なら十分に整理できる。

<style>
  .post-card {
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem 0;
  }
</style>

ページ数が少ないうちはTailwindの恩恵より管理コストのほうが高い。
大規模なアプリならTailwindを選ぶ（かも）こともあるけど、このブログには不向きかなと思いました。

Cloudflare Pagesを選んだ理由

無料枠の内容がかなり太っ腹。

  • ビルド 500回/月（個人ブログで到底超えない）
  • 帯域 無制限
  • カスタムドメイン 無制限
  • HTTPS 自動

帯域無制限はじわっとありがたくて、記事ごとの画像が増えても気にしなくていいのがかなりメンタルに優しいです。

帯域制限というのは「月に〇〇GBまで」というデータ転送量の上限のことで、それが基本的には無制限で使えるということです

また、カスタムドメインも無料で設定できるので至れり尽くせりです。

ちなみにVercelはカスタムドメインは有料、Herokuはそもそも無料プランはないので今回は見送ってます。

デプロイはCloudflareが提供するツール（Wrangler）でコマンド1つCLIで実行するだけでOKです。

npm run deploy
# 中身は astro build && wrangler pages deploy dist

Github Actionとかを併用して「コードを変更したら自動でデプロイ」みたいな仕組みは個人ブログにはオーバーすぎるので、おとなしく手元から直接デプロイしています。

個人ブログにこそまでいらないって、おばあちゃんが言ってました。

費用まとめ

項目月額
ドメイン（2log.me）約150円くらい
ホスティング無料
CDN・SSL無料

ドメインはムームードメインで取得して年払いをしています。

2log.me は .me ドメインなのでちょっと割高だけど「自分のブログ」って感じの名前が気に入っています。

とはいえ、ホスティングとCDNはCloudflare無料枠で賄えているので本当にありがたい。

忘備録にしつつ、いつかはAdSenseやアフィ関連で元を取ってくれれば万々歳です。

実装はClaude Codeと一緒にやった

このブログのコード、自分でゼロから書いた部分はほぼありません。

もちろん、ページの理念、構造、コンポーネント設計からOG画像生成、SEO対応まで口うるさい上司みたいに「こういうの作って」と指示を出して、出てきたコードをレビューして取り込む、を繰り返しました。

OG画像の日本語フォント問題で若干ハマったりもしましたが、Claude Codeと一緒にデバッグして簡単に解決できました。

受託開発でもそういう使い方をしているけど、個人プロダクトは要件が自分の頭の中にあるぶん、指示を出しやすくて楽しい。

受託開発は要件定義通りに作っても違うって言われるしね（闇）

どのくらいの開発期間か？

ちなみに、このサイトを作ろう！と思い立ち

  1. 要件定義をまとめ
  2. Claude Codeで実装
  3. ドメインを取得
  4. Cloudflareで公開

というところまでで、ざっくり半日（4時間）くらいでした。

この時間がいま、読んでくれている方にとって「遅っ！」とのか「ここまでやってこの時間！？」って思うのかは人それぞれだと思います。

でも、SNSでよく見る「会話してたら一瞬でサイトできた！！」というレベル感ではないことは、わかる人には伝わったらいいなと思います。

肝はClaude Codeの設定やルール、スキルなどをカスタムすることです。

Claude Codeの具体的な使い方については需要があれば別の記事で書くつもりです。

それでは、ここまで読んでくれてありがとうございました！また次の記事で。

  • niau

関連記事