打造自己超级酷炫的跑步网站

running_page 一个使用 React Gatsby 和 Mapbox 制作你自己的跑步主页的工具。

特性

GitHub Actions 管理自动同步跑步进程及自动生成新的页面
Gatsby 生成的静态网页，速度快
支持 Vercel(推荐) 和 GitHub Pages 自动部署
React Hooks
Mapbox 进行地图展示
Nike 及 Runtastic(Adidas Run) 以及佳明（佳明中国）及 Keep 等，自动备份 gpx 数据，方便备份及上传到其它软件

因为数据存在 gpx 和 data.db 中，理论上支持几个软件一起，你可以把之前各类 app 的数据都同步到这里（建议本地同步，之后 actions 选择正在用的 app）

注：如果你不想公开数据，可以选择 strava 的模糊处理，或 private 仓库。

支持

Strava
Nike Run Club
Garmin
Garmin-cn
Keep
悦跑圈
咕咚
GPX
TCX
Tcx+Strava(upload all tcx data to strava)
Nike+Strava(Using NRC Run, Strava backup data)
Garmin+Strava(Using Garmin Run, Strava backup data)

安装

git clone https://github.com/yihong0618/running_page.git --depth=1

如果要在本地安装测试，需要满足 node >= 12 <= 14、python >= 3.7：

pip3 install -r requirements.txt
yarn install
yarn develop

执行成功后就可以通过 http://localhost:8000 访问主页了。

更简单的方法是使用 Docker 运行，首先构建 Docker 镜像，通过构建参数 app 传入你的应用名称，包括相关的认证 token 或者密码，如下命令所示：

# NRC
docker build -t running_page:latest . --build-arg app=NRC --build-arg nike_refresh_token=""
# Garmin
docker build -t running_page:latest . --build-arg app=Garmin --build-arg email=""  --build-arg password="" 
# Garmin-CN
docker build -t running_page:latest . --build-arg app=Garmin-CN --build-arg email=""  --build-arg password="" 
# Strava
docker build -t running_page:latest . --build-arg app=Strava --build-arg client_id=""  --build-arg client_secret=""  --build-arg refresch_token="" 
#Nike_to_Strava
docker build -t running_page:latest . --build-arg app=Nike_to_Strava  --build-arg nike_refresh_token="" --build-arg client_id=""  --build-arg client_secret=""  --build-arg refresch_token=""

镜像构建完成后使用下面的命令即可一键启动应用：

docker run -itd -p 80:80   running_page:latest

然后就可以通过 http://<ip> 访问到跑步主页了。

有能力的同学可以把代码中的 Mapbox token 替换成自己的 Mapbox token

const MAPBOX_TOKEN =
  'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0ya2Fua2p2In0.PNKfkeQwYuyGOTT_x9BJ4Q';

如果你是海外用户请将 src/utils/const.js 文件中的 IS_CHINESE 设置为 false。

我们还可以根据自己的需求对网站做一些个性化定制，比如修改网站标题、域名、导航等信息。在仓库目录下找到 gatsby-config.js，找到以下内容并修改成你自己想要的即可。

siteMetadata: {
  siteTitle: 'Running Page', #网站标题
  siteUrl: 'https://yihong.run', #网站域名
  logo: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTtc69JxHNcmN1ETpMUX4dozAgAN6iPjWalQ&usqp=CAU', #左上角LOGO
  description: 'Personal site and blog',
  navLinks: [
    {
      name: 'Blog', #右上角导航名称
      url: 'https://yihong.run/running', #右上角导航链接
    },
    {
      name: 'About',
      url: 'https://github.com/yihong0618/running_page/blob/master/README-CN.md',
    },
  ],
},