password
URL
type
status
date
slug
summary
tags
category
icon
周起始
标签
是否汉化
看得清是知,做得到是行 → 知行合一
爱跑步小伙伴的福音,个人主页构建,喜欢折腾的小伙伴看过来👀
个人跑步主页 ⬇️
感谢大佬 @yihong0618
以下是基本的搭建步骤,以keep数据为例,其他平台数据及配置详情参见
搭建步骤
1. Fork以下项目
running_page
yihong0618 • Updated Jan 12, 2024
2. 环境配置
- 将自己github下的项目clone到本地
- 安装及测试 (node >= 16 python >= 3.8)
- 访问 http://localhost:5173/ 查看
3. 个性化设置
在仓库目录下找到src/static/site-metadata.ts
,找到以下内容并修改成你自己想要的。
4. 下载数据到本地
keep用户占比大,以keep举例,下载您的 Keep 数据到本地,别忘了在 total 页面生成可视化 SVG
- Keep
- 获取 Keep 数据
示例
- 路线偏移修正
增加了 keep 可以导出 gpx 功能(因 keep 的原因,距离和速度会有一定缺失), 执行如下命令,导出的 gpx 会加入到 GPX_OUT 中,方便上传到其它软件
- Total Data Analysis
- 生成数据展示 默认是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 部署
- vercel 连接你的 GitHub repo
- import repo
- 等待部署完毕
- 访问
部署到 GitHub Pages
- 进入仓库的 "Settings -> GitHub Pages -> Source",选择 "GitHub Actions"
- 进入仓库的 "Actions -> Workflows -> All Workflows",选择左侧面板的 "Run Data Sync",然后点击 "Run workflow"
- "Run Data Sync" 将更新数据,然后触发 "Publish GitHub Pages" 工作流
- 确认工作流运行没有错误
- 打开网站检查结果
- 如果网站没有反映最新数据,请使用“F5”刷新页面
- 某些浏览器 (比如 Chrome) 可能缓存网页不刷新,您需要使用 Ctrl+F5 (Windows) 或 Shift+Cmd+r (Mac) 强制清除缓存并重新加载页面
- 为 GitHub Actions 添加代码提交权限,访问仓库的
Settings > Actions > General
页面,找到Workflow permissions
的设置项,将选项配置为Read and write permissions
,支持 CI 将运动数据更新后提交到仓库中。
- 如果想把你的 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 中
- Name: Alan Hsu
- Tag: 随感、技术、经验、旅行、推荐、生活、音乐、电影 etc.
- Email:xulanzhong521gmail.com
- Twitter:@AlanHsu521
- Telegram:@AlanHsu521
- WeChat: Alan_Hsu_521
- Github: https://github.com/xsoway/
run_data_sync.yml
中的 SAVE_DATA_IN_GITHUB_CACHE
设置为 true
时,可以把脚本抓取和中间产生的数据文件放到 GitHub Actions Cache 中。这样可以让你的 GitHub commit 历史和目录保持干净。如果你用
GitHub Pages
部署建议把这个值设置成 true
。离开乏味的皮囊,自由的灵魂在路上
- Author:Alan_Hsu
- URL:https://xmylog.com/article/articles_running_page
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!