繼續跑步

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」，配置個性化選項。#

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」文件，修改平台類型及信息。不同平台的配置信息可以前往說明頁面進行查看。#

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: [email protected]

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：

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.