使用 GitHub Pages 部署 Running Page 个人跑步主页 2022/11/15 11:23 • 其他应用软件 • 阅读 6663 Running Page 是 @yihong0618 创立的一个开源项目,通过这个项目可以从多个主流跑步平台同步锻炼数据,自动生成一个地图可视化的跑步页面。通过 GitHub Pages 可以快速的完成自动部署。 项目地址:https://github.com/yihong0618/running_page 目录 配置项目文件获取平台授权信息创建 GitHub 仓库发布 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」保存下来。 创建 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、访问站点,页面发布成功! 本文为原创文章,著作权归作者所有:来自「KOBIN 技术随笔」作者的原创作品,转载请标明出处。使用 GitHub Pages 部署 Running Page 个人跑步主页https://blog.kobin.cn/blog/program/p3/2396.html GitHubPython 赞 (6) 0 5 生成海报 发表回复 您的电子邮箱地址不会被公开。 必填项已用 * 标注*昵称: *邮箱: 网址: 记住昵称、邮箱和网址,下次评论免输入 提交 CAPTCHAis initialing... 评论列表(5条) paul 2023/02/15 16:10 这位博主,您好。在浏览完您的博客文章后,感觉您的博客内容质量非常的好,也达到了加入腾讯云自媒体分享计划的要求。 现诚挚地向您发出邀请,邀请您加入腾讯自媒体分享计划:https://cloud.tencent.com/developer/support-plan?invite_code=347bs58ysckks 。待审核成功入驻后,会在社区后台为您发放相关得腾讯云无门槛代金券以及一些实物奖励。 具体审核细则,请进入页面查看。 回复 arthurfsy 2023/04/03 10:54 感谢提供详细的教程,少踩了好多坑 回复 KOBIN 2023/04/18 11:36 @arthurfsy:非常高兴对您有所帮助 回复 菊座 2024/02/03 22:37 感谢分享! 回复 Lex 2024/09/09 21:53 这个好酷! 如果都是通过Strava授权的话,是不是也可以搞出来一个自行车版本的! 回复