Hugo博客搭建笔记 - Ivo's Inkwell

概述#

之前我博客为了图省事一直使用的是Publii进行搭建的，但是后来出现了很严重的性能以及备份的问题。Publii的逻辑是需要在本地生成完整的静态博客内容，随后使用git进行提交，但是这样就存在两个非常重要的问题，备份与同步——我们一般都是一个台式机和一个笔记本的组合，两台机器想要同步之前更改的内容就必须要有同步，虽然我在家使用NAS+Syncthing的方案可以解决同步的问题，但是外网终归以来家中主路由的稳定性，之前同步就会经常性的在外面掉线，同步一些其他资料其实没有什么问题，但是博客的小文件多，需要很强的稳定性，所以我决定换一个博客框架吗，在搭建社团博客的时候使用Hexo发现Node.js安装的十分繁琐，使用简单的单文件的Hugo对于我这种不喜欢残留的人来说或许才是最好的方案。在使用Hugo之后发现了不少很喜欢的地方，也踩了不少的坑，我也会一一说明。

博客搭建预览与主题安装#

搭建#

准备文件：

Hugo二进制文件

搭建新网站#

解压出hugo.exe文件

打开命令行窗口

输入

1
hugo new site [你网站的名字]

即可看见网站的目录

安装主题#

我用的是Blowfish主题，如果你是用其他主题安装是一样的方法，但是配置文件是不一样的，需要去官方的GitHub项目说明中查看。

下载主题

打开 Hugo官方主题商店 选择自己喜欢的主题，去到官方GitHub项目页面下载即可。Blowfish主题点我下载即可。

如此方法下载：

下载后解压，重命名为blowfish并放置在博客的themes目录下

进入blowfish目录将exampleSite目录拷贝至博客根目录即可

预览#

将hugo.exe二进制文件拷贝至博客根目录，打开cmd窗口

输入

1
hugo server

即可在

1
localhost:1313

查看。

优点与踩坑#

优点#

对于我来说，这算是找到了一开始搭建博客的初衷，很多地方能够直接自己自定义。还有一个是性能方面，没办法，这个必须要有对比才能体现，我也不想证明什么。

主页

我的主页上面我做了友链这么个东西，这个是几乎很多博客不会做的，是的，这个就是我和AI一起搓出来的，不过最后明暗主题切换我确实不会，也只好交给AI去做了。

这便是我的_index.zh-cn.md文件，做个参考吧

1
---
2
title: "欢迎来到 Blowfish! :tada:"
3
description: "此页面是使用 Hugo 的 Blowfish 主题搭建的"
4
---
5

6
<!-- <div id="typing-text" style="background-color: transparent; min-height: 1.5em; font-size: 18px; font-weight: bold; text-align: left;"></div>
7

8
<script>
9
document.addEventListener('DOMContentLoaded', function () {
10
  const message = "致我们：\n愿我们都能在各自感兴趣的事情上找到更好的自己！\n\n尘.";
11
  const element = document.getElementById("typing-text");
12
  let index = 0;
13

14
  // 光标
15
  const cursor = document.createElement('span');
16
  cursor.classList.add('typing-cursor');
17
  cursor.textContent = '|';
18
  element.appendChild(cursor);
19

20
  // 光标样式
21
  const style = document.createElement('style');
22
  style.textContent = `
23
    .typing-cursor {
24
      opacity: 1;
25
      animation: blink 1s infinite;
26
      margin-left: 2px;
27
    }
28
    @keyframes blink {
29
      0%, 100% { opacity: 1; }
30
      50% { opacity: 0; }
31
    }
32
  `;
33
  document.head.appendChild(style);
34

35
  function typeWriter() {
36
    if (index < message.length) {
37
      const currentChar = message.charAt(index);
38

39
      if (currentChar === '\n') {
40
        const br = document.createElement('br');
41
        element.insertBefore(br, cursor);
42
      } else {
43
        const char = document.createTextNode(currentChar);
44
        element.insertBefore(char, cursor);
45
      }
46

47
      index++;
48
      setTimeout(typeWriter, 150);
49
    } else {
50
      // 结束后隐藏光标
51
      cursor.style.animation = 'none';
52
      cursor.style.opacity = '0';
53
    }
54
  }
55

56
  setTimeout(typeWriter, 500);
57
});
58
</script> -->
59

60
<div id="friends-links" style="margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;"></div>
61

