Loading / 加载中

Loading fonts and styles from Cloudflare...

正在从 Cloudflare 加载字体和样式资源...

Hugo + Waline + Vercel Comment System & Google Fonts Optimization

VerifyBench build log: deploying a Waline comment system on Hugo with Vercel and Neon, and speeding up Google Fonts with domestic mirrors.

Improving the Blog Website

After finishing the initial blog setup, I couldn’t wait to push this site into the internet world. For me, most information comes from search engines. I’ve seen many excellent websites that brought me endless help — platforms like Zlibrary and rutracker.org gave me a lot of assistance. Right after I was freed from the college entrance exam, I quickly came into contact with AI, a powerful tool that co-works with people to some extent — in my mind it counts as an intelligent search engine (thanks to AI vendors for free consumer access).

在我完成前面的博客建立之后,我迫不及待地准备将这个网站推送到互联网世界里。对我来说,信息的获取大多数都是从搜索引擎中来的。我见过很多优秀的网站,为我带来了不尽的帮助,比如说https://z-lib.pub/ rutracker.org 等等平台都给了我很多的帮助。在我刚刚从高考解脱出来之后,我很快地又接触到了AI这一强大的工具,它一定程度上与人co-work,在我心中称得上一个智能搜索引擎(感谢AI厂商们的C端免费使用)。

My youth never saw much in the way of clubs or communities — that’s a regret. I tend to gather what I need from a wide range of information rather than joining groups. Now the urge to join a community is growing stronger, yet I don’t know where to start. Building this website is my first step in leaving a mark of my own. Because of work and personal inertia, I can’t frequently contribute to others’ projects in the community, but I want to give myself a chance to maintain my own site.

我的青春没有见到什么社团和集体,这是一个遗憾,我也倾向于从广泛的信息中获取自己想要的内容,而非加入社群,现在加入社群的想法日益强烈,我却不知从何开始。建立这个网站是我留下自己印记的第一步,因为工作时间的挤占和个人的惯性,我无法频繁地在社区中为他人的项目做出贡献,但我希望给自己一个机会来维护自己的网站。

Has this brought me closer to what I want, or further away? I can’t say. Deep reflections on this I’ll put in the culture section of verifybench.

这离我想要的变得更近了还是更远了?我不得而知,关于这部分的深入思考我将放在verifybench的culture栏中。

The Idea Born from Ad Promotion, Killed by Registration

At first I had no awareness that websites needed to be submitted to search engines — I thought search engines could just find them on their own. The idea came to me while referencing a site I knew: https://www.plcjs.net/

我一开始没有把网站推送到搜素引擎中的意识,我还以为搜索引擎本来就可以搜到。产生这个想法是因为我在制作博客的时候参考了一个我了解的网站:https://www.plcjs.net/

In that site’s privacy policy, I noticed the cookies and third-party services section mentioned Google AdSense (ad delivery) and analytics. I quickly realized this was a way for websites to earn money. I asked DeepSeek, and it told me Google tracks page views and pushes ads based on that to calculate revenue. I realized that if I don’t set up Google AdSense, there definitely won’t be ads pushed to my site (unless I’ve already become a huge portal).

在这个网站的隐私政策中,我注意到Cookie与第三方服务中提到,本站接入了Google AdSense(广告推送)和统计分析服务。很快地,我意识到这是网站能够盈利的一种方式,我询问deepseek,它告诉我Google会统计分析网页的浏览情况并由此推送广告和计算收益。我意识到如果我不设置Google AdSense,那也肯定不会有广告推送到我的网站上(除非我已经自成门户并且规模庞大)

Once I had this awareness, I naturally thought about how to get my site noticed. I asked DeepSeek (unfortunately its server crashed on the morning of 2026-10-15 — I was already eager to learn more about other people on the internet). Anyway, it recommended an article from Juejin, but I lost my browsing history.

当我有了这个意识之后,自然地就想到了如何能让我的网站被浏览到。我询问deepseek(很不幸地是它在26.10.15早上服务器崩溃了,我已经迫不及待地想要了解更多互联网上的其他人了),总之它给我推送了一篇稀土掘金的内容,但是我遗失了浏览记录。

But when I thought about not having an ICP registration, my head started to ache. I didn’t buy the domain from a domestic registrar, nor is it hosted on a domestic server. A wave of cold feet surged up inside me, and amid a chorus of self-mockery I vanished.

但是我一想到我的网站没有ICP备案就感到一阵头疼,我又不是境内注册商里购买的,又不是境内服务器托管的,我的内心涌起一阵退堂鼓然后在一阵嘲笑声中我消失了。

Building the Blog Layout

