使用 GitHub Pages 部署 Running Page 个人跑步主页

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

项目地址：https://github.com/yihong0618/running_page

配置项目文件

1、前往 GitHub 站点的 Running Page 项目 下载软件包。

2、解压文件，在根目录中找到「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',
    },
  ],
},

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

env:
  # please change to your own config.
  RUN_TYPE: strava   # 此处填写数据来源平台，此处以 Strava 平台为例
  ATHLETE: username   # 用户名称
  TITLE: Running Page   # 站点标题
  MIN_GRID_DISTANCE: 10
  TITLE_GRID: Over 10km Runs
  GITHUB_NAME: username   # GitHub 用户名
  GITHUB_EMAIL: username@domain.com   # GitHub 绑定邮箱

4、接着向下滚动，找到自己所对应的平台需要完善的帐户信息。如 Strava 平台需要 「STRAVA_CLIENT_ID」、「STRAVA_CLIENT_SECRET」及 「STRAVA_CLIENT_REFRESH_TOKEN」三项内容，记录下这些名称，后续步骤需要使用。

5、如需使用自定义域名，需要编辑「.github」>「workflows」>「gh-pages.yml」文件，将 fqdn 的注释删掉，输入自己的域名。

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

7、登录账号后，选择「Create a token」创建一个令牌，并完善相关信息。

8、提交后会得到一串令牌信息，编辑「src」>「utils」>「const.js」文件，将自己的令牌替换到 MAPBOX_TOKEN 当中。

获取平台授权信息

接下来的步骤以 Strava 平台为例，各个平台的获取方法不同，其他平台的操作步骤请前往 说明页面 自行查阅。

1、前往 Strava 站点的 开发者中心 ，选择「Create & Manage Your App」。

2、创建一个新的应用程序，完善配置信息，「授权回调域」中输入「localhost」，创建后需要上传图标文件。

3、应用创建成功后会得到一个客户端 ID，将客户端 ID 替换到以下链接中的 ${Client ID}，访问这个链接请求权限。

# 将 ${Client ID} 替换为客户端 ID
https://www.strava.com/oauth/authorize?client_id=${Client ID}&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=read_all,profile:read_all,activity:read_all,profile:write,activity:write

4、授权成功后，浏览器的地址栏会返回一串 code 值。其中「fbedf36 ******** bb5826805cbf38ebb4232a275」为 code 值。

http://localhost/exchange_token?state=&code=fbedf36b********b5826805cbf38ebb4232a275&scope=read,activity:write,activity:read_all,profile:write,profile:read_all,read_all

5、将「客户端 ID」、「客户端密钥」以及 code 值替换到以下命令中，在 macOS 系统的终端下运行。

curl -X POST https://www.strava.com/oauth/token \
-F client_id=${Client ID} \
-F client_secret=${Client Secret} \
-F code=${Code} \
-F grant_type=authorization_code

6、执行完成后会返回一段数值，找到「refresh_token」下的「ff7c49cf ******** 53f84b1baef9922778dac563」保存下来。

创建 GitHub 仓库

1、前往 GitHub 页面，点击右上角的 + 号选择「New repository」新建一个仓库。

2、在 Repository name 中填写仓库名称，点击「Create repository」完成创建。

3、接下来需要提交数据平台的验证信息，进入创建好的仓库，依次进入「Settings」>「Security」>「Secrets」>「Actions」，选择顶部的「New repository secret」。

4、将「run_data_sync.yml」文件中对应平台所需要提交的字段名称，以及获得对应的授权信息填写在此处。

如 Strava 平台需要 「STRAVA_CLIENT_ID」、「STRAVA_CLIENT_SECRET」及 「STRAVA_CLIENT_REFRESH_TOKEN」三项内容。

5、前往 https://desktop.github.com/ 下载 GitHub Desktop 客户端。

6、安装并启动客户端，登录 GitHub 账户。

7、连接到刚才创建的仓库。

8、设置本地缓存文件夹，默认存储在文稿文件夹当中。

9、选择「Show in Finder」打开仓库所在文件夹，将配置好的整个 Running Page 项目文件，移动到该文件夹中。

10、返回客户端，在左下角完善总结信息，点击「Commit to main」提交，接着点击顶部的「Publish branch」发布分支。

发布 Running Page 页面

1、前往 GitHub 页面的 Running Page 项目，依次点击「Actions」>「Run Data Svnc」>「Run workflow」执行数据同步。

2、任务完成后，点击「Publish GitHub Pages」>「Run workflow」生成跑步页面。

3、任务完成后，点击「Settings」>「Code and automation」>「Pages」，选择 Branch: gh-pages 并点击「Save」发布页面。

4、如需使用自定义域名，在「Custom domain」输入域名后点击「Save」保存，并根据提示在域名服务商将 DNS 解析指向到 GitHub 域名。

5、访问站点，页面发布成功！