175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Neon

今天看到一个网址,能够非常有效的监控个人网站。具体见

Bense(一个大佬呀)的访客情况:https://umamirn2.hwb0307.com/share/QqhvkqI6/blognas

于是上网搜索,参考Umami的官方说明进行操作,可以使用vercel的服务来简单地搭建这种服务。

前言

这里共使用四个内容。

  1. Umami:开源程序,如何监控网站流量
  2. Github:Umami程序的存放地点
  3. Neon:后端数据库,监控得到的数据库
  4. Vercel:前端渲染,将数据的内容以网页的形式进行呈现。

(其中Neno可以直接在Vercel中进行使用)也就是说。

本人仅为业余玩家,如果上述内容有错误的话,请见谅。

所以整体思路是下面几步:

  1. 将Umami程序代码Fork到本人的Github仓库中
  2. 使用Vercel来渲染Github中的Umami代码
  3. 连接上Neon数据库
  4. 监控个人网站

相信大家都可以操作的比较好的呀。

操作过程

下面便是上面内容的操作过程呀!

第一步 将Umami代码Fork到本人的Github仓库中

这一步非常简单,简单操作就搞定了都。

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

找到Umami的程序代码,网址为 https://github.com/umami-software/umami

下面点击Fork之后,就可以写一下程序名,以及对应的备注,最后就能够在自己的仓库中看到对应的内容了都。这些是一一对应的内容。

第二步,使用Vercel渲染Umami

在这里,新建一个仓库,后面的操作也就简单了都。

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

这里一共也就四个步骤,难度不大,这很简单上手了都。

  1. “新建Projecet”
  2. 然后找到刚刚建立的仓库名,选择“Import”
  3. 自定义一个Project名称(也可以用默认的),这里使用默认的“Umami-ddw2019-3inw”
  4. 最后点击“Deploy”

当然,由于没有配置数据库的位置,所以这一步大概率是会失败的。

第三步,连接上Neno数据库

这里有两种操作方式。

  1. 在Neno中建立数据库,然后设置环境变量。
  2. 直接在Vercel中建立好数据库,然后和“Umami-ddw2019-3inw”这个Project进行连接。

由于第二种更加简单,所以这里演示第二种操作过程。

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

在Vercel中,一共下面三步:

  1. 在Vercel中,选择Storage,新建Database
  2. 选择使用Neon(主要是因为这个有免费的,至于其他的几个,大家可以尝试一下呀)
  3. 设置服务器地址和付费方式(由于新加坡距离我们近,所以这里选择了新加坡;至于价格,那当然是白嫖了都。)
  4. 设置数据库名称,这里使用了默认的名称“neno-rose-door”
  5. 将Database(“neno-rose-door”)和上一步建立的Project(“Umami-ddw2019-3inw”)相互连接
  6. 就会在上一步建立的“Umami-ddw2019-3inw”这个Project中,自动设置一系列的环境变量。

第四步,重新部署Project

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

这一步,再重新进入Project(“Umami-ddw2019-3inw”)中,将这个内容重新部署一下。

等待两三分钟,就会部署完毕。

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

将要监控的Website加入进去,并且设置一下。

第五步,登录进入程序后台

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

直接进入Project——“Umami-ddw2019-3inw”,然后访问其给的网址(这一步可以设置自定义域名,使用自己同名的网站域名,如umami.ddw2019.com,这个如何设置,就看大家自己了都。)。

输入默认的的账号密码,从而进入到程序内部。当然,进入之后,第一件事当然是改密码,把密码改好,这个相信你肯定可以搞好的呀。

第六步,加入要监控的网站

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

把你要监控的网站加进来,然后将“Track code”加入到网站的

至于如何加,不同的建站程序有不同的加入方法。

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

上图中是wordpresss可以修改主题文件“Header.php”加入到其中后,更新。

其他的建站方式,应该也是可以这样修改的呀。

成果和附加操作

最终成果

经过上述一系列复杂的操作,最终可以监控自己的网站了。但是自己才建立两个小时,这数据量太少了都,这里使用一些别人的。

我的网站访客情况:https://umami.ddw2019.com/share/hfMsvuO7eYrYKyxg/ddw2019.com

Bense(一个大佬呀)的访客情况:https://umamirn2.hwb0307.com/share/QqhvkqI6/blognas

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

这个操作就能够非常好地看到自己网站的流量情况了都。

其他操作

在这里,还可以进行几个附加的操作。

第一,设置自定义域名。vercel默认的url链接记不住怎么办?那就更换自定义的域名。比如说我的网址为“ddw2019.com”,那么监控的网址可以为“umami.ddw2019.com”。

第二,将这个监控情况结果放到自己的博客中。

175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Nano

结语

这样一番操作下来,就能够实现对个人网站的实时监控了都。而且可以看到比较详细的数据。

参考内容:

  1. 个人网站 / 博客必备,零成本、低门槛创建专属数据分析工具:umami.is – 少数派
  2. Benze的流量情况
  3. Overview – Docs – Umami
  4. 从零开始搭建一个免费的个人博客数据统计系统(umami + Vercel + Heroku) – 少数派
作者:Dongdong
链接:http://ddw2019.com/175
声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0协议,转载请注明文章地址。

如果观众姥爷们觉得冬冬的博客还不错,可以订阅赏杯奶茶让我继续撰写下去呦 (ฅ´ω`ฅ)

评论

  1. 6 天前
    2025-2-07 20:04:16

    我之前有用过这个方案,但即使用vercel的优化解析还是很慢
    会不会是冷启动带来的问题呢

    • Dongdong
      博主
      烧瑚烙饼
      6 天前
      2025-2-07 20:21:13

      我感觉挺快的呀,是不是自定义域名或者服务器的原因?

  2. 5 天前
    2025-2-08 10:05:03

    看上去不错,之前试过自建matomo,要求配置太高,可以换这一个看看

    • Dongdong
      博主
      承世
      5 天前
      2025-2-08 10:10:46

      这个看着内容还可以。就是不知道Neon免费计划的500M够用多长时间

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