本文章是教程文章，可以按作者的步骤学习。

前言

介绍

  • 公网(外网) 即广域网，指的是公共网络，规模大，用户可以在不同地区访问公网的内容。
  • 内网 即局域网，规模一般在方圆几千米以内。正常情况下，家里的网络都是内网。内网里的设备可以访问内网的内容。如果内网的设备没有公网 IP，在公网上则无法访问内网。
  • Netlify Pages 也是一个静态网页托管平台，可以从 Github 上直接导入 Pages。
  • Frp 指的是内网穿透，它可以将内网的网站映射到外网，以供其他地区的用户使用。
  • Umami 是一个网站访问统计系统，可以自行部署，也可以用 Vercel + Cloudflare Workers 部署。

由于 Vercel 直接提供的地址和 Cloudflare Workers 在国内难以访问，因此国内选择本地部署 + Frp 内网穿透更好。
Vercel 连接自己的域名的确可以访问，本文章暂不叙述此内容。

Cloudflare Vercel 直接提供的地址
访问情况 访问情况

提示

  • 此过程包含不少访问国外网站的要求，如无法访问，请使用 Watt Toolkit 等加速软件。
  • 若有公网 IP 服务器，可以直接把 SSL 证书添加到 Nginx 反向代理中进行访问，详见文档 历程（三） 第一步 配置 Nginx
  • 步骤中的 “Umami” 不要拼错

要求

  1. 一台可正常运行的 Linux 主机（以 Ubuntu 为例）
  2. 能访问 Github 的网络 ( 可能需要 Watt Toolkit 等加速 )
  3. 一定的英语和 Linux 命令行知识储备
  4. 一个自己的域名

第一步 配置域名

由于其他方案配置域名的教程文档已经足够多，这里只讲 Netlify 方案

配置博客网站的域名（Netlify 方式）

  1. 在 Netlify 上注册账号。

  2. 点击 Project -> Add new project -> Import an existing project。

  3. 在跳出页面中点击 Github，找到自己的 Github Pages 并选中，填入 Project name 后若无其他需要配置的项目，下拉 Deploy，等待配置完成。

  4. 找到 Projects / 你刚刚的 Project name，进入后来到左侧 Domain management。

  5. 再找到 Add Domain -> Add a domain you already own 填入你的域名，并将要求的 TXT 记录添加至域名运营商的 DNS 配置里

  6. 等待 DNS 配置完成后回到 Netlify，点击 Add Subdomain / Add Domain 完成网站配置。

注意：刚配置完域名时，访问网站会出现 SSL 证书问题，需要等待一会，完成证书颁发后即可

第二步 配置 Umami

这里转到你的服务器。

安装 PostgreSQL (以 Ubuntu 以及有 apt 的系统为例)

安装 PostgreSQL

1
2
sudo apt update
sudo apt install postgresql postgresql-contrib

验证服务状态

1
sudo systemctl status postgresql

切换到 PostgreSQL 的默认用户

1
sudo -i -u postgres

进入数据库命令行

1
psql

创建数据库（如命名为 umami_db）

1
CREATE DATABASE umami_db;

创建数据库用户（如 umami_user）并设置密码（替换 your_password 为密码）

1
CREATE USER umami_user WITH ENCRYPTED PASSWORD 'your_password';

授予用户权限（让 umami_user 能操作 umami_db ）

1
GRANT ALL PRIVILEGES ON DATABASE umami_db TO umami_user;

退出 PostgreSQL 命令行并退出 postgres 用户

1
\q
1
exit

安装 Umami

由于博客引擎为 Hexo，对 Node.js 的熟悉程度较深，本文提供手动安装 Umami 的方式

安装 Node.js 和 Git

1
sudo apt install nodejs npm git -y

方案一 使用 Git 克隆

1
2
git clone https://github.com/umami-software/umami.git
cd umami

方案二 直接下载

引用站外链接
Umami
Github 地址

配置并启动 Umami

解压并移动到需要放置的文件夹，保证 README.MD 所在的一层在此文件夹内

1
cd < Umami 所在文件夹 >

安装依赖

1
npm install

创建环境变量文件并使用 nano 编辑

1
2
cp .env.example .env
nano .env

修改数据库配置 (其中 umami_user，your_password，umami_db 均为上文提到的内容，根据自己的情况配置)

