Running Page 手把手部署教程3 分钟拥有自己的跑步数据展示网页【免费下载链接】running_pageMake your own running home page项目地址: https://gitcode.com/gh_mirrors/ru/running_pageRunning Page 是一款开源的跑步数据展示网页工具它把你从 Strava、Garmin、Nike 等 App 里跑过的每一步自动同步成地图轨迹、里程统计和年度回顾配置好后一键部署就是一个能直接发给朋友看的个人跑步主页。一、它解决什么问题 先说三个你可能经历过的场景数据散落在各个 App 里。你的跑步记录一部分在 Nike Run Club一部分在 Strava手表数据又躺在 Garmin 的后台。想翻一条去年冬天的配速要在手机上点七八次。各家 App 只管帮你记录没人帮你做汇总。想晒成果却做不出页面。你希望跑友、家人打开一个链接就能看到你这一年在地图上跑过的路线、总里程和每月的进步。可你不是前端开发从零写页面基本没戏九宫格截图甩给对方又显得太随意。想回头看看拼不出全貌。一年结束你想知道自己跑过哪些城市、最远的一次跑在哪条路上但这些零散记录散在不同平台里没有任何一张完整的全景图。Running Page 就是为此做的它从你常用的跑步平台拉取数据把每次跑步画到地图上汇总成里程、时长、年度回顾等统计视图最终变成一个可以公开访问的网页。二、3 分钟跑起来从零到页面的完整流程第 1 步准备克隆项目并安装依赖需要 Node 20 和 Python 3git clone https://gitcode.com/gh_mirrors/ru/running_page.git cd running_pagepip3 install -r requirements.txt pnpm install第 2 步接入数据源把根目录的config-example.yaml复制成config.yaml填入数据源的账号信息Strava 填 client_id、client_secret 和 refresh_tokenGarmin 填邮箱和密码。不同数据源的具体写法下一节有对比。第 3 步配置与本地预览pnpm develop打开浏览器访问 localhost:5173就能看到地图、路线回放和各项统计。顺手打开 site-metadata.ts把网站标题、logo、导航链接改成你自己的——这就是你页面的门面。第 4 步构建并上线pnpm build把构建产物部署到 GitHub Pages 或 Vercel 等静态托管服务页面就上线了。之后开启项目自带的 Actions 同步任务它会每天定时拉取新的跑步数据并自动更新页面全程不用你手动操作。三、数据源怎么选Strava / Garmin / Nike 对比数据源接入方式上手难度数据特点StravaOAuth token低海拔、分段等信息最全配置最省事Garmin含佳明中国账号 密码中手表数据完整佳明中国需额外配置 CN 域名Nike Run Clubrefresh_token中官方 API 不开放依赖社区同步脚本一句话建议日常跑步用得最多的那个 App就优先配置哪一个多个数据源也可以同时接历史数据会汇进同一个数据库换 App 也不丢。四、进阶玩法与避坑指南✅ 推荐这么做开启自动每日同步。页面上线后启用项目自带的 CI 同步任务新跑的每一次都会自动出现在网页上。自定义页面。标题和导航改src/static/site-metadata.ts是否显示海拔等字段改src/utils/const.ts风格随心。用默认免费地图服务。零配置、不用申请 token开箱即用。备份原始轨迹。同步时会导出 GPX/TCX 文件将来迁移到其他跑步软件数据都在手上。⚠️ 常见踩坑Token 过期是头号杀手。Strava、Nike 的凭证会失效失效后同步会静默失败。页面好久不更新先去查同步日志。Garmin 国内用户要设 CN 域名。config.yaml里authentication_domain改成CN并先跑 get_garmin_secret.py 拿到 secret 字符串否则登录失败。别用别人的地图 token。需要切换付费地图服务时务必换成自己的 token沿用项目里的会撞配额地图直接白屏。部署到 Vercel 出现 404。多半是代码不是最新版先拉取最新代码再部署详见 中文文档 开头的 Note。写在最后Running Page 把散落在各个 App 里的跑步记录变成一个带地图、统计和年度回顾的跑步数据可视化网页。它适合想沉淀数据的跑者、不想写代码的想晒党以及想把运动成果挂上个人博客的站长。现在就去克隆仓库吧10 分钟后你的跑步主页就上线了。【免费下载链接】running_pageMake your own running home page项目地址: https://gitcode.com/gh_mirrors/ru/running_page创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考