Barry Running
保持每天运动是个好习惯，这几天我在刷 Github 时就刷到了这么一个可以将我们平时在各种运动 APP 里的数据做一个前端可视化的这么一个项目，于是我也尝试动手搭了一个，下面我就来分享一下我是如何实现的，本文主要分享配置 Keep 的操作。

Clone 主项目到本地

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

项目地址：https://github.com/yihong0618/running_page
我们可以将该仓库 fork 到自己的仓库在 clone 下来，或者直接 clone 下载传到自己新建的仓库。

配置项目文件

注意：压缩包当中包含多个以 . 开头的文件名称，在 macOS 系统下需要使用快捷键「Command + shift + .」显示隐藏文件。

1.在根目录中找到「gatsby-config.js」，配置个性化选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
pathPrefix: '/',   # 如需使用自定义域名，此处需要修改为/
siteMetadata: {
  siteTitle: 'Running Page',   # 站点标题
  siteUrl: 'https://running.domain.com',   # 站点域名
  logo: 'https://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=*********&spec=640',   # 左上角头像
  description: 'Just Do It',
  navLinks: [
    {
      name: 'Blog',   # 右上角导航栏
      url: 'https://blog.domain.com',
    },
  ],
},

2.打开「.github」>「workflows」>「run_data_sync.yml」文件，修改平台类型及信息。不同平台的配置信息可以前往 说明页面 进行查看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
name: Run Data Sync

on:
  workflow_dispatch:
  schedule:
    - cron: "0 0 * * *"

env:
  # please change to your own config.
  RUN_TYPE: keep # support strava/nike/garmin/garmin_cn/keep/only_gpx/nike_to_strava/strava_to_garmin/strava_to_garmin_cn/garmin_to_strava/garmin_to_strava_cn, Please change the 'pass' it to your own
  ATHLETE: BarryYangi
  TITLE: Barry Running
  MIN_GRID_DISTANCE: 4 # change min distance here
  TITLE_GRID: Over 4km Runs # also here
  GITHUB_NAME: BarryYangi
  GITHUB_EMAIL: 2059484047@qq.com

jobs:
  sync:
    name: Sync
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        
      - name: Set up Python
        uses: actions/setup-python@v1
        with:
          python-version: 3.7

      # from pdm
      - name: Set Variables
        id: set_variables
        run: |
          echo "PY=$(python -c 'import hashlib, sys;print(hashlib.sha256(sys.version.encode()+sys.executable.encode()).hexdigest())')" >> $GITHUB_OUTPUT
          echo "PIP_CACHE=$(pip cache dir)" >> $GITHUB_OUTPUT

      - name: Cache PIP
        uses: actions/cache@v2
        with:
          path: ${{ steps.set_variables.outputs.PIP_CACHE }}
          key: Ubuntu-pip-${{ steps.set_variables.outputs.PY }}
          
      - name: Install dependencies
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt
        if: steps.pip-cache.outputs.cache-hit != 'true'

      - name: Run sync Nike script
        if: env.RUN_TYPE == 'nike'
        run: |
          python scripts/nike_sync.py ${{ secrets.NIKE_REFRESH_TOKEN }}

      - name: Run sync Nike to Strava(Run with nike data backup and show with strava)
        if: env.RUN_TYPE == 'nike_to_strava'
        run: |
          python scripts/nike_to_strava_sync.py ${{ secrets.NIKE_REFRESH_TOKEN }} ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}

      - name: Run sync Keep script
        if: env.RUN_TYPE == 'keep'
        run: |
          python scripts/keep_sync.py ${{ secrets.KEEP_MOBILE }} ${{ secrets.KEEP_PASSWORD }} --with-gpx

      - name: Run sync Strava script
        if: env.RUN_TYPE == 'strava'
        run: |
          python scripts/strava_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}

      # for garmin if you want generate `tcx` you can add --tcx command in the args.
      - name: Run sync Garmin script
        if: env.RUN_TYPE == 'garmin'
        run: |
          python scripts/garmin_sync.py ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }}
        # If you only want to sync `type running` add args --only-run, default script is to sync all data (rides and runs).
        # python scripts/garmin_sync.py ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }} --only-run

      - name: Run sync Garmin CN script
        if: env.RUN_TYPE == 'garmin_cn'
        run: |
          python scripts/garmin_sync.py ${{ secrets.GARMIN_CN_EMAIL }} ${{ secrets.GARMIN_CN_PASSWORD }} --is-cn

      - name: Run sync Only GPX script
        if: env.RUN_TYPE == 'only_gpx'
        run: |
          python scripts/gpx_sync.py

      - name: Run sync Strava to Garmin(Run with strava(or others upload to strava) data backup in Garmin)
        if: env.RUN_TYPE == 'strava_to_garmin'
        run: |
          python scripts/strava_to_garmin_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }} ${{ secrets.STRAVA_EMAIL }} ${{ secrets.STRAVA_PASSWORD }}

      - name: Run sync Strava to Garmin-cn(Run with strava(or others upload to strava) data backup in Garmin-cn)
        if: env.RUN_TYPE == 'strava_to_garmin_cn'
        run: |
          python scripts/strava_to_garmin_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_CN_EMAIL }} ${{ secrets.GARMIN_CN_PASSWORD }} ${{ secrets.STRAVA_EMAIL }} ${{ secrets.STRAVA_PASSWORD }} --is-cn

      - name: Run sync Garmin-cn to Strava(Run with Garmin data backup in Strava)
        if: env.RUN_TYPE == 'garmin_to_strava_cn'
        run: |
          python scripts/garmin_to_strava_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_CN_EMAIL }} ${{ secrets.GARMIN_CN_PASSWORD }} --is-cn

      - name: Run sync Garmin to Strava(Run with Garmin data backup in Strava)
        if: env.RUN_TYPE == 'garmin_to_strava'
        run: |
          python scripts/garmin_to_strava_sync.py ${{ secrets.STRAVA_CLIENT_ID }} ${{ secrets.STRAVA_CLIENT_SECRET }} ${{ secrets.STRAVA_CLIENT_REFRESH_TOKEN }}  ${{ secrets.GARMIN_EMAIL }} ${{ secrets.GARMIN_PASSWORD }}

      - name: Run sync Tulipsport script
        if: env.RUN_TYPE == 'tulipsport'
        run: |
          python scripts/tulipsport_sync.py ${{ secrets.TULIPSPORT_TOKEN }} --with-gpx

      - name: Make svg GitHub profile
        if: env.RUN_TYPE != 'pass'
        run: |
          python scripts/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 scripts/gen_svg.py --from-db --title "${{ env.TITLE_GRID }}" --type grid --athlete "${{ env.ATHLETE }}" --output assets/grid.svg --special-color yellow --special-color2 red --special-distance 20 --special-distance2 40 --use-localtime --min-distance "${{ env.MIN_GRID_DISTANCE }}"
          python scripts/gen_svg.py --from-db --type circular --use-localtime
          python scripts/gen_svg.py --from-db --year $(date +"%Y")  --language zh_CN --title "$(date +"%Y") Running" --type github --athlete "${{ env.ATHLETE }}" --special-distance 10 --special-distance2 20 --special-color yellow --special-color2 red --output assets/github_$(date +"%Y").svg --use-localtime --min-distance 0.5
          
      - name: Deploy site
        uses: peaceiris/actions-gh-pages@v3
        with:
            github_token: ${{ secrets.MY_GIT_TOKEN }}
            publish_branch: vercel-pages
            publish_dir: .
            force_orphan: true
            # keep_files: true

