walnut-a · walnut-a · May 7, 2026 · May 7, 2026 · May 7, 2026 · May 7, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,10 @@
 node_modules/
+dist/
+site/dist/
+site/node_modules/
 *.tgz
 .env
 .env.*
+!.env.example
+!site/.env.example
 .npmrc
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 FileBox 是一个 macOS 本地文件快捷访问工具，适合快速打开常用目录、整理下载文件、使用快捷窗口处理临时文件，并通过文件动态关注重点目录里的变化。
 
-这个公开仓库用于发布 FileBox 安装包、维护公开文档、托管 Agent Skill 和 npm 安装器。FileBox App 主体源码不在这个仓库中。
+这个公开仓库用于发布 FileBox 安装包、维护公开官网、公开文档、Agent Skill 和 npm 安装器。FileBox App 主体源码不在这个仓库中。
+
+官网地址：[getfilebox.app](https://getfilebox.app)
 
 ## 下载与安装
 
@@ -19,6 +21,7 @@ FileBox 完全在本地运行。它提供快捷访问、文件动态和路径查
 | 内容 | 说明 |
 | --- | --- |
 | [Releases](https://github.com/walnut-a/FileBox-Public/releases) | FileBox 正式安装包 |
+| [`site`](./site) | getfilebox.app 官网源码 |
 | [`docs/agent-cli-and-skill.md`](./docs/agent-cli-and-skill.md) | FileBox CLI 与 Agent Skill 使用说明 |
 | [`skills/filebox-activity`](./skills/filebox-activity) | 面向 Agent 的 FileBox Activity Skill |
 | [`bin/filebox-agent-skill.js`](./bin/filebox-agent-skill.js) | Skill 安装命令入口 |
@@ -96,6 +99,12 @@ npm run check:release
 
 本地配置 `.githooks/pre-push` 后，执行 `git push` 前会自动运行同一套检查。
 
+官网本地构建：
+
+```bash
+npm run site:build
+```
+
 ## 许可说明
 
 Agent Skill 和 npm 安装器按 [`package.json`](./package.json) 中声明的 MIT license 发布。FileBox App 主体源码不在这个公开仓库中。
diff --git a/images/filebox-main-window-hero-20260509.png b/images/filebox-main-window-hero-20260509.png
diff --git a/package.json b/package.json
@@ -13,6 +13,9 @@
     "README.md"
   ],
   "scripts": {
+    "site:dev": "npm --prefix site run dev",
+    "site:build": "npm --prefix site run build",
+    "site:preview": "npm --prefix site run preview",
     "test": "node --test test/*.test.js",
     "check:secrets": "./scripts/check_no_secrets.sh",
     "check:package": "./scripts/check_npm_package_no_secrets.sh",

diff --git a/site/.env.example b/site/.env.example
@@ -0,0 +1 @@
+CLOUDFLARE_WEB_ANALYTICS_TOKEN=
diff --git a/site/README.md b/site/README.md
@@ -0,0 +1,104 @@
+# getfilebox.app
+
+这是 FileBox 的公开官网，部署到 Cloudflare Pages，域名为 `getfilebox.app`。
+
+## 本地开发
+
+```bash
+npm install
+npm run dev
+```
+
+## 构建
+
+```bash
+npm run build
+```
+
+Cloudflare Pages 输出目录为 `dist`，配置见 [`wrangler.toml`](./wrangler.toml)。
+
+## Cloudflare 部署
+
+Pages 项目名为 `getfilebox-app`，生产分支为 `main`。
+
+手动部署：
+
+```bash
+npm run build
+npx wrangler pages deploy dist --project-name getfilebox-app --branch main
+```
+
+自定义域名需要在 Cloudflare Pages 的 Custom Domains 中添加 `getfilebox.app`，并在 `getfilebox.app` 这个 zone 里配置 DNS：
+
+| 类型 | 名称 | 目标 | 代理 |
+| --- | --- | --- | --- |
+| CNAME | `@` | `getfilebox-app.pages.dev` | 开启 |
+
+验证：
+
+```bash
+curl -I https://getfilebox-app.pages.dev
+curl -I https://getfilebox.app
+```
+
+## 流量来源分析接入说明
+
+本站只接入 Cloudflare Web Analytics，不接入 Google Analytics、Umami 或 Plausible。
+
+### Cloudflare Web Analytics
+
+`getfilebox.app` 当前已在 Cloudflare Web Analytics 开启自动设置，线上自定义域名会由 Cloudflare 自动注入官方 beacon script，不需要在每次构建产物里写入 token。
+
+代码侧也预留了手动 JS snippet 方案。如果以后在 Cloudflare 后台改为手动安装，或希望 Pages 构建产物自带官方 beacon script，可以把 token 配成环境变量。
+
+Cloudflare Web Analytics token 在 Cloudflare Dashboard 的 Web Analytics 里创建或管理站点时获取：
+
+1. 进入 Cloudflare Dashboard → Web Analytics。
+2. 添加 `getfilebox.app`，或打开已有站点的 Manage site。
+3. 复制官方 JS snippet 里的 `data-cf-beacon` token。
+4. 如需手动注入，在 Cloudflare Pages 项目 `getfilebox-app` 的环境变量中配置：
+
+```bash
+CLOUDFLARE_WEB_ANALYTICS_TOKEN=你的 Cloudflare Web Analytics token
+```
+
+本项目是 Vite + React 单页应用，入口在 `site/index.html`。如果配置了 `CLOUDFLARE_WEB_ANALYTICS_TOKEN`，构建时会通过 `site/vite.config.ts` 把官方 beacon script 注入全局 `<head>`，不会在每个页面重复插入。Cloudflare Web Analytics 会自动追踪基于 History API 的 SPA 路由变化；当前站点没有额外路由埋点。
+
+本地验证可以临时带 token 构建：
+
+```bash
+CLOUDFLARE_WEB_ANALYTICS_TOKEN=test-token npm run build
+rg "static.cloudflareinsights.com|test-token" dist/index.html
+```
+
+### Google Search Console
+
+Search Console 推荐使用 Domain property + DNS TXT 验证，不依赖网站代码，也不会因为前端改版丢失验证。
+
+操作建议：
+
+1. 在 Google Search Console 添加 Domain property：`getfilebox.app`。
+2. 选择 DNS TXT 验证。
+3. 把 Google 提供的 `google-site-verification=...` TXT 记录添加到 Cloudflare DNS。
+4. 等 DNS 生效后回到 Search Console 点击 Verify。
+
+只有在 DNS TXT 不可用时，才考虑 HTML meta tag 验证；如果使用 meta tag，应加到 `site/index.html` 的全局 `<head>`。
+
+### UTM 分享规范
+
+以后对外发链接时建议带 UTM，方便在 Cloudflare Web Analytics 里按来源判断访问大概从哪里来。
+
+示例：
+
+```text
+https://getfilebox.app/?utm_source=x&utm_medium=social&utm_campaign=site_share
+https://getfilebox.app/?utm_source=github&utm_medium=profile&utm_campaign=homepage
+https://getfilebox.app/?utm_source=wechat&utm_medium=share&utm_campaign=article
+```
+
+## 设计方向
+
+- 目标用户：需要快速访问常用目录、整理下载文件、关注文件动态，并把路径交给 Agent 的 Mac 用户。
+- 品牌感觉：安静、温暖、可靠。
+- 视觉方向：以 FileBox 纸盒图标的暖色和 macOS 原生窗口感为基础，保持克制留白和真实产品截图。
+- 技术边界：官网只承载公开信息，不包含 FileBox App 私有源码。
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="FileBox 是一个 macOS 本地文件快捷访问工具，帮助你快速打开常用目录、查看文件动态，并通过 CLI 把文件路径交给 Agent。"
+    />
+    <meta name="theme-color" content="#f4ede3" />
+    <meta property="og:title" content="FileBox - A quieter file workspace for Mac" />
+    <meta
+      property="og:description"
+      content="常用目录、快捷窗口、文件动态和只读 CLI，全部留在本地。"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://getfilebox.app/" />
+    <link rel="canonical" href="https://getfilebox.app/" />
+    <link rel="icon" href="/images/filebox-app-icon-20260425.png" type="image/png" />
+    <link rel="apple-touch-icon" href="/images/filebox-app-icon-20260425.png" />
+    <title>FileBox - A quieter file workspace for Mac</title>
+    <!-- cloudflare-web-analytics -->
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>