password
URL
type
status
date
slug
summary
tags
category
icon
周起始
标签
是否汉化
看得清是知,做得到是行 → 知行合一
爱跑步小伙伴的福音,个人主页构建,喜欢折腾的小伙伴看过来👀
个人跑步主页 ⬇️
感谢大佬 @yihong0618
以下是基本的搭建步骤,以keep数据为例,其他平台数据及配置详情参见
搭建步骤
1. Fork以下项目
running_page
yihong0618 • Updated Jan 12, 2024
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2F86575857-dc09-4089-a85b-77878b5eb067%2FUntitled.png?table=block&id=a4eab7ef-6732-45a7-a28b-f2831c778cf5&t=a4eab7ef-6732-45a7-a28b-f2831c778cf5&width=2576&cache=v2)
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以上黄色显示
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2Fedbfc3bb-d812-4f0f-8faf-4c9f2514cb4d%2FUntitled.png?table=block&id=0083f7d6-2042-49e2-86e9-2d8d77c931c7&t=0083f7d6-2042-49e2-86e9-2d8d77c931c7&width=1506&cache=v2)
--min-distance 10.0 --special-distance 20 --special-distance2 40
默认10km蓝色,20km黄色,40km红色
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2F3e1c4811-36df-4e73-ae12-ff08813b54a7%2FUntitled.png?table=block&id=c9dd058c-b918-4dff-93d0-fa8373b6ea3c&t=c9dd058c-b918-4dff-93d0-fa8373b6ea3c&width=1500&cache=v2)
5. 提交代码至自己github
6. server部署(两种部署方式,任选其一)
使用 Vercel 部署
- vercel 连接你的 GitHub repo
![notion image](https://user-images.githubusercontent.com/15976103/94452465-2599b880-01e2-11eb-9538-582f0f46c421.png?t=9c42c5ad-6f8c-4004-b291-6a0b26744665)
- import repo
![notion image](https://user-images.githubusercontent.com/15976103/94452556-3f3b0000-01e2-11eb-97a2-3789c2d60766.png?t=5e035f55-0ce3-4263-8994-123d87a7cfc1)
- 等待部署完毕
- 访问
部署到 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
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2F7ae393b1-fcc7-4e3e-b934-baa2186b3d29%2FUntitled.png?table=block&id=30393d34-c9fc-4a9e-a7e3-4eae22def810&t=30393d34-c9fc-4a9e-a7e3-4eae22def810&width=1462&cache=v2)
- 在
repo Settings
>Secrets
中增加你的 secret
KEEP_MOBILE 手机号
KEEP_PASSWORD 密码
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2Fdc3561fc-4b1a-4a78-a2bc-c27ecdcca3b7%2FUntitled.png?table=block&id=7b374809-20a3-466e-8608-1790e1cedd6f&t=7b374809-20a3-466e-8608-1790e1cedd6f&width=1950&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2F6f582860-5086-410c-9e71-4fcd15f0cd5c%2FUntitled.png?table=block&id=5ea382e2-aa88-41ef-8cb9-24352b56ba52&t=5ea382e2-aa88-41ef-8cb9-24352b56ba52&width=2686&cache=v2)
- 然后手动执行 action
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F68202bb5-9faf-4bfe-9cc4-aaf29bc1fbcc%2F06eea6b2-021b-4dbb-9e8f-e49f82931cbc%2FUntitled.png?table=block&id=d3faee17-f5c3-4d86-98a6-bf0376de8d60&t=d3faee17-f5c3-4d86-98a6-bf0376de8d60&width=1914&cache=v2)
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
。离开乏味的皮囊,自由的灵魂在路上
![notion image](https://cdn.jsdelivr.net/gh/xsoway/xmylog_imgs@main/wechat.jpeg?t=083a3055-e039-4831-958c-9019fb0c4ca9)
![notion image](https://cdn.jsdelivr.net/gh/xsoway/xmylog_imgs@main/%E5%85%AC%E4%BC%97%E5%8F%B7.jpeg?t=dc7c6161-24de-4122-ad84-71ef3a35ecdb)
- 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!
Relate Posts