サイトについて
一応SEの端くれとしてこのブログの構成や運用について話します。
サイトを作ったので要求、要件を公開してみる。
最近個人サイトへの回帰が増えているらしくその助けとなれば幸いだ。
要求
1.お金がかからない
2.高速で描画されること
3.運用しやすい
1に関してはドメインの更新費用だけに抑えたかった。レンサバの金額もチリツモで馬鹿にならない金額になる。
2これも自分の中では必須でphpで作られたサイト特にWordPressなどのCMSのあるサイトは何かと遅いので避けたかった。
3これはあまり重要ではないが複雑でなければよいぐらいのレベルだ。趣味で運用するので多少趣味色が強くなっても問題ない。
次がまとめた要件になる。
要件
機能要件
- 記事の投稿、公開ができること。
- 記事はカテゴリ、タグで分類ができること。
- 記事はタイトル、本文で検索できるようにすること。
- カテゴリごとのページを作ること。
非機能要件
- SEO対策をすること
- コストを最小化すること
- Gitデプロイに対応すること
- CDNを用いて高速化すること
これで要件がまとまったので次に技術選定を行う。
技術選定
使用しているサービス、フレームワークは以下になる。
- LLM Claude Code
- GitHub デプロイ、バージョン管理
- CloudFlare Pages 静的ページホスティング
- CloudFlare CDN、ドメイン、SSL
- Astro 静的ページ生成
Claude Code
Claude Codeについては言うまでもないだろう。何も考えずにProプランに入って月3000円払おう。その価値がある。
GitHub
Gitデプロイに対応となるとその時点でGitHubは確定する。
他にもGitのサービスはあるが特段理由がなければGitHubでいいだろう。
Astro
静的ページ生成フレームワークは色々あるがこれは個人的な趣味から選定した。
実際マークダウンから生成できればなんでもいい。
JSフレームワークはnodeに大きく依存するので余り好きではないのだが静的ページを生成するだけなら特に問題にならないだろう。 Dockerで環境を作ってビルドすればバージョンに困らされることもないはずだ。
CloudFlare
CDN、ドメイン、SSL、ホスティングはすべてCloudFlareにした。
理由は単純で安いから。
ドメインの更新費用が年間1500円で後は全部無料だ。これを使わない手はない。
AWSやGCPでも同等の構成を使えるが微妙に費用がかかるし個人向けにはちょっとオーバースペックなのだ。
一点注意事項があってCloudFlare Pagesの設定画面がCloudFlare Workersの画面と酷似しているので間違えないように。
何度やってもデプロイに失敗すると思ったらWorkersの方にデプロイしており一時間ほど無駄にした。
自分が技術を選定するときに一番気にしているのがサプライチェーンの問題だ。
サービスがいつまで続くか考えるだけで頭が痛くなるのだがこの構成なら多分自分が死ぬまで続いてくれるだろう。
静的ページ生成の良いところは脆弱性の対応からほぼ解放されるところだ。
商用環境のランタイムのアップデートなぞ考えるだけでつらいがそれがないのは精神衛生に大きく寄与する。
インフラ構成
ユーザー（ブラウザ）
|
| HTTPS
v
Cloudflare（CDN・DNS・SSL） ← 無料プラン
|
v
Cloudflare Pages（静的ホスティング・ビルド） ← 無料プラン
|
v
Astro（静的サイト生成）
|
├── src/content/（Markdownファイル）
└── GitHub（ソース管理・CI/CD）おわりに
このブログを作るに当たって自分はコードと言えるものを一行も書いていない。
すべてClaude Codeにやらせている。 CSSはまだまだなところがあるが２～３度壁打ちすれば大体直っている。
自分がやったことはCloudFlareのドメイン取得、設定とGitHubのレポジトリをクローンしたくらいで大体要件定義含めて大体4時間くらいでできた。
全く素晴らしい時代になった。
余談
当初はホスティングサービスをVercelにしようと思ったがアドセンスやアフィリエイトが無料プランだと規約違反なのにデプロイしてから気づきその日にCloudFlare Pagesへ移行した。
名著
