哈喽！林墨白 - 建站 https://blog.lmb.blue/tag/%E5%BB%BA%E7%AB%99/ zh-CN Tue, 07 Oct 2025 08:29:00 +0800 Tue, 07 Oct 2025 08:29:00 +0800 0成本在Vercel部署Umami网站分析工具 https://blog.lmb.blue/archives/1541/ https://blog.lmb.blue/archives/1541/ Tue, 07 Oct 2025 08:29:00 +0800 林墨白 什么是Umami

app.jpg

Umami 是一款使用MIT开源协议且注重隐私的轻量级网站分析工具，可作为Google Analytics 的替代品，提供流量统计、用户行为分析等功能，支持自托管且不收集个人数据。
流量分析：跟踪总流量、唯一用户数、会话时长等指标‌。
访客分析：记录地理位置、设备类型等数据‌。
隐私保护：符合GDPR 和CCPA，不使用 Cookie 或追踪个人行为‌。
自定义事件：支持按钮点击、表单提交等事件跟踪‌。
简而言之，它是一款为个人和中小团队打造的轻量级网站分析工具。它不只简单高效，更将用户隐私置于首位。
官网： umami.is
中文网： umami.zhcndoc.com

我为什么要用Umami呢？

我之前使用的是91LA(数字没有错)网站统计，然后听别人说容易跳片战，但是我觉得我从来没有过，所以不以为意。直到我日常视奸BlogsClub成员的时候，发现某某日记跳片站了[Lol] 。询问的之后发现是用了91LA，这次我是真见识到了[Puke]
IMG_20251003_195007.jpg

我是看见群友提到的Umami，好奇心驱使我打开它们的demo站，发现简直长在我的心巴上了！！！属于是简约而不简单hhhh~

如何部署Umami

支持环境

一台安装 Node.js 版本 18.18 或更高的服务器。
一个数据库。 Umami 支持 MySQL（最低 v8.0）和 PostgreSQL（最低 v12.14）数据库。

部署方式

从源代码安装： 从 GitHub 获取代码并自行构建应用程序。

使用 Docker Compose： 使用 docker compose 构建自己的 Docker 容器。
使用 Docker 镜像： 下载一个预构建的 Docker 镜像。
本次使用Vercel部署的教程属于“从源代码安装”方式(因为我的很多网站只适配小于MySQL 8.0的版本)

准备工作

  • Vercel账户(需提前登录)
  • Git账户(这里演示GitHub，需提前登录)
  • 自建数据库(可有可无)

可以在https://vercel.com/account/settings/authentication 提前绑定Git账户

开始部署

一键部署

点击立刻部署后，请填写第二行的Repository Name(意为储存库名称，只能填字母、数字)，在这里创建的储存库默认为私人库，点一下右边上解锁图标就变成公共库了(纯字面意思，不懂百度)
Screenshot_2025_1003_213630.png

然后点击Create等待储存库创建完成就可以进入下一步了
Screenshot_2025_1003_214619.png

这里会让你填写环境变量中的信息，DATABASE_URL表示你的数据库

有自建数据库

在DATABASE_URL中填写数据库的连接字符串(如下)
MySQL：

mysql://username:password@host:3306/dbname

Postgres：

postgresql://username:password@host:5432/dbname

注意： 请保证你的数据库版本和支持环境的版本一致，否则将会一直部署失败
你需要将其中的username、password、host、port、dbname和端口(3306、5523是大部分默认的端口)替换为你自己数据库的实际信息，然后点击Deploy即可部署
Screenshot_2025_1003_215759.png

无自建数据库

当然！如果你没有任何属于自己的数据库，那就可以选择Vercel中免费的数据库，这时你可以直接随便填点内容，再点击Deploy进行部署(虽然会部署失败:[哈士奇] )
小技巧：在立刻部署的链接中，把&env=DATABASE_URL删除后再访问就可以跳过配置环境变量，直接部署了。(后面步骤中的也不用移除环境变量了)

