# 🧭 City Wander Map — 上線部署說明

## 檔案結構

```
city-wander/
├── index.html        ← 主網站
├── manifest.json     ← PWA 設定
├── netlify.toml      ← Netlify 部署設定 + HTTP headers
├── robots.txt        ← SEO 爬蟲設定
├── sitemap.xml       ← SEO 網站地圖
├── icons/            ← 請自行放入以下圖檔
│   ├── icon-192.png  （192×192px，App 圖示）
│   └── icon-512.png  （512×512px，App 圖示）
└── og-image.jpg      ← 請自行放入 1200×630px 社群預覽圖
```

---

## Step 1 — 取得 Mapbox Token

1. 前往 https://account.mapbox.com/ 免費註冊
2. 建立一個 Access Token（Public Token 即可）
3. 打開 `index.html`，找到這行：
   ```js
   const MAPBOX_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
   ```
4. 替換為你的 token，例如：
   ```js
   const MAPBOX_TOKEN = 'pk.eyJ1IjoieW91cnVzZXIiLCJhIjoiY...';
   ```

---

## Step 2 — 設定 Google Analytics

1. 前往 https://analytics.google.com/ 建立 GA4 資源
2. 取得 Measurement ID（格式：G-XXXXXXXXXX）
3. 打開 `index.html`，找到所有 `G-XXXXXXXXXX`（共 2 處），替換為你的 ID：
   ```html
   <script async src="...gtag/js?id=G-你的ID"></script>
   ...
   gtag('config', 'G-你的ID', ...);
   ```

---

## Step 3 — 替換網域

全域搜尋 `YOUR_DOMAIN.com`，替換為你的實際網域，涉及：
- `index.html` 內的 canonical、og:url、og:image、twitter:image
- `robots.txt` 內的 Sitemap URL
- `sitemap.xml` 內的 URL

---

## Step 4 — 上線（Netlify，最快 5 分鐘）

### 方法 A：拖曳上傳（最快，不需帳號）
1. 前往 https://app.netlify.com/drop
2. 將整個 `city-wander/` 資料夾拖入瀏覽器視窗
3. 等待部署完成，取得 `.netlify.app` 網址

### 方法 B：連結 GitHub（推薦，支援自動部署）
```bash
# 1. 初始化 git
cd city-wander
git init
git add .
git commit -m "init: city wander map"

# 2. 推上 GitHub（先在 github.com 建立 repo）
git remote add origin https://github.com/你的帳號/city-wander.git
git push -u origin main

# 3. 在 Netlify 點 "Import from Git"，選擇該 repo
# 4. Build command: 留空（純靜態）
# 5. Publish directory: . 或留空
```

### 綁定自訂網域
1. 在 Netlify → Domain settings → Add custom domain
2. 在你的 DNS 供應商新增 CNAME 紀錄指向 Netlify

---

## Step 5 — 製作 App 圖示（可選）

若要讓網站可加到手機主畫面（PWA），需放入：
- `icons/icon-192.png`：192×192px
- `icons/icon-512.png`：512×512px

可用 https://favicon.io/ 或 https://realfavicongenerator.net/ 快速生成。

---

## 上線後確認清單

- [ ] 開啟網站，地圖正常顯示（需 Mapbox token）
- [ ] GA4 Realtime 有流量進來
- [ ] 手機版排版正常
- [ ] 社群分享預覽圖（og:image）正確顯示
- [ ] HTTPS 憑證已啟用（Netlify 自動處理）
- [ ] 手機加到主畫面測試 PWA

---

## 後續開發方向

| 功能 | 建議工具 |
|------|---------|
| 使用者上傳紀錄 | Supabase（免費方案） |
| 後台管理任務 | Notion API 或 Contentful |
| 推播通知 | OneSignal |
| 地圖即時協作 | Mapbox + Supabase Realtime |
| Email 收集名單 | Mailchimp embed 或 Formspree |

---

有任何問題，隨時回來問 Claude。🧭