本文是一篇从零开始的无比详细的Hugo 建站实战保姆级教程。通过对 Ladder 主题的配置，你将收获一个具备极简美学且功能大满贯的个人站： 它不仅支持 Giscus 异步评论、留言板、社交媒体账号跳转、多维标签云与自动归档，还免费集成了一套完全自主掌控的Umami 私有化流量分析看板，并能学会无需服务器将整个静态网站免费部署到github page上的方法。github page配置失败，遭遇 Vercel 风控、Netlify 数据库连接及 IPv6 不兼容等一系列的硬核报错, 尝试Netlify + Supabase，作者建站的过程历经千辛万苦，主要都是在解决各式各样的报错，而现在将踩出来的坑为后人一一铺平。

Hugo 搭建个人博客

情况概述：

大一上完成了基础的网站搭建，其实就是跟着教程一步一步做，再在遇到文中没有提到的问题的时候通过开源社区/阅读配置文件/问ai解决问题，由于当时并没有做出记录，现在很多东西也不记得了（），但是记得似乎是困难重重

看的教程

文后附转载

请先跟着贴出的教程链接或者我在文后的转载完成初步的建站，然后再阅读我的配置教程进行进一步的配置。

在看后面的教程的时候，如果遇到问题，可以在我前面的配置文档里寻找答案，找不到的话可以ATFAI()/去技术社区搜索关键词/去B站搜教程/或者在下方评论区留言

配置

研究怎么配置使用到的tools：配置说明 + gemini(问每个配置有啥用)

修改hugo.toml 文件

（官方文档中使用的是yml，我把它转成了toml）

baseURL = "https://hugo-ladder.pages.dev" #网站发布后的网址
title = "LADDER" #浏览器标签页上显示的网站名称
theme = "hugo-theme-ladder"
license = "MIT"
licenselink = "https://github.com/guangzhengli/hugo-theme-ladder/blob/master/LICENSE"
description = "A fast, clean Hugo theme" #网站的简短描述,SEO（搜索引擎优化）的关键
homepage = "https://hugo-ladder.pages.dev"
defaultContentLanguage = "en"
googleAnalytics = "G-xxx" #Google 统计（GA4）的衡量 ID,有谷歌analyticas账号可以用这个抓取
[pagination]
  pagerSize = 10  #控制首页或列表页每页显示的文章数量，超过 10 篇将自动分页

补充：解决html报错

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

1. 基础资料与全局样式 ([params])

这一部分控制网站侧边栏或页脚展示的个人名片信息。

[params]
brand = "HOME"                      # 网站左上角的文字 Logo/品牌名称
avatarURL = "/images/avatar.png"    # 头像图片路径（存放在 static/images/ 目录下）
author = "Hugo Ladder"              # 作者姓名
authorDescription = "..."           # 作者简短描述（通常显示在头像下方）
info = "..."                        # 网站或个人的详细介绍信息
favicon = "/images/avatar.png"      # 浏览器标签页的小图标
darkModeTheme = "data-dark-mode"    # 夜间模式的主题属性名称，该主题内有两个，一个是默认的 data-dark-mode 主题，另一个是 icy-dark-mode 深色主题

  [params.options]
  showDarkMode = true               # 是否在页面上显示“昼夜模式”切换按钮
  enableImgZooming = true           # 是否开启文章内图片的点击放大功能
  enableMultiLang = true            # 是否开启多语言支持功能

2. 评论系统配置 ([params.comments])

主题支持多种评论插件，这里主要配置了 Giscus。

Giscus 是将评论存储在 GitHub 仓库的 Discussions 中。

1. 外部准备工作

1. 准备仓库：创建一个公开（Public）的 GitHub 仓库（或者使用你存放博客代码的仓库）。
2. 开启 Discussions：进入该仓库的 Settings -> 勾选 Discussions。
3. 安装 Giscus App：访问 giscus.app，安装并授权它访问你的这个仓库。
4. 获取参数：在 giscus.app 页面向下滚动，输入 所有者/仓库名，页面会自动生成以下关键值：
   • repo-id
   • category (建议选 Announcements)
   • category-id

2. 修改 hugo.toml 配置

将获取的值填入hugo.toml的以下对应位置：