The second reason for cold feet was that Baidu’s webmaster platform asked me to choose website categories, but I had no idea what my site actually was. Once again I faced the identity problem bare and didn’t know where to start. I wanted to find a model website and imitate it.

退堂鼓还有第二个原因,是百度的站长平台要我选择自己的网站标签,但我不知道自己的网站到底算什么,我再一次赤裸地面对了身份认同问题而不知从何下手。我想给自己找一个模范网站并效仿它。

I chose rutracker.org, because it gives me a feeling of being comprehensive, well-organized, reliable, and open. I’m actually a mechatronics engineering student — my undergraduate coursework covers a very wide range: mechanical, automatic control, electronics, and some introductory electrical engineering. So unlike the many software engineers who blog (forgive me for not knowing what to call you), I want my site to have a down-to-earth side.

我选择的就是rutracker.org这个网站,因为我觉得它给我一种全面、规范可靠又开放的感觉。我实际上是机电工程相关的学生,本科学的内容非常杂乱,机械、自动控制、电子和电气的一些入门知识等,所以说不同于大量做博客的软件工程师们(原谅我不知道该怎么称呼你们),我希望我的网站中有现实的一面。

Using Mimocode to help me make multiple revisions (because I didn’t want to spend too much time on layout and learning conventions), I settled on the current layout: entering the site shows Recent Posts, the sidebar has category sections, the footer has my contact info, and standard things like privacy policy. It looks pretty much like most people’s blogs — the only difference is my categories look very unlike a software engineer’s.

利用Mimocode帮助我进行多次修改(因为我也没想花费太多时间在确定版式还有学习它的规范上),我确定了现在的布局,进去直接现实Rencent Posts,左侧是分栏,底部有我的联系方式,还有隐私政策等常规网站所包含的内容。这看起来和大多数人的博客都差不多,唯一不同的是我的分类看起来很不像是软件工程师。

After that I decided to make it look more like a proper website — added some “brand messaging”, added a simple favicon as a logo (at first I didn’t understand why my site only had text in the tab bar without that little icon). Of course, I think a comment system is essential too. But when I saw GitHub I backed down again. I wanted something that could let most people who aren’t as familiar with GitHub as I am leave comments and stay in touch.

在这之后我决定让它看起来更像一个网站——加上一些"品牌宣言",加入一个简单的favicon作为logo(一开始我也不知道为什么我的网站在标签栏只有文字而没有那个小标识),当然我认为评论功能也是必不可少的,但我一看到Github就又打退堂鼓了,我想弄一个能让大多数像我这样不那么了解Github的人也能在我的网站下评论和保持联系。

PS: Although I soon discovered it was because I was unwilling to pay for frequent VPN use and would get a headache looking at GitHub’s dark English interface. After using github-chinese, the language barrier problem was solved.

PS:虽然我很快发现是因为我不愿意为频繁VPN支付费用,也看到Github的深色英文界面就头疼,在使用https://github.com/maboloshi/github-chinese这个项目之后,我便解决了语言不通的问题。

Comment System

I didn’t plan to set up a server at the start of building the site, nor did I want to over-rely on GitHub. Although I’d wonder if this meant completely distancing myself from the blogosphere, I could only tell myself to publish enough useful content first. I did a quick search and decided to use Vercel for hosting. At first I wanted Twikoo — I copied Twikoo’s GitHub repo link into Vercel, but during cloning it showed that Twikoo v2’s official monorepo requires Node.js >=26, while Vercel supports up to 24. To continue using it, I’d have to separately modify my fork’s package.json. I didn’t know what consequences that would have, so I switched to Waline.

我不打算在网站的建立之初就弄一个服务器,也不想过度一来Github,虽然我也会怀疑是否这样就彻底远离Blogs圈子了,我只能告诉自己先在这上面发布足够有用的内容。我简单搜索了一下,决定用 Vercel 托管,一开始我打算用Twikoo,我把Twikoo的Github仓库链接复制到Vercel里面,但是cloning的时候显示 Twikoo v2 官方 monorepo 要求 Node.js >=26,Vercel 最高只支持 24,如果想继续用要单独修改我的 fork 的 package.json。我不知道修改这东西会有什么后果,所以我就换了Waline服务端。

Turns out I hit a similar problem: Waline v1.41.5 had a dependency compatibility issue — html-encoding-sniffer used require() to load an ESM module, which new Node.js doesn’t allow. But I found a one-click deploy and complete tutorial for an older version on Waline’s official site at waline.js.org. Along the way I also discovered it uses Neon as the database, and the whole process ran through.

