个人跑步主页 ⬇️

Running Page

https://run.xmylog.com/

感谢大佬 @yihong0618

以下是基本的搭建步骤,以keep数据为例,其他平台数据及配置详情参见

搭建步骤

1. Fork以下项目

2. 环境配置

• 将自己github下的项目clone到本地

• 安装及测试 (node >= 16 python >= 3.8)

• 访问 http://localhost:5173/ 查看

3. 个性化设置

在仓库目录下找到 src/static/site-metadata.ts，找到以下内容并修改成你自己想要的。

4. 下载数据到本地

keep用户占比大,以keep举例,下载您的 Keep 数据到本地，别忘了在 total 页面生成可视化 SVG

• Keep

1. 获取 Keep 数据
示例

1. 路线偏移修正
增加了 keep 可以导出 gpx 功能（因 keep 的原因，距离和速度会有一定缺失）, 执行如下命令，导出的 gpx 会加入到 GPX_OUT 中，方便上传到其它软件

• Total Data Analysis

1. 生成数据展示 默认是10公里 可自行修改
special-distance 10 --special-distance2 20
筛选10km 其中20km以上黄色显示



--min-distance 10.0 --special-distance 20 --special-distance2 40
默认10km蓝色,20km黄色,40km红色

5. 提交代码至自己github

6. server部署(两种部署方式,任选其一)

使用 Vercel 部署

1. vercel 连接你的 GitHub repo

1. import repo

1. 等待部署完毕

2. 访问

部署到 GitHub Pages

1. 进入仓库的 "Settings -> GitHub Pages -> Source"，选择 "GitHub Actions"

2. 进入仓库的 "Actions -> Workflows -> All Workflows"，选择左侧面板的 "Run Data Sync"，然后点击 "Run workflow"

• "Run Data Sync" 将更新数据，然后触发 "Publish GitHub Pages" 工作流

• 确认工作流运行没有错误

1. 打开网站检查结果

• 如果网站没有反映最新数据，请使用“F5”刷新页面

• 某些浏览器 (比如 Chrome) 可能缓存网页不刷新，您需要使用 Ctrl+F5 (Windows) 或 Shift+Cmd+r (Mac) 强制清除缓存并重新加载页面

1. 为 GitHub Actions 添加代码提交权限，访问仓库的 Settings > Actions > General页面，找到 Workflow permissions 的设置项，将选项配置为 Read and write permissions，支持 CI 将运动数据更新后提交到仓库中。

2. 如果想把你的 running_page 部署在 xxx.github.io 而不是 xxx.github.io/run_page，需要做三点

• 修改你的 fork 的 running_page 仓库改名为 xxx.github.io, xxx 是你 github 的 username

• 修改 gh-pages.yml 中的 Build 模块，删除 ${{ github.event.repository.name }} 改为run: PATH_PREFIX=/ pnpm build 即可

• src/static/site-metadata.ts 中 siteUrl: '' 即可

7. 定时任务 GitHub Actions

• 修改 GitHub Actions Token
文件:.github/workflows/run_data_sync.yml
将RUN_TYPE 改为 keep

• 在 repo Settings > Secrets 中增加你的 secret
KEEP_MOBILE 手机号
KEEP_PASSWORD 密码

• 然后手动执行 action

8. Github Cache

• 把数据文件放在 GitHub Cache 中
run_data_sync.yml 中的 SAVE_DATA_IN_GITHUB_CACHE 设置为 true 时，可以把脚本抓取和中间产生的数据文件放到 GitHub Actions Cache 中。这样可以让你的 GitHub commit 历史和目录保持干净。
如果你用 GitHub Pages 部署建议把这个值设置成 true。
 

---

🎒
离开乏味的皮囊，自由的灵魂在路上
• Name: Alan Hsu
• Tag: 随感、技术、经验、旅行、推荐、生活、音乐、电影 etc.
• Email：xulanzhong521gmail.com
• Twitter：@AlanHsu521
• Telegram：@AlanHsu521
• WeChat: Alan_Hsu_521
• Github: https://github.com/xsoway/
• Blog: https://xmylog.com