geo-blog

KO | EN

gitlite — search

#python #react #typescript #llm #go #android #rust #docker #windows #awesome #cli #vue #security #pytorch

(★ 13)

map and blog

geo-blog 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🌏 Geo-Blog

> 将地理足迹、摄影相册与 AI 旅行规划深度融合的个人主页。记录走过的路，思考的痕迹，以及下一段旅程。

---

## ✨ 项目初衷

**好玩。**

本项目是 **Vibe Coding** 的产物——在 **Claude** 与 **Gemini** 的深度协助下完成，没有从零手写每一行代码，但每一个功能都经过认真打磨。

---

## 🛠️ 核心架构

| 层级 | 技术栈 | 说明 |
| --- | --- | --- |
| 🎨 前端 | React 19 + Vite + Tailwind CSS v4 | 响应式 SPA，深色玻璃态 UI |
| ⚙️ 后端 | Node.js + Express + TypeScript | 轻量 REST API + SSE 流式推送 |
| 🗺️ 地图引擎 | Mapbox GL JS | 3D 球体渲染、自定义标注与路线动画 |
| 🧠 笔记引擎 | [Quartz 4](https://github.com/jackyzha0/quartz) | Markdown 驱动的个人知识库 |
| 🤖 AI 引擎 | OpenAI-compatible API | 流式旅行规划，实时地图预览 |
| ☁️ 图片存储 | Cloudflare R2 + Images | S3 兼容对象存储，全球加速 CDN |
| 🐳 部署 | Nginx + Podman / Docker | 容器化编排，一键启动 |

---

## 📂 项目结构

```text
geo-blog/
├── api/                        # 后端服务
│   ├── server.ts               # 核心逻辑：足迹、配置、R2 上传、AI 规划流
│   └── Dockerfile
├── frontend/                   # 前端应用
│   ├── src/
│   │   ├── components/
│   │   │   ├── MapContainer.tsx        # Mapbox 地图，标注 + 路线层
│   │   │   ├── AutoCruise.tsx          # 航线巡游控制面板
│   │   │   ├── TravelPlannerPanel.tsx  # AI 旅行规划对话面板
│   │   │   ├── NextDestination.tsx     # 下一目的地倒计时组件
│   │   │   ├── NotesSection.tsx        # 笔记入口
│   │   │   └── AdminPage.tsx           # 后台管理
│   │   └── lib/
│   │       └── auth.ts                 # JWT 鉴权工具
│   └── Dockerfile.frontend
├── nginx/
│   ├── nginx.conf              # 反向代理：API / 前端 / Quartz 笔记
│   └── start.sh                # 动态注入 DNS resolver
├── data/                       # 轻量级数据层（JSON）
│   ├── locations.json          # 足迹坐标与元数据
│   └── app-config.json         # 全局配置（下一目的地等）
├── docker-compose.yml
├── .env.example
└── start.sh                    # 一键启动入口
```

---

## ✈️ 功能一览

### 🗺️ 地理足迹地图

- Mapbox GL 3D 球体，深色主题，自定义蓝色标注
- 点击标注弹出相册卡片，支持多图浏览
- 后台可添加、删除足迹，图片上传至 Cloudflare R2

### 🛫 Auto Cruise 航线巡游

以上帝视角自动飞越所有足迹点，附沉浸式地点卡片展示。

- 按时间顺序自动规划飞行路线
- 飞行过程中绘制实时轨迹线与飞机图标
- 支持暂停 / 继续 / 跳转 / 折叠控制面板
- 抵达每个地点后展示照片卡片，5 秒自停
- 预加载下一站图片，保证过渡流畅

### 🤖 AI 旅行规划

输入旅行需求，AI 实时生成行程并同步在地图上渲染路线预览。

- 流式输出，边生成边渲染，地点标注实时出现在地图上
- 结构化输出：概览卡片 / 逐日行程 / 路线点 / 实用 Tips
- 信息不完整时，AI 主动以问题卡片引导补充（目的地、天数、预算、兴趣）
- 支持多轮对话修改行程
- 可接入任意 OpenAI-compatible 接口（自定义 base URL、model、key）

### 📝 数字花园

- 通过 Quartz 4 渲染 Markdown 笔记为知识图谱网页
- 由 Nginx 无缝挂载至 `/notes/` 路径，保持统一域名

---

## 🚀 快速开始

### 1. 准备外部服务

| 服务 | 用途 | 获取方式 |
| --- | --- | --- |
| Mapbox Access Token | 地图渲染 | [mapbox.com](https://www.mapbox.com/) |
| Cloudflare R2 | 图片存储 | [dash.cloudflare.com](https://dash.cloudflare.com/) |
| AI API | 旅行规划 | 任意 OpenAI-compatible 接口 |
| Quartz 容器 | 笔记渲染 | [quartz.jzhao.xyz](https://quartz.jzhao.xyz/) |

### 2. 配置环境变量

在项目根目录复制并编辑 `.env`：

```bash
cp .env.example .env
```

```env
# ── 地图 ────────────────────────────────────────────
VITE_MAPBOX_ACCESS_TOKEN=your_mapbox_token

# ── 管理员鉴权 ───────────────────────────────────────
JWT_SECRET=a_long_random_secret_string
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your_strong_password

# ── Cloudflare R2 图片存储 ────────────────────────────
R2_ACCOUNT_ID=your_account_id
R2_ACCESS_KEY=your_access_key
R2_SECRET_KEY=your_secret_key
R2_BUCKET=your_bucket_name
R2_PUBLIC_URL=https://your-custom-domain.com

# ── AI 旅行规划 ──────────────────────────────────────
AI_API_KEY=your_api_key
AI_BASE_URL=https://api.openai.com   # 或任意兼容接口
AI_MODEL=gpt-4o
#可选择性填写

# ── 应用 ─────────────────────────────────────────────
APP_URL=http://localhost
```

### 3. 启动

确保已安装 Docker 或 Podman，以及 npm。

```bash
# 克隆项目
git clone https://github.com/syyyclover/geo-blog.git
cd geo-blog
# 一键启动主服务
sh start.sh
```

**启动后访问：**

| 服务 | 地址 |
| --- | --- |
| 🏠 主页 | `http://localhost` |
| ⚙️ 管理后台 | `http://localhost/login` |
| 📝 笔记 | `http://localhost/notes/` |

---

## 🔧 开发模式

```bash
# 后端
cd api && npm install && npm run dev

# 前端（新终端）
cd frontend && npm install && npm run dev
```

前端开发服务器默认代理 `/api` 至 `localhost:3001`。

---

## 🤝 致谢

- [Jacky Zhao](https://github.com/jackyzha0) — 创造了优秀的 Quartz 笔记系统
- [Mapbox](https://www.mapbox.com/) — 专业级地理空间渲染引擎
- **Claude & Gemini** — 新时代最好的编程伙伴

---

> 这是我 GitHub 生涯的第一个开源项目。如果对你有帮助，欢迎点个 ⭐ Star！

geo-blog

geo-blog 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

geo-blog

geo-blog 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README