点击Deploy后会变成Deploying，向下滑等待部署失败后，点击Go to Project进入项目
Screenshot_20251003_221803.png

然后你需要点击依次点击Settings→Environment Variables，找到DATABASE_URL环境变量，点击右边三个点，再点击Remove进行移除
Screenshot_20251003_225514.png

接着点击Storage，再点击Create Databas
Screenshot_20251003_222201.png

选择Neon后，点击Continue
Screenshot_20251003_222600.png

选择数据库服务器来源，一般选择推荐的就行(结尾带!的就是)，再点击Continue
Screenshot_20251003_222959.png

填写数据库名称后，点击Sreate进行创建数据库
Screenshot_20251003_223321.png

创建完成后，找到创建好的数据库点击Connect填写相关信息
Screenshot_20251003_225825.png

在弹出的窗口中直接点击Connect进行连接，其他的可管可不管，但是Custom Prefix那一项不要填！！
Screenshot_20251003_232241.png

连接完后，我们需要重新部署。点击Deployments，再点击任意消息旁边的三个点，最后点击Redeploy进行Screenshot_20251003_230618.png
重新部署就完成了

手动部署


进入Umami的GitHub项目页面，点击Fork进行创建副本
Screenshot_20251005_151623.png
分别在Repository name、Description中填上副本的名称和描述(后面可以更改)，然后点击Create fork创建副本
Screenshot_20251005_165156.png

在Vercel中，点击Add New，再点击Project
Screenshot_20251005_222830.png

找到刚刚创建的副本，点击Import
Screenshot_20251005_231043.png

有自建数据库

展开Environment Variables环境变量列表，添加DATABASE_URL，添加内容如下：
MySQL：

mysql://username:password@host:3306/dbname

Postgres：

postgresql://username:password@host:5432/dbname

注意： 请保证你的数据库版本和支持环境的版本一致，否则将会一直部署失败
你需要将其中的username、password、host、port、dbname和端口(3306、5523是大部分默认的端口)替换为你自己数据库的实际信息，然后点击Deploy即可部署
Screenshot_20251005_231452.png

无自建数据库

请参考一键部署中无自建数据库使用Vercel中免费的数据库的操作
这里直接点击点击Deploy部署就行了
Screenshot_20251005_231429.png

我推荐的部署方式

结论：推荐手动部署，数据库自建或不自建都行(反正我用的是Vercel免费数据库)
原因：通过手动部署后，在GitHub上的Umami副本可以一键同步官方仓库的最新代码，点击Sync fork进行同步即可。但是一键部署的Umami副本(应该不叫副本了，因为与官方仓库没有关联了)就不能一键同步。
Screenshot_20251006_101505.png

优化配置

域名绑定

由于Vercel是一款非常出名的前端开发工具和AI云计算服务，所以它提供的免费域名(vercel.app)被很多人滥用，已经在国内打不开了。我们需要在设置中绑定自己的域名，以便Umami正常工作。
点击Settings，点击Domains，再点击Add Domain进行添加域名(首次添加域名会验证域名的所有权)，添加成功后会自动申请SSL证书。
Screenshot_20251006_115150.png

绕过广告拦截器

