Github 访问量统计

基于 Firebase 数据库和 Next.js 框架的 GitHub Profile 的访问量统计图标.


操作指南

第一步: Fork

Fork 当前项目.

第二步: 配置 Firebase

注册您个人的 Firebase 账户:

  • 点击 开始添加项目.
  • 创建实时数据库并选择 测试模式.
  • 数据库的结构应如下图所示:

Github 访问量统计_第1张图片

  • 请将规则都改成 true:

Github 访问量统计_第2张图片

第三步: 部署在 Vercel

  • 用您的 Github 账号登入到 Vercel.
  • 选择刚才 fork 的项目.
  • 找到 设置, 添加 环境变量, 名称 输入为 FIRE_BASE_URL 并输入第二步中创建的 Firebase 数据库链接:

Github 访问量统计_第3张图片

  • 最后, 您可以选择最新推上去的 commit 并重新部署, 不出所料的话一切都会顺利.

Github 访问量统计_第4张图片

第四步: 更新 Github Profile

只需在 README.md 中插入下方的代码:

![](https://{您自己的 vercel 域名}/api/counter)

参考项目

现在 GitHub 有很多优秀的访问量统计的开源项目,我挑选其中两个我最喜欢的项目供大家学习参考:

  • Tool from antonkomarev - 这是我过去几个月最长使用的项目,但是最近可能用户增多了,延时很高遂弃.
  • Tool from Ryan Lanciaux - 极客 UI, 如果想自己部署在 Glitch 上的话要注意服务器会进入睡眠的问题.

共享

源码在 GitHub, 喜欢的加个星~
欢迎任何 issue 和 PR!

你可能感兴趣的:(Github 访问量统计)