打造个人跑步主页—— Running Page 实战指南
从开始有数据记录算起，断断续续跑步已经 9 年了。我自己也没想到，居然能坚持这么久，跑了这么远。看着 Keep 里一条条不断累积的跑步记录，总会冒出一个念头： 能不能把这些零散的数据，整理成一个真正属于自己的跑步主页？
好在强大的 GitHub 早就有大佬帮我们铺好了路—— 一个几乎开箱即用的解决方案：Running Page。这篇文章就记录一下我折腾 Running Page，打造个人跑步主页的全过程，希望能对你有所帮助。
Running Page 是什么？
Running Page 是一个开源项目，可以自动从 Garmin、Strava、Nike Run Club、Keep 等主流运动平台拉取数据，并通过可视化的方式，生成一个静态跑步网站。
它的核心特点包括：
- 🏃 支持多种主流运动平台数据同步
- 📊 丰富的数据统计与交互式跑步轨迹地图
- 🔁 借助 GitHub Actions 实现数据与页面自动更新
- 🌍 可部署到 GitHub Pages、Cloudflare Pages 或自建服务器
如果你也长期跑步，又想拥有一个「只属于自己」的跑步主页，Running Page 几乎是目前最省事的选择。
配置 Running Page
Fork 仓库
你可以直接 fork 原作者 yihong0618 的仓库，也可以选择其他已经二次美化过的版本。我这里使用的是 arthurfsy2 的仓库，他对页面样式做了一些修改，整体观感我很喜欢。
修改个人配置
Fork 完成后，将仓库拉到本地，需要做一些属于你自己的定制。
清理原始数据
arthurfsy2 的仓库中包含了他本人的运动数据，第一步需要把这些内容清理掉。下面是我清理文件时的提交截图：
具体需要处理的地方如下：
assets目录中，仅保留start.svg、end.svg和index.tsx- 删除
FIT_OUT和GPX_OUT目录下的所有运动数据文件 run_page目录中删除data.db和data.parquetsrc/static目录中删除activities.json
这样可以确保后续生成的数据完全来自你自己的运动记录。
run_data_sync.yml
run_data_sync.yml 用于配置运动数据的同步方式，需要根据自己的情况修改其中的参数：
RUN_TYPE：数据来源平台，我使用的是佳明国行设备，这里配置为garmin_cnATHLETE：运动员名称，随意填写TITLE：页面标题MIN_GRID_DISTANCE：生成轨迹网格的最小距离，我设置为10TITLE_GRID：轨迹图标题SAVE_DATA_IN_GITHUB_CACHE：是否将运动数据缓存到 GitHub（建议开启）BIRTHDAY_MONTH：你的生日月份
示例如下：
site-metadata.ts
site-metadata.ts 用来配置网站的基础元信息，主要关注以下几个字段即可：
siteTitle：网站标题siteUrl：网站地址（使用自定义域名时填写）logo：网站 Logo，我这里直接使用图床里的图片navLinks：导航栏链接
这些配置都比较直观，按需修改即可：
const.ts
const.ts 中定义了一些常量，默认会将 Mapbox 相关的 token 明文写在代码里。我这里做了一点小改动，改为从环境变量中读取，避免敏感信息直接暴露在仓库中：
const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN;
export const MAP_TILE_ACCESS_TOKEN = import.meta.env.VITE_MAP_TILE_ACCESS_TOKEN;gh-pages.yml
gh-pages.yml 用于构建并发布 GitHub Pages。因为前面调整了 const.ts，这里需要在构建阶段把对应的环境变量传入。同时，我使用了自定义域名，所以需要将 PATH_PREFIX 设置为 /：
其中：
${{ vars.VITE_MAPBOX_TOKEN }}${{ vars.VITE_MAP_TILE_ACCESS_TOKEN }}
需要提前在 GitHub 仓库中配置，下面会详细说明。
提交修改
完成以上配置后，将修改提交并推送到 GitHub 仓库。
配置 GitHub 仓库
佳明密钥
GitHub Actions 在同步运动数据时，需要用到佳明的登录密钥。Running Page 已经提供了获取密钥的脚本：
python run_page/get_garmin_secret.py your_email your_password --is-cn获取到密钥后，在仓库中进行配置。进入 Settings → Secrets and variables → Actions → New repository secret，将密钥添加进去：
环境变量
前面提到过，gh-pages.yml 构建时需要用到两个环境变量：
VITE_MAPBOX_TOKENVITE_MAP_TILE_ACCESS_TOKEN
由于 GitHub Pages 使用的是 github-pages 环境，建议先创建该环境，点击 Settings → Environments → New environment
进入环境配置页面后，拉到最底部，点击 Add environment variable，将上述两个变量填入你自己的值：
自定义域名
如果你希望使用自定义域名，可以在Settings → Pages → Custom domain中进行配置：
运行 GitHub Actions 工作流
到这里，所有配置基本已经完成了。接下来可以手动运行一次 GitHub Actions，验证整个流程是否正常：
- 进入 Actions → Run Data Sync
- 如果工作流是禁用状态，点击右上角的三个点，选择 Enable workflow
- 手动触发工作流执行
第一次同步数据通常会比较耗时，耐心等它跑完即可。当工作流全部执行成功后，访问你的 GitHub Pages 或自定义域名，一个完全属于你的跑步主页就正式上线了。
如果你也跑了很多年，却一直让数据躺在各个平台里，不妨试试 Running Page。