[params.comments.giscus]
enable = true                       # 是否启用 Giscus 评论（基于 GitHub Discussions）
repo = "username/repo"              # 存放评论的 GitHub 仓库名
repo_id = "xxx"                     # 仓库的唯一 ID
category = "Announcements"          # 评论存放的讨论区分类
category_id = "xxx"                 # 讨论区分类的 ID
mapping = "pathname"                # 评论与文章的对应关系（按页面路径匹配）
position = "top"                    # 评论输入框相对于评论列表的位置（顶部）
lang = "en"                         # 评论区的界面语言

补充

如果你坚持要用基于 Issues 的 Utterances，配置方式类似：

1. 在 GitHub 仓库中开启 Issues 功能。
2. 在 utteranc.es 获取 repo。
3. 在 hugo.toml 中将 params.comments.giscus.enable 设为 false，将 params.comments.utteranc.enable 设为 true 并填入仓库名。

[params.comments.utteranc]
enable = false                      # 是否启用 Utterances 评论（目前设为关闭）
repo = "username/xxx"               # 存放评论的 GitHub 仓库
issueTerm = "pathname"              # 评论映射方式

原理解释

1. 关于映射方式，对于 Hugo 博客，建议保持 pathname：

它会把每一篇文章的路径（如 /blog/first-post/）作为 ID。这样每篇文章下面都会有自己独立的评论区，互不干扰。

1. 在 “Discussion 分类” 这一栏，下拉选择 Announcements（推荐）。 选择后，下方的 <script> 代码会自动更新。 将新生成的 data-category-id（一串长字符）复制出来，填到 hugo.toml 的 category_id 中。

   建议选这个是因为在 GitHub 上，只有仓库管理员能在这个分类发主帖。这样可以防止乱发无关的讨论，保证只有通过你的博客页面才能创建新的评论区。

2. repo_id 和 category_id：是 GitHub 内部的唯一标识符。即使你以后改了仓库名字，只要 ID 对，评论就不会丢。

3. 数据统计与分析 ([params.analytics])

见ummami免费使用

[params.analytics.google]
SiteVerificationTag = "xxx"         # Google 搜索控制台（Search Console）的验证代码

[params.analytics.umami]
enable = true                       # 是否启用 Umami 网站统计分析
website_id = "xxx"                  # Umami 提供的网站唯一识别 ID
url = "https://xxx"                 # 部署好的 Umami 服务地址

获取 Umami 访问地址

1. 等待大约 1-2 分钟，直到 Umami 的状态变为“运行中”。
2. 点击进入 Umami 服务页面。
3. 在 “域名” (Domain) 栏目下，点击 “生成域名” (Generate Domain)。
4. 你可以输入一个你喜欢的二级域名。
5. 访问该域名，使用默认账号密码登录：
   • 用户名：admin
   • 密码：umami
   • 登录后记得第一时间在设置里修改密码！

接入你的 Hugo 博客

这步和你之前看的教程一致：

1. 在 Umami 后台点击 “添加网站” (Add Website)。
2. 输入你的博客名称和域名，获取 data-website-id。
3. 回到你的 Hugo 项目，打开 hugo.toml，填入信息：

   [params.analytics.umami]
     enable = true
     website_id = "你在 Zeabur 获取的 ID"
     url = "https://你在 Zeabur 生成的域名.zeabur.app"
   

由于我的手机号通不过vercel,最终的部署我选择了netlify,步骤供参考

1. 创建数据库

见后

Umami 自身不存储数据，它需要一个 PostgreSQL 数据库。

1. 访问 Supabase 官网，使用 GitHub 登录。
2. 点击 New Project，填入项目名称和数据库密码（务必记下密码）。
3. 等待几分钟数据库创建完成。
4. 进入左侧菜单的 Project Settings -> Database。
5. 找到 Connection string，选择 URI 模式。
6. 复制那串以 postgres:// 开头的地址。
   • 注意：将其中的 [YOUR-PASSWORD] 替换为你刚才设置的真实密码。
   • 注意：如果你的密码里含有特殊的标点符号（比如 !、@、: 等），直接放在 URL 里会破坏格式，导致 Netlify 部署时报错“Invalid URL”。

2. 在 Netlify 部署 Umami

