ホーム 記事 タグ ツール About

年間維持費1700円で構築したこのサイトの技術スタック

更新日:
作成日:
#技術#Astro#Cloudflare#Tailwind CSS
約5分で読めます

どーも、ちょりんだです。

年間維持費1700円で構築したこのブログの技術スタックと、追加実装した機能についてまとめます。

技術選定のポリシー

このブログを作るにあたって、以下のポリシーで技術選定を行いました。

  • 最小コスト: 可能な限り無料で運用したい
  • シンプル: 複雑な構成は避ける
  • 高速: 静的サイトとして配信する
  • モダン: 見た目にもちゃんとこだわりたい
  • プライバシー: 外部スクリプトやトラッキングを避ける

使っている技術

カテゴリ技術
フレームワークAstro v5
CSSTailwind CSS v4
ホスティングCloudflare Pages
コンテンツ管理Markdown（Astro Content Collections）
フォントInter + Noto Sans JP（Google Fonts）
RSS@astrojs/rss
バージョン管理GitHub
開発マシンMacBook Air (M4)
エディタWindsurf
AIアシスタントClaude Opus 4.6

なぜ Astro なのか

Astro はコンテンツ重視のWebサイトに最適化されたフレームワークです。

  • デフォルトで JavaScript ゼロ のHTMLを出力する
  • Markdown / MDX でコンテンツを書ける
  • ビルドが高速

ブログのような読み物サイトにはぴったりだと思います。

なぜ Tailwind CSS なのか

  • ユーティリティファースト でクラス名を考えなくていい
  • HTML内で完結するのでファイルを行き来しなくて済む
  • v4 から @theme で CSS 変数ベースのカスタマイズが簡単になった

グローバルCSSは Markdown のタイポグラフィ（.prose）とテーマ変数だけに抑えています。

なぜ Cloudflare Pages なのか

  • 無料枠が十分: 月500回のビルド、帯域無制限
  • グローバルCDN: 世界中のエッジから配信
  • Git連携: main に push するだけで自動デプロイ

他の選択肢（Vercel、Netlify）も優秀ですが、無料枠の制約の少なさで Cloudflare Pages を選びました。

プロジェクト構成

src/
├── content/
│   └── blog/          # Markdown記事
├── layouts/
│   ├── BaseLayout.astro    # 共通レイアウト（ヘッダー・フッター）
│   └── BlogPost.astro      # 記事詳細レイアウト
├── pages/
│   ├── index.astro         # トップページ
│   ├── about.astro         # Aboutページ
│   ├── rss.xml.ts          # RSSフィード
│   └── blog/
│       ├── index.astro     # 記事一覧
│       └── [...slug].astro # 記事詳細（動的ルーティング）
└── styles/
    └── global.css          # Tailwind設定 & グローバルスタイル

サイト構築にかかった時間

サイトの構築から初ホスティングまでにかかった時間は、なんと約1時間です。

Windsurf + Claude Opus 4.6 によるバイブコーディングのおかげで、自分ひとりでやったら半日〜1日はかかるであろう作業が1時間で完了してしまいました。プロジェクトの初期化、レイアウト作成、スタイリング、コンテンツ設定、Cloudflare へのデプロイまで、すべてAIと対話しながら進めています。

「コードを書く」のではなく「AIに意図を伝えてコードを生成する」という開発スタイルは、まさにAI革命を肌で感じる体験でした。エンジニアに求められるスキルが「実装力」から「設計力と言語化力」にシフトしていくのを、身をもって実感しています。

サイト運営費用

このブログの運営にかかる費用はドメイン代のみです。

項目費用
ドメイン（Cloudflare Registrar）$11.51 USD/年
ホスティング（Cloudflare Pages）無料
ビルド・デプロイ（Cloudflare Pages）無料
SSL証明書無料
CDN無料
合計$11.51 USD/年

2026年3月時点の為替レート（1 USD ≈ 150円）で換算すると、年間約1,727円。月あたり約144円でブログを運営できています。

実装した機能

高優先機能（読者体験直結）

  • 読了時間表示: 文字数から自動計算（600字/分）
  • 目次（ToC）: h2/h3見出しから自動生成
  • コードコピーボタン: インラインJSで実装
  • SNSシェアボタン: 外部JSなし、アンカータグのみ

中優先機能（UX向上）

  • ダークモード: localStorage + システム設定尊重
  • 読了プログレスバー: スクロール追従
  • 全文検索: Pagefind（ビルド時インデックス）
  • OGPメタタグ: Twitter Card対応

低優先機能（あると嬉しい）

  • トップに戻るボタン: 300pxスクロールで表示
  • 前後の記事ナビ: 静的生成
  • PVカウンター: Cloudflare Analytics API

自動生成機能

  • OGP画像: 1200×630px、記事ごとに自動生成
  • サムネイル画像: 400×240px、記事一覧用

すべて外部ライブラリなしで実装し、爆速表示とプライバシー保護を実現しました。

まとめ

過剰な技術投資を避け、コンテンツに集中できる構成にしました。ブログに求められるのは凝った機能ではなく、書き続けられる仕組みだと思っています。

年間1700円という圧倒的低コストで、モダンで高速なブログを運営できる。これが2026年のWeb開発の力だと思います。

Share