62
<script>
63
document.addEventListener('DOMContentLoaded', function () {
64
  // 友链数据（自己替换 logo 地址）
65
  const links = [
66
    { name: "云泽の小屋", desc: "最好的朋友，他的博客是世界上最详细网络安全实践笔记！", url: "https://zeyun.dpdns.org", logo: "https://zeyun.dpdns.org/media/website/Happy_Mac.png" },
67
    { name: "猪老师在线", desc: "最有趣的老师，网络安全没人比他讲的更好！", url: "https://www.pigteacher.com", logo: "https://www.pigteacher.com/wp-content/uploads/2025/01/cropped-1-128x128.jpg" },
68
    // { name: "设计工坊", desc: "美学与创意聚集地", url: "#", logo: "https://via.placeholder.com/32" },
69
    // { name: "旅行日记", desc: "走遍山川湖海", url: "#", logo: "https://via.placeholder.com/32" },
70
    // { name: "阅读空间", desc: "文字与思想的旅途", url: "#", logo: "https://via.placeholder.com/32" },
71
    // { name: "摄影集", desc: "定格每一刻温柔", url: "#", logo: "https://via.placeholder.com/32" }
72
  ];
73

74
  const container = document.getElementById("friends-links");
75

76
  // 样式：完全保留你原来的！只加了最外层布局
77
  const style = document.createElement('style');
78
  style.textContent = `
79
    /* 浅色模式 */
80
    .friend-card {
81
      padding: 20px;
82
      background: rgba(255, 255, 255, 0.6);
83
      backdrop-filter: blur(12px);
84
      -webkit-backdrop-filter: blur(12px);
85
      border-radius: 10px;
86
      border: 1px solid rgba(0, 0, 0, 0.05);
87
      transition: 0.2s ease;
88
      text-decoration: none;
89
      color: #111827;
90
      /* 关键：图片 + 文字 横向排列 */
91
      display: flex;
92
      align-items: center;
93
      gap: 12px;
94
    }
95
    .friend-card:hover {
96
      background: rgba(255, 255, 255, 0.8);
97
    }
98

99
    /* 深色模式 */
100
    html.dark .friend-card,
101
    .dark .friend-card {
102
      background: rgba(30, 30, 32, 0.6);
103
      border: 1px solid rgba(255, 255, 255, 0.05);
104
      color: #f3f4f6;
105
    }
106
    html.dark .friend-card:hover,
107
    .dark .friend-card:hover {
108
      background: rgba(40, 40, 42, 0.75);
109
    }
110

111
    /* logo 样式 */
112
    .card-logo {
113
      width: 32px;
114
      height: 32px;
115
      border-radius: 6px;
116
      object-fit: cover;
117
      flex-shrink: 0;
118
    }
119

120
    /* 文字容器 */
121
    .card-text {
122
      flex: 1;
123
    }
124

125
    .friend-name {
126
      font-size: 16px;
127
      font-weight: 600;
128
      margin-bottom: 6px;
129
      color: inherit;
130
    }
131
    .friend-desc {
132
      font-size: 13px;
133
      line-height: 1.4;
134
      opacity: 0.85;
135
      color: inherit;
136
    }
137
  `;
138
  document.head.appendChild(style);
139

140
  // 生成卡片（只加logo，其余完全不变）
141
  links.forEach(item => {
142
    const card = document.createElement('a');
143
    card.className = "friend-card";
144
    card.href = item.url;
145
    card.target = "_blank";
146
    card.rel = "noopener noreferrer";
147

148
    card.innerHTML = `
149
      <!-- logo 在最左侧，文字整体在右侧 -->
150
      <img src="${item.logo}" class="card-logo">
151
      <div class="card-text">
152
        <div class="friend-name">${item.name}</div>
153
        <div class="friend-desc">${item.desc}</div>
154
      </div>
155
    `;
156
    container.appendChild(card);
157
  });
158

159
  // 监听主题切换
160
  const observer = new MutationObserver(() => {
161
    document.querySelectorAll('.friend-card').forEach(c => c.style.color = '');
162
  });
163
  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
164
});
165
</script>

文章

这个功能我可能不太能够用的上，就是Google的Firebase后端用于统计查看人数的，不过阅读者是国内网络根本不会统计，还有就是我对于数字计量阅读热度很讨厌，所以可以看个人需求进行更改。

踩坑#

我觉得这应该是我才过路径这些东西里最大的一个坑。

GitHub

这个是GitHub上面我的零碎随笔目录

本地

这个则是我本地的。

也就是说，上传GitHub之后所有的大写字母全部是小写，所以文章引用图片路径全部要是小写

总结#

总体算是比较成功的博客迁移，这也让我再一次学到英文路径只有小写的道理，在之前其实GitHub根本不支持中文路径的，现在相比之前会好很多了。