1. Fork 项目：在 GitHub 上访问 umami-software/umami，点击右上角的 Fork，将其克隆到你的账号下。
2. 登录 Netlify：访问 Netlify，使用 GitHub 登录。
3. 新建站点：点击 Add new site -> Import an existing project。
4. 连接 GitHub：选择 GitHub，找到并选中你刚才 Fork 的 umami 仓库。
5. 配置构建参数（非常重要）：
   • Build command: yarn build
   • Publish directory: .next。
6. 配置环境变量 (Environment variables)：点击 Add variable，依次添加以下四项：
   • DATABASE_URL: 填入你在第一阶段获取并修改好的 Supabase 连接字符串。
   • APP_SECRET: 随便输入一串长随机字符串（用于加密，例如 yunsanwu789_secret_key）。
   • DATABASE_TYPE: 填入 postgresql。
   • SKIP_DB_CHECK：填入 true // 绕过检查，IPv4和IPv6协会不兼容
7. 开始部署：点击 Deploy site。 // 中间遇到了很多困难，比如我建站之后想登录老是报Unexpected end of JSON input，最后放弃了（）

3.初始化 Umami

1. 部署完成后，Netlify 会给你一个 xxx.netlify.app 的域名。点击访问。
2. 默认登录信息：
   • 用户名: admin
   • 密码: umami
3. 修改密码：登录后第一时间点击右上角头像 -> Settings -> Profile 修改密码。
4. 添加网站：在 Settings -> Websites 中点击 Add website，填入你的 Hugo 博客信息。
5. 获取代码：点击该网站条目旁的 Edit -> Tracking code，复制那一串 <script> 代码。

4.回到 Hugo 配置

打开你的 hugo.toml，将获取到的信息填入：

[params.analytics.umami]
  enable = true
  website_id = "从 Umami 拿到的 UUID"
  url = "https://你的名字.netlify.app" # 填入你的 Netlify 访问地址

4. 留言板与社交链接配置

在 Ladder 主题中，留言板实际上是一个开启了评论功能的特殊页面。

1. 创建留言板页面

在你的博客根目录下运行：

hugo new guestbook/_index.md

2， 编辑页面内容

打开 content/guestbook/_index.md，确保其 Front Matter（开头）如下：

---
title: "留言板"
layout: "guestbook"
---

注意：layout: "guestbook" 会告诉主题这个页面不需要显示文章正文，而是直接加载评论插件。

3. 关联菜单与配置

确保你的 hugo.toml 中有以下设置，以便用户能找到它：

[params.guestbook]
title = "留言板"
description = "欢迎在这里留下你的足迹。"

[[languages.en.menu.main]] # 或者 [[menu.main]]
name = "留言板"
url = "/guestbook"
weight = 4

社交媒体配置

  [[params.social]]                 # 社交媒体配置（GitHub）
  name = "GitHub"                   # 链接名称
  pre = '<svg ...>...</svg>'        # 显示在名称前的图标代码（SVG 格式）
  url = "https://github.com/..."    # 社交账号的跳转链接

  [[params.social]]                 # 其他链接（如数据仪表盘）
  name = "Dashboard"
  pre = '<svg ...>...</svg>'
  url = "https://xxx"               # 对应页面的跳转链接

图标可以在 feathericons.com 这个网站上找到

5. 语言与导航菜单 ([languages.en])

如果开启了多语言，菜单需要在对应的语言块下进行配置。

[languages.en]
languageName = "EN"                  # 该语言在切换菜单中显示的名称

[[languages.en.menu.main]]           # 顶部导航栏：文章/博客
name = "Blog"                        # 菜单显示的文字
url = "/blog"                       # 点击后跳转的路径（对应 content/blog 目录）
weight = 1                          # 排序权重，数字越小越靠前（左）

[[languages.en.menu.main]]           # 顶部导航栏：标签
name = "Tags"
url = "/tags"                       # 跳转到标签聚合页
weight = 2

[[languages.en.menu.main]]           # 顶部导航栏：归档
name = "Archive"
url = "/archives"                   # 跳转到文章归档页
weight = 3

[[languages.en.menu.main]]           # 顶部导航栏：留言板
name = "Guestbook"
url = "/guestbook"                  # 跳转到留言页面
weight = 4

6. 分类法配置 ([taxonomies])

定义 Hugo 如何对你的文章内容进行逻辑归类。

[taxonomies]
series = "series"                   # 开启“系列文章”分类功能
tag = "tags"                         # 开启“标签”分类功能

其他：导航栏

