个人博客
由于GitHub Pages本身不支持后端存储，需依赖第三方服务或前端技术实现。以下是五种主流方案（个人推荐Visitor Badge），按实现难度和功能丰富度排序：
一、第三方统计分析工具（功能全面）
-
Google Analytics
- 特点：免费、支持多维数据（地域、设备、来源等），需科学上网查看报表。
- 步骤：
① 注册Google Analytics账号，获取跟踪ID（如G-XXXXXX）；
② 在网站的<head>标签内插入跟踪代码：<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXX'); </script> - 适用场景：需深度分析用户行为。
-
StatCounter
- 特点：免费版支持10万次/月访问量，提供实时统计、多平台累计数据。
- 步骤：
① 注册StatCounter，创建项目（选择"Visible Counter"避免不显示）；
② 将生成的代码插入网站全局模板（如Hugo的config.toml底部）。
二、开源轻量级计数器（简单易用）
-
HITS（实时徽章）
-
Hit Counter（防刷机制）
- 特点：基于Cookie防重复计数，提供API获取数据。
- 步骤：
使用图片标签嵌入：<img src="https://你的服务器地址/count?page=页面ID" alt="访问计数"> - 部署：需自建服务器（支持PythonAnywhere或Docker）。
三、访客徽章服务（零代码）
- Visitor Badge
- 特点：一行代码显示实时访客数，无数据库依赖。
- Github：hehuapei/visitor-badge
- 网站：Visitor Badge
- 步骤：
在HTML中添加：<span>浏览人数：<img src="https://visitor-badge.laobi.icu/badge?page_id=你的页面ID"></span> - 定制：替换
page_id为唯一标识（如域名或仓库名）。
四、纯前端计数
- CounterAPI
-
特点：利用localStorage统计独立访客，免费API调用。
-
Github：counterapi/api
-
官网：CounterAPI
-
步骤：
①使用下面的测试代码获取数据(count+1)：GET https://api.counterapi.dev/v1/:namespace/:name/up参数
| name | required | description |
| ------------------ | ---------- | ---------------------------------------------------------------------------------- |
| :namespace | yes | 分类 (例如你的应用名称、网站或者项目) |
| :name | yes | 唯一标识符 |②在返回的数据拿到“count”，就是访问量
{ "id": 2, "name": "test", "count": 11, "created_at": "2025-06-16T10:24:04.322063Z", "updated_at": "2025-08-10T01:08:47.428239838Z", "namespace_id": 2, "namespace": { "id": 2, "name": "test", "created_at": "2025-06-16T10:24:04.315069Z", "updated_at": "2025-06-16T10:24:04.315069Z" } }③其他参数
计数-1：
GET https://api.counterapi.dev/v1/:namespace/:name/down
设置计数值：
GET https://api.counterapi.dev/v1/:namespace/:name/?count=10
只获取不更新count：
GET https://api.counterapi.dev/v1/:namespace/:name/
检索计数列表：
GET https://api.counterapi.dev/v1/:namespace/:name/list?group_by=day
-
五、方案对比与选择建议
| 方案 | 难度 | 数据维度 | 是否需要外部账号 | 适用场景 |
|---|---|---|---|---|
| Google Analytics | 中 | 全面（用户行为） | 是 | 深度分析流量来源与转化 |
| StatCounter | 中 | 基础+实时 | 是 | 多平台站点统一统计 |
| HITS/Hit Counter | 低 | 访问量 | 否 | 快速嵌入徽章/开源爱好者 |
| Visitor Badge | 极低 | 总访客数 | 否 | 极简需求，5分钟部署 |
| CountAPI | 低 | 独立访客 | 否 | 避免第三方依赖的前端方案 |
💡 操作提示：
- 若仅需显示访问量，推荐Visitor Badge或HITS；
- 如需分析用户来源和行为，选择Google Analytics；
- 自建控制推荐Hit Counter（需服务器基础）。
六、注意事项
- 隐私合规：若目标用户含欧盟地区，需启用GDPR提示（如Google Analytics的弹窗同意）。
- 统计延迟：第三方工具（如StatCounter）数据更新可能有15~30分钟延迟。
- GitHub限制：避免高频API调用（如每秒更新），可能触发GitHub Pages的访问限制。
扫一扫
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
