Hachi Blog
2026-01-23

MuPyプロジェクトの開始

#python #gemini #mupy

MuPyとは、これからフルスクラッチで作ろうと思っている静的サイトジェネレーターです。 可能な限りシンプルな静的サイトジェネレーターを目指しまているので、Mu(無)Py(Python)が由来です。 というか、一人で作るので凝った物は作れない。

開発の動機

HugoやAstro,NextJSがある中で、わざわざ自分で作る動機は下記。

  • AI駆動なシステム開発の経験値をつむ
  • 個人的なメモ置き場にしたいので、Hugo や Astro ですら過剰な機能と感じる
  • 単純に趣味

開発方針

  • 極力自分でコードを書かないでAIに書かせる
  • スペック駆動開発を意識したバイブコーディング
  • 技術スタック
    • gemini cli
    • Python
    • Cloudflare Pages

初版作成

最初の一歩として、要件定義を行ったうえで最低限の静的サイトジェネレーターを作成します Google AI Proプランに入っていることもあり、GeminiCLIを利用します。 Vibeコーディングは機能の拡張や細かな修正が大変になってくるので、スペック駆動開発を意識して作成していきます。

  1. gemini起動

    gemini

  2. 要件定義

    > シンプルでモダンなブログサイトを作成するPythonの静的サイトジェネレーターを作成したい。要件定義をしたいから壁打ち相手になってくれない？

# 適当に質問が来るので、それに返答する形で要件定義をきめる

  3. 要件定義書と、開発計画書兼進捗管理書を作成する

    上記で要件定義が問題ないと判断したので、次に進める。

    > 要件定義は問題ないです。要件定義の内容を記したファイルと開発計画の内容を記したファイルの二つを出力してほしいです。これらは可能な限り詳細に記載してください。また、開発計画を記載するファイルで開発作業の進捗も管理できるようにしてください。ファイルは、「doc」フォルダを作成してその中に保存してください。

    これで、doc/フォルダが作成されて、その中に２つのファイル（development_plan.mdとrequirements.md）が作成される。

  4. 実装開始

    > okです。 @doc/development_plan.md と @doc/requirements.md を参照して実装を開始してください。

    各フェーズごとに実行有無を聞かれるので、適宜下記のプロンプトにて作業記録を残す。

    >  作業内容を@doc/development_plan.md に記録して。

  5. README.mdを作成

    > ツールの利用方法を記載したREADME.mdを作成してください。

以上で静的サイトジェネレーターが作成できました。 AI開発は、やはり爆速開発ですね。

成果物

doc/requirements.md

要件定義書です。

# 要件定義書

## 1. プロジェクト概要
Pythonを用いて、シンプルかつモダンなブログサイトを作成するための静的サイトジェネレーターを開発する。
記事はMarkdownで執筆し、Tailwind CSSを用いたレスポンシブなデザインを提供する。

## 2. 要件詳細

### 2.1 コンテンツ構成
- **記事形式**: Markdown (`.md`)
- **メタデータ**: Frontmatter (YAML形式) を使用 (タイトル, 日付, etc.)
- **URL構造**: フラット構造 (例: `domain.com/my-article.html`)

### 2.2 技術スタック
- **言語**: Python 3.x
- **テンプレートエンジン**: Jinja2
- **Markdownパーサー**: python-markdown
- **メタデータ解析**: PyYAML (標準的なFrontmatter解析のため)
- **スタイリング**: Tailwind CSS (初期はPlay CDNを使用し、ビルドプロセスを簡略化)

### 2.3 デザイン・UI/UX
- **レスポンシブ対応**: 必須 (PC/SP両対応)
- **ダークモード**: 初期リリースでは不要
- **ページ構成**:
    1.  **記事一覧ページ (Top)**: 記事のタイトル、日付、概要のリスト
    2.  **記事詳細ページ**: 記事本文

## 3. ディレクトリ構成
```text
/
├── content/            # 記事 (Markdown) 格納ディレクトリ
│   └── hello-world.md
├── templates/          # Jinja2 テンプレート
│   ├── base.html       # 共通レイアウト
│   ├── index.html      # 一覧ページ用
│   └── post.html       # 記事ページ用
├── output/             # 生成結果の出力先
├── doc/                # ドキュメント
├── main.py             # SSG実行スクリプト
└── requirements.txt    # 依存ライブラリ
```

doc/development_plan.md

開発計画＆進捗管理書です。

# 開発計画 & 進捗管理

## Phase 1: 環境構築と基盤作成
- [x] プロジェクトディレクトリ作成 & Git初期化 (既存の場合は確認)
- [x] `requirements.txt` 作成 (Jinja2, Markdown, PyYAML) & インストール
- [x] ディレクトリ構造の作成 (`content`, `templates`, `output`)
- [x] サンプル記事 (`content/hello-world.md`) の作成

## Phase 2: テンプレート作成
- [x] `templates/base.html` 作成 (Tailwind CDN読み込み, 基本構造)
- [x] `templates/post.html` 作成 (記事本文の表示)
- [x] `templates/index.html` 作成 (記事一覧のループ表示)

## Phase 3: SSGコアロジック実装 (main.py)
- [x] Markdownファイルの読み込み & Frontmatter解析処理の実装
- [x] 記事詳細ページのHTML生成 & `output` への書き出し
- [x] 記事リストの作成 (日付順ソートなど)
- [x] 記事一覧ページ (index.html) のHTML生成 & `output` への書き出し

## Phase 4: 動作確認と調整
- [x] ビルド実行 & `output` ディレクトリの確認
- [x] ブラウザでの表示確認 (レスポンシブ挙動含む)
- [x] コードのリファクタリング & コメント追加
記事一覧に戻る