尽管 Umami 是一款注重隐私的产品，但它仍可能被阻止某些广告拦截器。因为有些拦截器可能过于激进，它们会拦截某些域名关键词或者常见的数据收集接口请求……
在Umami环境变量文档(https://umami.is/docs/environment-variables)中提供了两个环境变量以最大限度的绕过广告拦截器。
注意：每次更改环境变量后都要重新部署

TRACKER_SCRIPT_NAME

假如原本的跟踪代码如下：

<script defer src="https://aa.bb.cc/script.js" data-website-id="xxxxxxxxx"></script>

但是如果添加了TRACKER_SCRIPT_NAME，并且对应的内容填写了style.css，那么跟踪代码会变成如下：

<script defer src="https://aa.bb.cc/style.css" data-website-id="xxxxxxxxx"></script>

当然！style.css可以为任何你喜欢的内容

COLLECT_API_ENDPOINT

环境变量COLLECT_API_ENDPOINT是用来修改数据收集的接口，其格式是/xxx或/xxx/xxx以此类推等等。

如何添加环境变量

点击Settings，再点击Environment Variables，在图中标记处添加环境变量，然后点击Save，最后重新部署即可。
可以参考我的环境变量填写的内容
Screenshot_20251006_001815.png

常见问题

问：
怎么从Vercel的免费数据库(Neon)导出数据呢？

答：
因为上述提到的数据库服务商Neon是第三方合作平台，所以要前往第三方导出数据。
点击Storage，再点击对应的数据库进入详情页
Screenshot_20251006_112829.png

最后点击Open in Neon就可以直接登录到Neon服务商了
Screenshot_20251006_113150.png

导出数据的具体操作不过多赘述了，请参考Neon控制台文档(看不懂自行翻译)：https://neon.com/docs/guides/tables

问：
Neon提供的免费数据库怎么样？

答：

  1. 永远免费：提供无需信用卡、永不过期的免费套餐，包含可观的存储和计算资源。
  2. 无服务器架构：计算与存储分离，按实际使用量计费，不用时自动暂停，成本极低。
  3. 即时分支：可以像 Git 一样，为数据库创建多个独立的完整分支，极大提升开发、测试和协作效率。
  4. 完全兼容 PostgreSQL：支持标准 PostgreSQL 协议、驱动和扩展，迁移和使用无门槛。
  5. 基于时间点恢复：能够将数据库状态回溯到过去的任意一秒，数据安全更有保障(免费版好像仅支持回溯一天以内)。
  6. 现代工作流：数据库分支能与 CI/CD 流程无缝集成，适合云原生和敏捷开发。
]]> 6 https://blog.lmb.blue/archives/1541/#comments https://blog.lmb.blue/feed/tag/%E5%BB%BA%E7%AB%99/ 免费白嫖Dewlance永久虚拟主机 https://blog.lmb.blue/archives/906/ https://blog.lmb.blue/archives/906/ Tue, 09 Jan 2024 08:36:00 +0800 林墨白 什么是Dewlance

logo.png
Dewlance® was founded In Feb' 2009 by Chandra Prakash. This site has been considered above all other existing sites. It consist of 6 hard working and quality assuring professionals. We work as a team to provide solutions at low cost and high quality assurance. Our servers are specially built to ensure reliability and durability at all time.
皇家翻译(仅供参考)： Dewlance®由Chandra Prakash于2009年2月创立。该场地已被视为高于所有其他现有场地。它由6名辛勤工作和质量保证的专业人员组成。我们作为一个团队以低成本和高质量保证提供解决方案。我们的服务器是专门建造的，以确保在任何时候都具有可靠性和耐用性。

白嫖虚拟主机

主机配置

  • 1GB磁盘空间
  • 50GB/月 流量
  • DirectAdmin面板
  • 后台可免费申请SSL
  • 仅英国地区
  • 可以绑定1个主域名(lmb520.cn)和2个子域名(blog.lmb520.cn)
  • 2个MySQL数据库
  • 5个FTP账号

目前发现免费主机白嫖账号没有数量上限(反正我白嫖了20个主机了)

友好的功能

  • 前台和后台支持中文
  • 前台和后台不用VPN访问
  • 访问速度相比于其它外国服务器很快
  • 不需要国外信用卡，直接免费领取
  • 不限制邮箱登录，不用邮箱验证

开始白嫖！！

白嫖链接🔗：https://www.dewlance.com/free-hosting
选择0 - Free，不建议选择6 YEARLY，因为我们是白嫖:^(色)
Screenshot_2024_0109_075808.png