1
DATABASE_URL=postgresql://umami_user:your_password@localhost:5432/umami_db

初始化数据库

1
npm run build

使用 yarn 把 Umami 封装成服务，并开机自启

新建服务配置文件
1
sudo nano /etc/systemd/system/umami.service

填入以下内容（根据实际修改）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[Unit]
Description=Umami Analytics Service
After=network.target postgresql.service  # 确保在网络和 PostgreSQL 启动后运行
Wants=postgresql.service

[Service]
User=<你的用户名>  # 替换为你的Linux用户名（非root）
WorkingDirectory=<umami 目录>  # 替换为Umami项目实际目录
ExecStart=<yarn 路径> start  # 启动命令（用 which yarn 命令查找 yarn 路径）
Restart=always  # 服务意外停止时自动重启
RestartSec=5  # 重启间隔时间（秒）
Environment=NODE_ENV=production  # 生产环境变量

[Install]
WantedBy=multi-user.target  # 多用户模式下开机启动

注意替换 你的用户名 和 Umami项目目录 为实际路径
可以通过 which yarn 命令确认yarn的安装路径，替换/usr/bin/yarn

设置服务并开机自启

重新加载 systemd 配置

1
sudo systemctl daemon-reload

启动 Umami 服务

1
sudo systemctl start umami

设置开机自启

1
sudo systemctl enable umami
验证服务状态

查看服务运行状态

1
sudo systemctl status umami

出现 active (running) 表示启动成功。

查看服务日志（排查错误用）：

1
sudo journalctl -u umami -f  # -f 表示实时跟踪日志
常用命令
1
2
3
4
5
6
# 关闭服务
sudo systemctl stop umami
# 重启服务
sudo systemctl restart umami
# 禁用开机自启
sudo systemctl disable umami

第三步 使用 Umami

登录 Umami 网页

在当前安装 Umami 的主机上打开 localhost:3000 以访问本地网站。

或者，如果该主机没有桌面 UI，可使用 内网其他设备 访问

打开 Umami 本地网站后的画面

完成后，填入默认用户名 admin 和 默认密码 umami ，登录后建议转到 Settings/Users 点击 Edit 更改密码。

创建网站统计

转到 Settings/Websites，点击 Add Website。Name 任意填写，Domain 填写你网站的域名。

创建网站统计

第四步 使用 Umami API

获取 Token

记住你的 Umami 用户名和密码，使用可发送与接收 POST 信息的工具，如 Hoppstoach（由于内网限制，若使用 Frp 方案，需要下载客户端）

POST 地址    (网站根目录)/api/auth/login
POST Request Body (json)

1
2
3
4
{
  "username": "你的用户名",
  "password": "你的密码"
}

如果网络、发送方法和发送内容正常，则会返回以下内容

1
2
3
4
5
6
7
8
9
10
{
  "token": "你的 API 密钥",
  "user": {
    "id": "...",
    "username": "...",
    "role": "...",
    "createdAt": "xxxx-xx-xxTxx:xx:xx.xxxZ",
    "isAdmin": true
  }
}

复制 API 密钥备用（不加引号）。

出现问题了？

  1. 报错 401 Not Authorized
    你的用户名或密码填错了！

  2. 报错 405 Method Not Allowed
    请检查一下你的发送方式是不是 POST！

API 信息获取方法以及返回内容

获取方法

来到你的 Umami 统计网站，登录，转到 Settings/Websites，点击 Edit，复制 Website ID 作为你的网站 ID。

使用 GET 方法（不能直接输入网址）请求
https://<你的 API 地址>/api/websites/<你的网站 ID>/stats?startAt=<开始时间戳(毫秒)>&endAt=<结束时间戳(毫秒)> ，并使用 Bearer Authorization，验证内容就是你的 API 密钥。

返回内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "pageviews": {
    "value": 555,
    "prev": 0
  },
  "visitors": {
    "value": 40,
    "prev": 0
  },
  "visits": {
    "value": 80,
    "prev": 0
  },
  "bounces": {
    "value": 32,
    "prev": 0
  },
  "totaltime": {
    "value": 24567,
    "prev": 0
  }
}
项目 pageview visitors visits bounces totalTime
含义 页面浏览数 访问人数 访问次数 仅访问单个页面的用户数 总用户访问时间