Claudeに個人ブログシステムを作ってもらったお話

はじめに

技術的なこと以外も好きに書ける場所が欲しいなと思って、Claudeにブログシステムを作ってもらいました。

Claudeと話したこと

軽く調べて良さそうだったフレームワークを伝えて、他に何を決める必要があるかClaudeに教えてもらえいました。

自身のブログ用にMarkdownで記載されたブログをSSGするシステムを作成したいです.フレームワークはVite + Reactを検討しています．サーバーサイドが必要であればC#で実装したいです．仕様書を作成するに当たって，考慮するべきことがあれば質問してください．

人間の判断が必要な部分をMarkdownに書き出してもらって回答を追記し、

# Ri'Oily - ブログSSGシステム 仕様検討事項

## 概要
Astro + Reactを使用した、Markdown形式で記載されたブログをSSG（Static Site Generation）するシステムの仕様検討事項です。
サーバーサイドは不要（完全にstatic）。

---

## 1. コンテンツ管理

### 1.1 記事の管理方法
- Gitリポジトリでファイルベース管理？
  - yes
- 専用の管理画面を作る？
  - 現時点ではno
- 外部のHeadless CMS連携？
  - 単独システムで簡潔できればそうしたい
...

仕様検討事項のファイルに従って，詳細な仕様書（ディレクトリ構成、コンポーネント設計など）を作成してください

と伝えて仕様を詳細化してもらって、

開発計画に従って実装を行ってください．必要に応じて仕様書などを確認してください．

で全てをお任せするとできあがりました。

このブログの技術スタックなど

このブログは以下の技術スタックで構築されています。

• Astro: 静的サイトジェネレーター
• React: インタラクティブなコンポーネント
• Tailwind CSS: スタイリング
• TypeScript: 型安全性

インタラクティブ機能

以下のインタラクティブ機能を実装しています。

• 検索機能: Cmd/Ctrl + K でサイト内検索
• ダークモード: ヘッダーのアイコンで切り替え
• 目次表示: デスクトップ表示時に右側に表示

サーバーなど

SSGで生成されるコンテンツはVPSにデプロイされています。 ブログシステムのソースコードと記事は1つのGitリポジトリで管理されていて、 GitHub Actionsでmasterブランチが本番環境に、stagingブランチが検証環境にそれぞれ自動でデプロイされます。

staging環境はCloudflare Accessで保護されているので、URLを知っているだけではアクセスできません。

まとめ

人間はほぼ何もせずに良い感じのブログシステムを構築できました。 Cloudflare Accessの設定もClaudeに教えてもらって完全に理解した気がします。

あとは人間が良い記事を書くだけです。

付録：表示例

コードブロックやMDXによる独自コンポーネントの表示例です。

コードブロック

コードフェンスに title="..." を付けると、タイトルバーとコピーボタンが表示されます。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

タイトルなしでもコピーボタンが表示されます（ホバー時に表示）。

const message = 'Hello, World!';
console.log(message);

注意書きなど