这里推荐我们删掉剩下三个 workflows 配置 yml，因为我们不需要，后面我们将会将站点配置到 vercel 上，然后复制我的 run_data_sync.yml 文件内容到该文件覆盖。

3.找到自己所对应的平台需要完善的帐户信息

列如 keep：

1
python scripts/keep_sync.py ${{ secrets.KEEP_MOBILE }} ${{ secrets.KEEP_PASSWORD }} --with-gpx

我们需要能够登录 keep 的手机账号以及密码，随后我们需要用到。

4.Running Page 使用 Mapbox 进行地图展示，需要前往 Mapbox 站点 注册一个开发者账号。

登录账号后，选择「Create a token」创建一个令牌，并完善相关信息。提交后会得到一串令牌信息，编辑「src」>「utils」>「const.js」文件，将自己的令牌替换到 MAPBOX_TOKEN 当中。

5.保存文件并且 push 到自己的 git 仓库

Git 仓库 secrets 配置

进入自己的仓库，依次点击 Settings->Secrets and variables->Actions->New repository secret 新建如下图三个 secrets
secrets

其中前两项为 keep 的手机账号和密码，最后一项为 github 的 token，如果没有的话可以点击头像->Settings->Developer settings->Personal access tokens (classic)->Generate new token
创建的时候可以把所有权限都勾了，然后创建完就复制记下来，这个 token 是值出现一次的，看完以后就再也不能看了，然后把这个 token 放到前面我们仓库的哪个 secret 里去即可。

配置 Vercel

进入我们的 Vercel 没有账号的注册一个然后绑定我们的 GitHub ，绑定完直接点击刚刚我们新建的仓库导入即可。
然后我们回到 Github 的仓库点击 Actions，按如下步骤手动触发一次工作流。
Actions

等待工作流跑完如果是勾就说明没问题了，这个时候我们会发现多出来了一个 vercel-pages 分支，这个分支我们用来在 vercel 上部署，我们来到 vercel 的本项目的 setting 页面更改默认的部署分支为 vercel-pages，步骤如下图：

保存完成后我们需要在去 vercel-pages 分支在 push 一次 vercel 这边才会真正应用，我们只需在 github 仓库的 Actions 页面重新执行一次我们刚刚操作过的哪个工作流即可。

等待工作流跑完，然后你回到 vercel 页面等待部署完你就会发现部署分支已经变为了 vercel-pages

vercel 绑定域名

如果你想将本页面分享给你的朋友看这样肯定是不够优雅的，哪如果你有自己的域名可以到 vercel 的 Setting 页面的 Domains 选项绑定自己的域名。

End

在此希望这个项目能带给我们的不仅仅是一次简单的项目部署经验，能让我们借此养成一个良好的运动习惯才是最重要的，然后记录下来，将来可以去追溯当下。
Just enjoy it.