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

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

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

配置项目文件

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

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

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 系统的终端下运行。

注：Windows 系统下运行需要搭建 curl 环境，具体方法自行查阅。

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」保存下来。