搭建一个专属于自己的运动网站

2023年10月28日生活随笔

Running Page 是 @yihong0618 创立的一个开源项目，通过这个项目可以从多个主流跑步平台同步锻炼数据，自动生成一个地图可视化的跑步页面。通过 GitHub Pages 可以快速的完成自动部署。

支持以下平台设备

Strava
Nike Run Club
Garmin
Garmin-cn
Keep
悦跑圈
咕咚
GPX
TCX
Tcx+Strava(upload all tcx data to strava)
Gpx+Strava(upload all tcx data to strava)
Nike+Strava(Using NRC Run, Strava backup data)
Garmin_to_Strava(Using Garmin Run, Strava backup data)
Strava_to_Garmin(Using Strava Run, Garmin backup data)

搭建准备

这些都是老朋友了，要想快速搞，环境不能少。

开始搭建

克隆项目

git clone https://github.com/yihong0618/running_page.git

依次执行

pip3 install -r requirements.txt
yarn install
yarn develop

到最后终端显示如下即可打开http://localhost:5173/查看。

默认打开的是原作者的数据，所以我们需要来制作自己的数据。

修改代码

首先打开 .github/workflows 下的 run_data_sync.yml 文件，定位到第 22 行代码的位置。

RUN_TYPE填入你平时在用的运动 App，例如 keep，下面的 ATHLETE、TITLE、GITHUB_NAME、GITHUB_EMAIL，分别更改为自己的昵称、最终呈现在网站的热力图的标题、GitHub ID 和邮箱。

个性化设置

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

siteMetadata: {
  siteTitle: 'Running Page', #网站标题
  siteUrl: 'https://yihong.run', #网站域名
  logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #左上角 LOGO
  description: 'Personal site and blog',
  navLinks: [
    {
      name: 'Blog', #右上角导航名称
      url: 'https://yihong.run/running', #右上角导航链接
    },
    {
      name: 'About',
      url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md',
    },
  ],
},

修改 src/utils/const.ts 文件中的样式：

// styling: 关闭虚线：设置为 `false`
const USE_DASH_LINE = true;
// styling: 透明度：[0, 1]
const LINE_OPACITY = 0.4;

隐私保护：设置下面环境变量：

# 忽略每个 polyline 的起点和终点的长度（单位：米）。
IGNORE_START_END_RANGE = 200

# 忽略下面 polyline 中每个点的距离的圆圈（单位：米）。
IGNORE_RANGE = 200

# 包含要忽略的点的折线。
IGNORE_POLYLINE = ktjrFoemeU~IorGq}DeB

# 在保存到数据库之前进行过滤，你会丢失一些数据，但可以保护你的隐私，如果你使用的是公共仓库，建议设置为 1。不设置可关闭。
IGNORE_BEFORE_SAVING = 1

找到到 assets 文件夹，只保留其中的 3 个文件：start.svg、end.svg、grid.svg、index.tsx，将其余的 svg 文件删除，因为其他的文件都是原作者的，我们不需要。

到 src/static 文件夹，删除其中的 activities.json 文件.

到 run_page 文件夹，删除其中的 data.db 文件。

配置Keep

确保自己的账号能用手机号 + 密码登陆 (不要忘记添加 secret 和更改自己的账号，在 GitHub Actions 中), 注：海外手机号需要换成国内 +86 的手机号

在终端输入以下命令：

python run_page/keep_sync.py 手机号 密码

运行完成以后就会在代码文件夹中的相应位置，生成我们需要的运动数据，具体体现为文件夹中新增了两个文件，分别是 activities.json 和 data.db 文件，就是我们之前删除的。

生成数据展示

可以改下方参数 (–special-distance 10 –special-distance2 20, 10km~20km 展示为 special-color1 20km 以上展示为 special-color2, –min-distance 10.0 用来筛选 10km 以上的)

python run_page/gen_svg.py --from-db --title "${{ env.TITLE }}" --type github --athlete "${{ env.ATHLETE }}" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github.svg --use-localtime --min-distance 0.5

例如：

python run_page/gen_svg.py --from-db --title "累计跑步热力图" --type github --athlete "奥奥的跑步日记" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github.svg --use-localtime --min-distance 0.5

python run_page/gen_svg.py --from-db --title "${{ env.TITLE_GRID }}" --type grid --athlete "${{ env.ATHLETE }}"  --output assets/grid.svg --min-distance 10.0 --special-color yellow --special-color2 red --special-distance 20 --special-distance2 40 --use-localtime

例如：我这个是2KM-10KM

python run_page/gen_svg.py --from-db --title "五公里以上" --type grid --athlete "奥奥的跑步日记"  --output assets/grid.svg --min-distance 5 --special-color yellow --special-color2 red --special-distance 5 --special-distance2 20 --use-localtime

生成年度环形数据

python run_page/gen_svg.py --from-db --type circular --use-localtime

生成完毕以后就可以查看自己的数据了，我在2020年的时候还是一个积极运动的热血青年，现在也是青年但是不够热血，我要多跑跑步。

配置GitHub

新建一个仓库，名字都无所谓。

把代码推送到GitHub仓库中。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/shaoao/running.git
git push -u origin main

执行完毕以后就可以看到代码已经跑到GitHub仓库里了。

GitHub 仓库配置密钥和 Token

配置仓库

这个项目的作者在代码中用到了GitHub Actions自动化技术，每天会自动运行一次 Run Data Sync，可以及时地将我们的运动数据更新到网站上。

配置密钥，我们要按照下图进行操作，打开仓库的 Settings 页面，左侧切换到 Secrets and vairables 选项卡，点击右上角的 New repository secret，需要我们填入密钥名称 Name 和值 Value。

这里的密钥名称取决于你目前正在使用的运动 App，不同 App 的密钥名称存在着区别，查看密钥名称需要打开 .github/workflows/run_data_sync.yml 文件。

以我在用的 Keep 为例，它的两个密钥名称分别为 KEEP_MOBILE 和 KEEP_PASSWORD，它们的 Value 值其实分别对应——注册 Keep 账号的手机号和密码。

配置Token

为了方便可以直接打开Personal Access Tokens进入，然后点击右上角的 Generate new token，生成一个新的 Token。

打开会让你输入密码验证，生成 Token 时，有两个注意点，将 Token 的有效期 Expiration 设置为 No expiration(长期有效)，勾选下面的所有复选框，将所有权限都打开。

生成的Token

接下来依次点击「Actions」>「Run Data Svnc」>「Run workflow」执行数据同步。

这样就会每天都把keep的数据给同步到网站上了。

接下来就是部署了，很简单就不解释了。

文章分类