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

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

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

使用 GitHub Pages 部署 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」三项内容,记录下这些名称,后续步骤需要使用。

注意:密码不要直接填写在此处!

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

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

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

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

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

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

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

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

获取平台授权信息

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

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

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

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

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

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
使用 GitHub Pages 部署 Running Page 个人跑步主页
使用 GitHub Pages 部署 Running Page 个人跑步主页

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

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

创建 GitHub 仓库

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发布 Running Page 页面

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

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

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

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

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

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

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

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

5、访问站点,页面发布成功!

使用 GitHub Pages 部署 Running Page 个人跑步主页
本文为原创文章,著作权归作者所有:来自「KOBIN 技术随笔」作者的原创作品,转载请标明出处。
使用 GitHub Pages 部署 Running Page 个人跑步主页
https://blog.kobin.cn/blog/program/p3/2396.html
(1)

发表评论

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...