目前该博客支持 4 个默认页面、博客列表、标签、历史记录和留言簿。 可以通过修改 menu.main 来调整 name ；如果想在导航栏中添加新页面，请记住在根目录的 content 下添加相应的 markdown 文件。

其他：写帖子

如果要创建新帖子，建议填写配置信息，具体如下：

命令如下：

hugo new blog/<name>.md

title: 
date: {{ .Date }}
tags: []
series: [] # 文章将在内容下方显示相关帖子
featured: true # 是否在首页精选文章中 

• 补充：series填写文章名即可，用双引号包含，不同文章用逗号分隔,tags同理 date格式如2025-03-31T20:00:00+08:00

其他：SEO

前提是使用了geogle analytica来分析网站，配置这个可以使你的网站在geogle可以被搜索到。 该主题已针对搜索引擎优化 SEO 进行了优化，包括完善的 meta 标签信息等。此外，默认支持 Google Search Console ，可以根据文档生成 google-site-verification 到 params. analytics.google.SiteVerificationTag 。

使用Github Page免费部署站点

在这一步配置的时候我遇到了很多问题，在技术论坛和教程，ai间反复辗转之后，最后摸索出了自己的方式

我会先贴出官方配置的教程，看不懂的也可以去搜b站的教学，然后在后面给出我自己的解决方案hhh，事实证明前者在我这里可以跑不通但是后者可以（感觉到自己解决问题的能力有所提升！）

在gitbub创建以<username>.github.io为名称的仓库

在本地成功建站（终端运行hugo server）

使用 GitHub Pages 部署博客有两种方法，一种是直接推送到 GitHub Pages ，另一种是在 gh-pages 分支上生成静态页面代码。代码可在 https://github.com/guangzhengli/hugo-ladder-exampleSite/tree/master/.github/workflows 获取。

如果您没有克隆已配置的仓库： https://github.com/guangzhengli/hugo-ladder-exampleSite ，则需要创建一个新的文件夹 .github/workflows 并添加新的文件 gh-pages.yml 。

name: generate github pages to gh-pages branch

on:
  push:
    branches:
      - main ## Set a branch name to trigger deployment

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        # If you're changing the branch from main, 
        # also change the `main` in `refs/heads/main` 
        # below accordingly.
        if: github.ref == 'refs/heads/main'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

在项目根目录下输入以下命令。

git remote add origin https://github.com/username/username.github.io.git

git add .

git commit -m "feat: init blog site"

git push origin main

一旦我们确认推送成功，它会自动将代码构建到 GitHub Pages in Actions 所需的文件中，因此您可以访问此地址检查 workflow 是否成功运行。请务必将地址中的 username 替换为您的帐户名。 https://github.com/username/username.github.io/actions

如果 Actions 工作流成功，我们将创建一个名为 gh-pages 新分支。然后，前往仓库的设置中心，选择 Settings ”，然后选择 Pages ，再选择 Build and deployment -> Source ，并选择 Deploy from a branch 。之后，选择 gh-pages Branch 即可完成配置。

我当时应该是怎么试怎么问ai都找不到gh-pages分支hhh(好像是因为我的action实际没有构建成功)，当时还懂的比较少，问ai问了很久，最后还是没能解决这个问题

所以最后，我研究出来并采用了另一种方式 3. 将public文件夹中的内容上传到这个仓库

4. 关注github上的actions，问ai解决里面的报错 由于当时没有记录，我现在已经不记得自己当时做了什么了，大家可以自行解决（）

5. actions显示成功后，可以输入地址并浏览自己的网页啦！！

至此，大获成功！！

部署过程中有什么疑问可以在评论区留言

初步建站教程

回到文初

以下为引用和转载的教程，未作修改

hugo 介绍

Hugo 是一个快速且灵活的静态网站生成器，使用 Go 语言编写，代码仓库。

• 极快的构建速度：Hugo 是同类产品中最快的工具，平均每个页面构建时间小于1毫秒，即使是大型网站也能在几秒钟内完成构建。
• 强大的模板系统：内置预制模板，可快速完成SEO、评论、统计等功能，一行配置即可实现。同时，其基于Go的模板提供了足够的逻辑支持，能够构建从简单到复杂的各种网站。
• 多语言支持：原生支持多语言，为多语言站点提供了完整的i18n支持，与单语言站点具有相同的开发体验。
• 丰富的主题库：拥有300多个主题，涵盖多种风格和功能，用户可以根据自己的需求选择合适的主题，快速搭建出美观且功能强大的网站。

