给自己的网站添加一个访客统计系统

关于AI清羽AI正在绞尽脑汁想思路ING···清羽のAI摘要GLM-4-Flash碎碎念前两天网站被打了，导致服务器很多的东西都好像有损坏无法重新运行，于是重新部署了一遍反正也不麻烦，顺带着部署了一个网站监控系统，Umami，页面也还挺好看，功能对我来说足够了哈哈哈，并且重点是部署很简单！

选择的原因🙄引用站外地址，不保证站点的可用性和安全性推荐 5 款免费开源的网站流量分析统计工具zhuanlan.zhihu.com其实市面上有很多选择，matomo，Plausible，Fathom，Ackee，Shynet等等，都非常的优秀，参考上方链接，对于这五款的介绍大致如下：

Umami：

优点：简单易用，自托管，不使用 Cookie，不跟踪用户，符合 GDPR，资源占用低，功能丰富。

缺点：功能简单，样式比较单一。

Shynet：

优点：不使用 Cookie，不跟踪用户，分析脚本轻量，适合个人项目和中小型网站。

缺点：可能不适合高流量网站。

Plausible：

优点：100%开源，不使用 Cookie，不收集个人数据，符合隐私政策，功能完善。

缺点：官方托管版本收费，免费自建版本发布频率较低。

Fathom：

优点：注重隐私，不收集个人身份信息，有免费开源Lite版本。

缺点：Lite版本使用匿名Cookie，数据较少，不符合某些隐私政策。

Ackee：

优点：关注隐私，界面简洁美观，采用匿名数据采集，提供有用的统计信息。

缺点：内容较少，可能缺少一些全功能营销分析平台的功能。

Matomo：

优点：功能齐全强大，提供转化优化、搜索引擎优化、一体化集成等多种功能，用户拥有数据所有权。

缺点：自部署难度高，设置复杂，追踪代码体积大可能影响网站加载速度，需要专业知识和耐心操作。

由于我的小服务器限制，导致很难部署比较大的统计网站，再加上追踪代码太大了的话会影响速度，于是我选择了Umami，这个统计代码才不到3KB的小家伙。

开始部署🙄引用站外地址，不保证站点的可用性和安全性Umami-Github仓库链接github.com/umami-software🙄引用站外地址，不保证站点的可用性和安全性Umami官网umami.js部署要求部署中需要用到反向代理，所以请提前备好Nginx，下面是两种部署方式

源码部署

Node.js 版本为 16.13 或更新的服务器。

一个功能正常的数据库，Umami 支持 MySQL 和 Postgresql 数据库。

Docker部署

Docker正常运行~

这里我们选择第二种方式，Docker部署，并使用Postgresql数据库。

部署过程首先我们创建一个网站，这里我使用的是宝塔面板，点击网站，创建网站，输入你的域名，页面选择纯静态，注意创建页面之前，先将对应DNS解析添加到域名中，指向位置为你的服务器外网IP。

然后我们尝试访问网站应该就可以访问了，下面申请SSL，注意这一步需要在反向代理之前，后面续费也先关闭反向代理，申请证书，再打开代理。这一步不用多说了，选择宝塔免费的即可。

下面就开始部署啦，打开上面申请的网站文件所在位置，克隆仓库，当然也可以自己找位置，我这么做主要是方便网站管理：

1git clone https://github.com/umami-software/umami.git如果服务器克隆有困难，可以将其先导入到Gitee，再克隆Gitee仓库，或者直接克隆我的gitee镜像仓库，克隆之前请确保我的仓库是最新的内容，如果不是最新可以自己导入gitee或者联系我更新：

1git clone https://gitee.com/willow-god/umami.git克隆下来以后，打开文件 docker-compose.yml ，内容如下：

