ブログ概要 — 技術スタックとアーキテクチャ
このブログは、完全自動化された多言語技術ブログです。 テレグラムボットで対話したり、ニュースにコメントしたりすると、AIがブログ記事を作成・翻訳し、自動でデプロイします。
🏗️ 全体アーキテクチャ
[テレグラムボット] → [Gemini AI] → [Markdown生成]
↓
[自動翻訳 (EN/JA)]
↓
[Git Commit & Push]
↓
[GitHub Actions → GitHub Pages]
↓
[VitePress静的サイト]📦 フロントエンド (ブログ)
| 技術 | バージョン | 用途 |
|---|---|---|
| VitePress | v1.6.4 | 静的サイトジェネレーター (SSG) |
| Vue.js | v3.4 | VitePressの内部フレームワーク、カスタムコンポーネント |
| Markdown | — | ブログコンテンツ作成フォーマット |
なぜVitePressなのか？
- 優れたパフォーマンス — クライアントサイドのJavaScriptを最小限に抑え、高速に読み込み
- 高いセキュリティ — 純粋な静的ファイルのみを提供し、サーバーサイドの脆弱性を根本から遮断
- 開発者に優しい — Docsスタイルのレイアウトで執筆に集中
🌍 多言語対応
| 言語 | パス | 自動翻訳 |
|---|---|---|
| 🇰🇷 韓国語 | /blog/ | オリジナル |
| 🇺🇸 英語 | /en/blog/ | ✅ Gemini AI |
| 🇯🇵 日本語 | /ja/blog/ | ✅ Gemini AI |
- VitePressの
locales設定により、言語ごとに独立したサイドバーとナビゲーションを構成 - テレグラムボットの
/postまたは/syncコマンドで自動翻訳をトリガー
🎨 デザインシステム
6:3:1の配色比率を適用:
| 比率 | 役割 | カラー |
|---|---|---|
| 60% | Base | #ffffff (ライト) / #0f172a (ダーク) |
| 30% | Secondary | #2563eb (Blue) |
| 10% | Point | #f97316 (Orange) |
- ライト/ダークモード切り替えをサポート
- CSS Custom Propertiesでテーマを管理
🤖 バックエンド (テレグラムボット)
| 技術 | 用途 |
|---|---|
| Python 3.9+ | ボットのメインランタイム |
| python-telegram-bot | Telegram Bot API連携 |
| Google Gemini API | AI対話、ブログ作成、翻訳 |
| feedparser | Google News RSSニュースのスクレイピング |
| schedule | ニュース配信スケジューラー（毎日09:00 KST） |
| GitPython | ブログリポジトリへの自動コミット/プッシュ |
ボットの主要コマンド
| コマンド | 機能 |
|---|---|
/post [タイトル] | 対話ベースのブログ自動作成 + 翻訳 + デプロイ |
/write | Markdown直接入力による投稿 |
/sync | 未翻訳記事の一括翻訳 |
/usage | APIトークン使用量の確認 |
/reset | 対話セッションのリセット |
AIモデルの分離
| モデル | Temperature | 用途 |
|---|---|---|
chat_model | 0.7 | 自然な対話 |
post_model | 0.2 | 事実ベースのブログ作成（ハルシネーションを最小化） |
🔗 サードパーティ連携
| サービス | 用途 |
|---|---|
| Giscus | GitHub Discussionsベースのサーバーレスコメントシステム |
| Google Analytics 4 | 訪問者トラフィックおよび国/言語別の統計追跡 |
| RSS Feed | 3言語別の購読フィードを自動生成 (feed.xml) |
| Sitemap | 検索エンジン最適化用のサイトマップを自動生成 |
| Google Search Console | 検索表示の管理およびインデックス登録 |
🚀 CI/CDパイプライン
コードPush (mainブランチ)
↓
GitHub Actionsトリガー
↓
npm ci → vitepress build
↓
sitemap.xml + feed.xml 自動生成
↓
GitHub Pagesへ自動デプロイ- ビルド時間: 約4秒
- デプロイ方式: GitHub Pages (静的ホスティング)
- ブランチ戦略:
mainブランチへのpush時に自動デプロイ
🛡️ セキュリティ
| 項目 | 方法 |
|---|---|
| APIキー管理 | .env + .gitignore (Gitに含めない) |
| ボットソースの自動バックアップ | 1時間ごとの自動コミット/プッシュ (auto_push.py) |
| 静的サイト | サーバーサイドコードなし → 攻撃対象領域を最小化 |
| コメントシステム | GitHub OAuthベースの認証 (Giscus) |
📁 プロジェクト構造
uoosnn.github.io/ ← ブログ (VitePress)
├── .vitepress/
│ ├── config.mjs ← サイト設定、サイドバー、RSS、Sitemap
│ └── theme/
│ ├── custom.css ← 6:3:1配色テーマ
│ ├── index.mjs ← Giscusレイアウト拡張
│ └── components/
│ └── GiscusComment.vue ← コメントコンポーネント
├── blog/ ← 韓国語オリジナル記事
├── en/blog/ ← 英語翻訳版
├── ja/blog/ ← 日本語翻訳版
├── resume.md ← 履歴書（多言語）
└── .github/workflows/
└── deploy.yml ← CI/CDパイプライン
telegram_bot/ ← テレグラムボット
├── bot_main.py ← メインエントリーポイント
├── ai_processor.py ← Gemini AI処理
├── github_uploader.py ← Gitアップロード
├── news_scraper.py ← ニュース収集
└── auto_push.py ← 自動コミット/プッシュこのブログはサーバーなしで運営される完全自動化システムです。テレグラムで対話するとブログ記事が作成され、AIが翻訳し、GitHub Actionsがデプロイします。
投稿日時: 2026-08-15 13:57:00更新日時: 2026-08-15 13:57:00