安装

参考文档

查看版本/验证安装成功：

hugo version
 

安装 Git：

由于后续下载 hugo 主题，以及部署的过程，均需使用到 Git，这里要求必须完成相关环境的安装。

git version

Ladder 主题

hugo-ladder 是一个简约的 hugo 主题，也是这个博客使用的主题，由 Ladder 这个 Git 仓库的作者维护，如果后续你有任何有趣的想法，可以为仓库贡献代码。

# 这个命令用于创建一个新的Hugo站点
hugo new site my-site
cd my-site
git init
# 这个命令用于将Hugo主题作为一个Git子模块添加到当前的Git仓库中，并克隆代码
git submodule add https://github.com/guangzhengli/hugo-theme-ladder themes/hugo-theme-ladder
echo "theme = 'hugo-theme-ladder'" >> hugo.toml
# 本地启动 hugo 服务
hugo server

接着会在默认的 1313 端口启动 hugo 的站点（我本地的1313被占用了，则随机分配了另一端口），当前站点内没有任何的内容。

自定义配置

首先我们来熟悉一下 hugo 的文件目录，也就是通过命令创建的 my-site 这个文件夹。

.
|-- archetypes
|-- assets
|-- content # 内容，后续博客文章将放置在这里
|-- data
|-- hugo.toml # 配置文件，菜单、评论、网站统计等所有功能，均可以通过直接配置进行开启
|-- i18n # 多语言
|-- layouts
|-- public
|-- resources
|-- static # 静态文件，如头像图片等
|-- themes # 所有主题以子文件夹的形式存放

文章

首先我们找到根目录下 archetypes 文件夹中的 default.md 文件，用下面的文件替代其中内容，这是用于控制创建新博客时的模板。

---title: 博客标题date: {{ .Date }}tags: []series: []featured: true---这是摘要 <!--more--> 这是内容

在根目录下通过如下命令，创建一篇博客：

hugo new blog/first.md

则会自动生成 content/blog/first.md 这篇博客。

菜单

接下来继续配置根目录下的 hugo.toml，创建几个菜单管理不同类目的博客。事实上，hugo 支持 toml 和 yaml 格式的配置文件，如果你并不习惯使用 toml，可以删除根目录的 hugo.toml，并创建 hugo.yml 进行相同配置的录入，也是可以生效的。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'hugo-theme-ladder'

[[menu.main]]
  name = "文章"
  url = "/blog/"
  weight = 1

[[menu.main]]
  name = "归档"
  url = "/archive/"
  weight = 2

[[menu.main]]
  name = "联系"
  url = "/contact/"
  weight = 3

[[menu.main]]
  name = "网站统计"
  url = "/xx/"
  weight = 4

这时候，你会发现，当点击文章的时候，可以看到博客列表，但是点击其他目录看不到，因为 content/blog 是第一篇文章的存放路径，所以文章菜单可以看到，所以后续文章的管理，只需要在创建的时候，指定对应生成的目录即可。

这时候，你看到 localhost:1313/ 目录下也能看到这篇博客，Featured Posts 表示的是主页的推荐文章，所有标志了 featured: true 的文章都可以在这里展示，而 featured: false 的文章，则只会在对应目录展示。

所以尝试将 /content/blog/first.md 这篇文章的 featured 设置为 false，你将无法在首页看到它了，但 localhost:1313/blog 依旧可以看到。

---title: 博客标题date: 2025-01-12T20:44:21+08:00tags: []series: []featured: false---这是摘要 <!--more--> 这是内容

更多定制化

尝试在 images 中导入一张图片 avatar.png，darkModeTheme 开启夜间模式，尝试修改网页的 logo等。

baseURL = "https://baize.github.io"  # 网站的 URL
languageCode = "zh"  # 网站语言代码
title = "白泽"  # 网站标题
theme = "hugo-theme-ladder"  # 使用的主题名称
defaultContentLanguage = "zh"
[params]
  brand = "主页"
  author = "白泽"
  authorDescription = "阅读｜思考｜产出｜进步"
  info = "从未停止对未知的探索，尝试分享一些有趣的东西"
  avatarURL = "images/baize.png"
  darkModeTheme = "data-dark-mode"
  favicon = "images/baize.png"

