175 免费监控个人网站的访客情况的一种方法 vercel + Umami + Neon
本文最后更新于 328 天前,其中的信息可能已经有所发展或是发生改变。

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

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. Image
    11 月前
    2025-2-07 20:04:16

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

    • Image
      Dongdong
      博主
      烧瑚烙饼
      11 月前
      2025-2-07 20:21:13

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

  2. Image
    11 月前
    2025-2-08 10:05:03

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

    • Image
      Dongdong
      博主
      承世
      11 月前
      2025-2-08 10:10:46

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

发送评论 编辑评论


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