12345678910111213141516171819202122232425262728293031323334353637---version: '3'services: umami: image: ghcr.io/umami-software/umami:postgresql-latest ports: - "3000:3000" # 前面的端口你可以改，如果3000已经被占，你可以改成如：3001:3000 environment: DATABASE_URL: postgresql://umami:umami@db:5432/umami DATABASE_TYPE: postgresql APP_SECRET: replace-me-with-a-random-string # 修改为随机字符串，为了安全 depends_on: db: condition: service_healthy restart: always healthcheck: test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"] interval: 5s timeout: 5s retries: 5 db: image: postgres:15-alpine # 这里会创建postgresSQL的docker environment: POSTGRES_DB: umami # 默认创建的数据库名称，可以不改 POSTGRES_USER: umami # 默认创建的数据库用户名，可以不改 POSTGRES_PASSWORD: umami # 默认创建的数据库密码，也可以不改，但是建议改改，为了安全 volumes: - umami-db-data:/var/lib/postgresql/data restart: always healthcheck: test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"] interval: 5s timeout: 5s retries: 5volumes: umami-db-data:按照上方的注释编辑好之后，在目录下打开终端，并运行下面的命令进行创建：

1docker-compose up -d等三个started出现后，命令运行完毕，此时去宝塔面板的Docker管理器可以看到我们创建的两个容器，一个是postgresSQL数据库，还有一个是Umami主程序：

此时他已经运行到了我们的默认的3000端口，我们现在配置反向代理将其转发到我们刚才创建的域名下，点击网站，选择对应网站的设置，点击反向代理，按照下面的图片进行配置：

这样我们就部署完成了！

开始使用下面我们就可以访问到站点了，访问创建的网站，默认账户为:admin，默认密码为:umami：

进去之后首先点击右上方头像，个人资料修改密码，修改之后，返回仪表板，点击设置，网站，添加网站，添加自己的站点：

添加完成后，点击编辑，追踪代码，将这一串代码添加到你的网站JS中即可，如果你有很多网站使用同一套源码，可以使用以下JS，自行判断域名并加载代码，这样可以防止统计到本地调试时的n次访问：

12345678910111213141516171819var currentDomain = window.location.hostname;if (currentDomain.includes('[站点1]')) { var script = document.createElement('script'); script.src = 'https://[你的站点]/script.js'; // 这个需要你自己看着改改 script.setAttribute('data-website-id', '[站点1的网站ID，也就是跟踪代码后面一串]'); script.async = true; // 将script的async属性设置为true，实现异步加载 document.head.appendChild(script); console.log('========成功加载 [站点1] 统计分析工具代码========');} else if (currentDomain.includes('[站点2]')) { var script = document.createElement('script'); script.src = 'https://你的站点/script.js'; script.setAttribute('data-website-id', '[站点2的网站ID]'); script.async = true; // 将script的async属性设置为true，实现异步加载 document.head.appendChild(script); console.log('========成功加载 [站点2] 统计分析工具代码========');} else { // 比如本地调试，就不需要统计了，要不然会发现统计页面很多来自本地localhost console.log('========当前网站不需要加载统计分析工具========');}这样，就可以统计数据啦！在仪表盘就能看见你的数据！

同时它还支持对外分享统计数据，点击设置，网站，编辑，共享链接，启用共享链接，这样别人就可以免登录看到你的网站访客数据了！下面是我的访客数据。

😃来自本站，本站可确保其安全性，请放心点击跳转清羽飞扬小站访客数据LiuShen's Blog功能一览Umami主打一个简洁，但是他的功能也能完全的符合我的要求，首先就是直观的条形图：

其次就是页面访问量单独统计和来源域名统计：

还有浏览器，操作系统，设备统计，具体可以在上面的共享链接查看。最让我垂涎的就是访客地图了，不过美中不足的是访客地图只支持国家的访问：

不过这个也并非刚需，如果和我一样只想要一个轻量简洁的统计数据，那么这个一定会让你满意的！本次教程到此结束，有什么问题欢迎在评论区留言！

— 柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