进行到这一步，你本地的站点应该与我的博客样式近乎相同，恭喜你几乎完成了所有博客本地的搭建工作了，后续更多功能的添加，完全依托于 hugo 强大的配置能力，以及你的聪明头脑（这个阶段，需要阅读 hugo 的配置文档）。

Umami 网站数据统计

这是一个有趣的内容， 当你完成接入之后，将获得如下的访客信息统计看板。

包括区域和设备分布：

工作原理

Umami 是一个简单、快速且开源的分析工具，用于跟踪网站的访问数据。它的工作原理主要包括以下几个步骤：

1. 数据收集：

• 当用户访问你的网站时，Umami 通过在网页中嵌入的JavaScript代码来收集数据。这些数据包括页面浏览量、访问时长、用户地理位置、设备信息等。
• 每次页面加载时，嵌入的JavaScript代码会发送一个请求到Umami服务器，携带收集到的数据。

2. 数据存储：

• Umami 服务器接收到数据后，会将其存储在数据库中。Umami 使用PostgreSQL作为其默认数据库，但也可以配置为使用其他数据库。
• 数据存储在数据库中，以便后续进行查询和分析。

3. 数据处理：

• Umami 服务器会对收集到的数据进行处理，生成各种统计信息，如页面浏览量、独立访客数、访问时长等。
• 这些统计信息会定期更新，以反映最新的访问数据。

4. 数据展示：

• Umami 提供一个管理界面，用户可以通过这个界面查看和分析网站的访问数据。
• 管理界面展示了各种图表和报告，帮助用户了解网站的访问情况。

Umami 免费部署

创建数据库

数据库用的是 supabase 提供的有限额的 postgres 数据库，创建一个 supabase 账号，新建一个项目，输入 Datebase password 即可创建数据库服务。

进入 database 菜单，点击 Connect。

记录下这里通过 Session pooler 接入数据库的方式（DATABASE_URL），下文 Umami 接入 DB 时注意替换密码为你创建的密码。

部署 umami

首先 umami 是开源的，访问它的 GitHub 仓库，将其 fork 为自己的 repo。

vercel 是一个现代的云平台，专注于前端开发和无服务器函数（Serverless Functions），提供快速部署、自动缩放和全球 CDN 支持。它特别适合部署静态网站、单页应用（SPA）、以及需要无服务器后端的项目。

vercel 提供了免费计划，虽然有一些限制（具体限额大家可以自行参考官网信息），目前支撑我们的网站分析功能是够用的。

登录 vercel ，创建一个的账号，建议使用 GitHub 账号注册登录，在 new project 中选择 import 你刚刚 fork 的 umami 项目。

编辑构建命令：

yarn build && yarn update-db

添加环境变量：

DATABASE_URL: 上一步从 supabase 获取
TRACKER_SCRIPT_NAME: baize

点击部署并等待：

在 vercel 部署完成 umami 后会得到一个 <deploy-id>.vercel.app ，默认登陆的账号密码是 admin 和 umami。

完成基础帐号配置后，点击侧边栏网站 Tab，点击添加网站。填写网站基本信息，可以勾选 enable share URL，这样任何人都可以访问这个数据看板。

Umami 接入 Hugo

在 Tracking code 中，我们拿到对应的 data-website-id 和 src 。

<script defer src="https://umami-jlwf.vercel.app/hugo-ladder" data-website-id="ec55b2da-4f55-45ef-8aed-26e57078fd15"></script>

将其填入主题配置中的 params.analytics.umami.website_id 和 params.analytics.umami.url 即可。

[params.analytics.umami]
  enable = true
  website_id = "ec55b2da-4f55-45ef-8aed-26e57078fd15"
  url = "https://umami-jlwf.vercel.app/hugo-ladder"

不要忘记将你的网站统计查看地址配置给菜单：

[[menu.main]]
  name = "网站统计"
  url = "https://umami-jlwf.vercel.app/share/ZKhEVgh56RlSfAMa/baize1998.github.io"
  weight = 4

至此你的站点在被访问的时候，会向部署的 vercel 的 umami 上报数据，任何人都可以跳转看到统计数据。

以上我们完成了本地博客的搭建以及网站数据统计能力的接入