选择I will use my existing domain and update my nameservers，域名里面可以乱填，反正控制面板可以改的
Screenshot_2024_0109_080631.png
这里可以选择中文，只不过是繁体的
Screenshot_2024_0109_080858.png
这里直接点：Checkout
Screenshot_2024_0109_081048.png
这里是填写购买和创建用户信息，除了我标红的地方其他的都可以乱填，填完了就可以点Complete Order了
IMG_20240109_081305.jpg
订购完，再点击Continue To Client Area进入用户中心，中间给你发邮件是给你查看账单信息，也可以不用管它。
IMG_20240109_082205.png
点击Services进入管理虚拟主机页面，点击你的虚拟主机进入虚拟主机详情页(不要点域名，比如我的43646.343164，不然会给你跳转访问域名)
Screenshot_2024_0109_082441.png

然后点击Login to DirectAdmin进入虚拟主机后台DirectAdmin控制面板
IMG_20240109_082701.png
进去后在底部可以更改语言，更改的时候可以直接打出中文就会出现简体中文了
Screenshot_2024_0109_082931.png
你也可以点击顶部的小人，再点击Skin Options
Screenshot_2024_0109_083249.png
这个也是可以直接打出中文就可以直接选择中文简体了
IMG_20240109_083423.png

域名解析

在主机详情页最下面，有一个Hosting Information，里面有一个信息是Server Name这个就是域名使用CNAME解析地址，下面是我的解析操作
IMG_20240109_092238.png
Screenshot_2024_0109_092623.png
后面搭建网站什么的应该不用教了吧，不会的百度：如何使用DirectAdmin面板搭建网站

OK，结束🔚！

2024年1月9日17点更新

呃呃呃呃呃，一个账号不能白嫖多了，我因为白嫖了20多个被官方制裁了号没了，测试站准备重新建

2024年1月19日更新

删除演示站点

]]> 1 https://blog.lmb.blue/archives/906/#comments https://blog.lmb.blue/feed/tag/%E5%BB%BA%E7%AB%99/ 搭建基于UptimeRobot接口的站点监测网站 https://blog.lmb.blue/archives/770/ https://blog.lmb.blue/archives/770/ Mon, 25 Dec 2023 08:39:00 +0800 林墨白 什么是UptimeRobot

王子公主请看以前的文章

开始

上次介绍了通过UptimeRobot免费监测网站状态并使用邮箱＋APP进行通知，有没有一种可能假如手机突然掉了，然后就……刚好想看一下自己的网站还在没在正常运行呢
1号演示站点：http://1.test.lmb520.cn/
这是原作者搭建的：https://status.baiwumm.com/

搭建顺序

我们这里使用的是由白雾茫茫基于UptimeRobot编写的源码：

  1. 我们进入Github项目，然后下载项目源码
  2. 改写.env文件
    Screenshot_2023_1225_081225.png
    第7、8行里的VITE_API_KEY一定要改成自己UptimeRobot账号里的Read-Only API Key（不改就是监测作者的网站）
    Screenshot_2023_1225_081544.png
    Screenshot_2023_1225_082119.png
  3. 将打包后的文件上传至网站空间或者直接使用 Vercel 或者 Cloudflare 直接部署该项目

构建项目

你下载的源码，不可以直接上传到空间里，需要自行构建打包项目。然后才可以上传到空间使用PHP进行建站
不会构建打包的话，可以百度。实在不行的话，可以把.env文件修改后通过邮箱（lmb@lmb520.cn）发给我并在本文评论一下发送邮箱（不然我怕看不到）

  1. 安装环境（不可以跳过）

    # 若没有 pnpm
npm install pnpm -g
# 安装依赖
pnpm install

  2. 进行开发（可以跳过这一步）

    pnpm dev

  3. 最后打包（不可以跳过）

    pnpm build
  4. 最后构建成功的源码会在dist文件夹，然后上传到空间上就可以了
    Screenshot_2023_1225_083733.png
]]> 3 https://blog.lmb.blue/archives/770/#comments https://blog.lmb.blue/feed/tag/%E5%BB%BA%E7%AB%99/