结果还是遇到相似的问题了,Waline v1.41.5 的依赖兼容性问题:html-encoding-sniffer 用了 require() 加载 ESM 模块,新版 Node.js 不允许。但是我在Waline的官网上找到了旧版本的一键部署和完整教程https://waline.js.org/guide/deploy/vercel.html,顺带还发现它选择用Neon做数据库,整个流程都跑通了。

Finally the comment system was successfully set up. Just a nickname, email, and website link is enough to leave a comment.

最终成功完成了评论系统的建立,仅需要昵称、邮箱和网站链接就可以留下评论。

Resource Submission and Peripheral Optimization

Search Engine Resource Submission

This Zhihu tutorial explains how to submit your resources to Baidu, Google, and Bing. I followed the steps one by one and quickly completed website submission to Google, Bing, and Baidu search engines.

https://zhuanlan.zhihu.com/p/81652862330在这篇教程中提到了如何去百度、Google、Bing这三个搜索引擎中推送自己的资源。我按照步骤一步步来,很快完成了网站提交至Google、Bing和百度搜索引擎。

Speed Optimization

The site loaded slowly, but my site didn’t really have much in it. At first I wanted to make a loading screen so visitors would have more patience waiting (what a patient webmaster I am). So I told the AI I wanted a page showing roughly how much loading time was left. MimoCode told me it would display: “First visit needs to load resources, takes 3-8s.” I was confused — what resources do I need to load? Isn’t there just the one HelloWorld post?

网站的打开速度很慢,但我的网站里其实根本没什么东西,一开始我希望写一个加载界面让访客能有更多耐心等待网页打开(我真是一个很有耐心的站主啊),于是我和AI说要增加一个显示加载时间大概还有多久的页面。MimoCode告诉我会在加载页面显示:首次启动需要加载资源,需要3-8s。我感到很困惑,我有什么资源需要加载吗……整个网站上不就只有HelloWorld的那一篇吗。

So I asked it to dig deeper. It turned out the Stack theme uses Google Fonts (fonts.googleapis.com + fonts.gstatic.com), which loads very slowly in China’s network environment. During further investigation it also found that the Waline comment system’s emoji (your-waline.vercel.app) might be affected by network issues too. So both were switched to domestic mirrors, greatly speeding up page load times.

于是我让他进一步分析原因,了解到Stack这个主题里面用了Google Fonts (fonts.googleapis.com + fonts.gstatic.com),而这个在中国网络环境下加载的很慢,并在继续排查的过程中发现your-waline.vercel.app这个评论系统的表情可能也会受到网络影响,于是把这两个都换成国内的镜像,极大地加快了网页的打开速度。

While searching about building websites, I discovered many blog sites that — miraculously — like me, first shared their entire site-building experience (suddenly I feel so unremarkable…). Their blogs seem to follow a programmer’s way of thinking: they don’t call it “Recent Posts” but “Archive”, don’t use categories but “tags”. Though I don’t quite understand all of this, their blogroll links are something I really want to learn from.

我在搜索建立网站的过程中,发现有好多Blogs网站,他们竟然奇迹般地和我一样,也先是分享自己建站的整个经历(突然感觉我变得平平无奇了呢……)。他们的博客似乎遵循一套程序员的思路,大家不叫Recent Posts,而是叫Archive,不用分类,而是用tags,虽然这些我都不是特别看懂,但是大家的友情外链是我非常想要学习的。

The first one is the amazing Moe ICP registration at icp.gov.moe. When I was feeling insecure about not having ICP registration, I suddenly saw a Moe ICP on someone else’s blog — wow, I want one too! I quickly picked an ICP number: 20267654. It’s quite a nice number and I’m satisfied, though I should publish more useful content to make the site valuable.

第一个是神奇的萌国ICP备案https://icp.gov.moe/,我因为没有ICP备案感到一阵自卑的时候,突然在别人的Blogs上看到了一个萌ICP,哇,我也想要这个。我很快在里面挑选了一个ICP号:20267654,这个号也算是一个靓号,我很满意,不过我得多发点有用的内容,促使网站变得有价值了。

Next there’s Travellings, but currently my site doesn’t have enough content to apply. I suppressed the urge to join these people and decided to continue improving the site’s content first, hoping it can be found by more searches. Otherwise I could waste a lot of time just on site architecture.

后面就是一些https://www.travellings.cn/docs/join,但是目前本站的内容还没有到申请的数量,我压抑了自己加入这一批人的欲望,决定先继续完善网站的内容,以期能被更多搜索到,否则光是在网站的架构上我就能浪费不少时间。

Finally

From this post onward, the site’s comment system is live. Friends who’ve read this far, could you help test the comment system on this site?

从这篇推送之后就可以使用网站的评论系统了,浏览到这里的朋友可以帮忙测试一下本网站的评论系统吗~?