Blog Overview — Tech Stack and Architecture

This blog is a fully automated, multilingual tech blog. When I chat with a Telegram bot or comment on news, an AI writes and translates a blog post, then deploys it automatically.

---

🏗️ Overall Architecture

[Telegram Bot] → [Gemini AI] → [Markdown Generation]
                                    ↓
                        [Auto-Translation (EN/JA)]
                                    ↓
                          [Git Commit & Push]
                                    ↓
                     [GitHub Actions → GitHub Pages]
                                    ↓
                        [VitePress Static Site]

---

📦 Frontend (Blog)

Technology	Version	Purpose
VitePress	v1.6.4	Static Site Generator (SSG)
Vue.js	v3.4	VitePress internal framework, custom components
Markdown	—	Blog content writing format

Why VitePress?

1. Excellent Performance — Loads quickly by minimizing client-side JavaScript
2. High Security — Serves only pure static files, eliminating server-side vulnerabilities
3. Developer-Friendly — Docs-style layout helps focus on writing

---

🌍 Multilingual Support

Language	Path	Auto-Translation
🇰🇷 Korean	/blog/	Original
🇺🇸 English	/en/blog/	✅ Gemini AI
🇯🇵 Japanese	/ja/blog/	✅ Gemini AI

• Configured independent sidebars and navigation for each language using VitePress's locales setting
• Auto-translation is triggered by the Telegram bot's /post or /sync commands

---

🎨 Design System

Applied the 6:3:1 color ratio:

Ratio	Role	Color
60%	Base	#ffffff (Light) / #0f172a (Dark)
30%	Secondary	#2563eb (Blue)
10%	Point	#f97316 (Orange)

• Supports Light/Dark mode switching
• Manages themes with CSS Custom Properties

---

🤖 Backend (Telegram Bot)

Technology	Purpose
Python 3.9+	Bot main runtime
python-telegram-bot	Telegram Bot API integration
Google Gemini API	AI conversation, blog writing, translation
feedparser	Google News RSS scraping
schedule	News dispatch scheduler (Daily 09:00 KST)
GitPython	Auto commit/push to the blog repository

Key Bot Commands

Command	Function
/post [title]	Auto-write blog post based on conversation + translate + deploy
/write	Post by directly inputting Markdown
/sync	Batch translate untranslated posts
/usage	Check API token usage
/reset	Reset conversation session

AI Model Separation

Model	Temperature	Purpose
chat_model	0.7	Natural conversation
post_model	0.2	Fact-based blog writing (minimize hallucinations)

---

🔗 Third-Party Integrations

Service	Purpose
Giscus	Serverless comment system based on GitHub Discussions
Google Analytics 4	Visitor traffic and statistics tracking by country/language
RSS Feed	Auto-generates subscription feeds for 3 languages (feed.xml)
Sitemap	Auto-generates sitemap for SEO
Google Search Console	Search exposure management and indexing

---

🚀 CI/CD Pipeline

Code Push (main branch)
     ↓
GitHub Actions Trigger
     ↓
npm ci → vitepress build
     ↓
Auto-generate sitemap.xml + feed.xml
     ↓
Auto-deploy to GitHub Pages

• Build Time: ~4 seconds
• Deployment Method: GitHub Pages (Static Hosting)
• Branch Strategy: Auto-deploy on push to main branch

---

🛡️ Security

Item	Method
API Key Management	.env + .gitignore (Not included in Git)
Bot Source Auto-Backup	Auto commit/push every hour (auto_push.py)
Static Site	No server-side code → Minimized attack surface
Comment System	GitHub OAuth-based authentication (Giscus)

---

📁 Project Structure

uoosnn.github.io/          ← Blog (VitePress)
├── .vitepress/
│   ├── config.mjs          ← Site config, sidebar, RSS, Sitemap
│   └── theme/
│       ├── custom.css       ← 6:3:1 color theme
│       ├── index.mjs        ← Giscus layout extension
│       └── components/
│           └── GiscusComment.vue  ← Comment component
├── blog/                   ← Original Korean posts
├── en/blog/                ← English translations
├── ja/blog/                ← Japanese translations
├── resume.md               ← Resume (multilingual)
└── .github/workflows/
    └── deploy.yml           ← CI/CD pipeline

telegram_bot/               ← Telegram bot
├── bot_main.py             ← Main entrypoint
├── ai_processor.py         ← Gemini AI processing
├── github_uploader.py      ← Git upload
├── news_scraper.py         ← News scraping
└── auto_push.py            ← Auto commit/push

---

This blog is a fully automated, serverless system. A conversation on Telegram becomes a blog post, which is then translated by AI and deployed by GitHub Actions.

---

Posted: 2026-08-15 13:57:00Updated: 2026-08-15 13:57:00