折腾博客表里站复盘

type

Post

status

Published

date

Oct 1, 2025

slug

blog-site2

summary

虽然原本博客站点个人体感上加载速度还好，但从后台数据上看，确实改进空间较大，对于网络状况欠优的情形可能体验不佳。无意逛到了性能不错的，同样基于notion的博客项目，于是进行部署并在其基础上进一步做了一定的定制与改进，过程里为了与原博客知识库的兼容引入了隐藏部分文章的特性，考虑到其相比原博客少一定特性，同时空闲的域名也巧合不能在bing使用，仅能在google使用（意味着不能国内直接检索），且原站点被bing屏蔽，也没怎么做google index，恰好用来区分表（public）里（insider）站点。

速度对比

原博客动态站点测速移动端与桌面端

原博客静态站点(next build)测速移动端与桌面端

现博客（表站）测速移动端与桌面端

原博客切换主题后测试移动端与桌面端

表站建立过程

域名

首先备选的域名都来源于白嫖的cloudns三个域名，最新的是abrdns.com，但新的域名已经不支持托管CF。

作为已经托管的次选ip-ddns域名，虽然因为商业试用结束，已经不能再调整ALIAS字段，但对应到CF的Worker坑位是不变的，只需要重新修改CF后台反代的地址就可以了。

诡异的在于，google的search console可以录入ip-ddns的域名，但bing这边已经不允许，需要bing的收录就需要更换别的域名，不过另一方面来说，如果仅为google收录（仅海外检索），比较适合再做一个站点，放一些额外的内容，也就是做里站。

于是更改为复用原本的cloudns.ch域名，由于是注册比较早的域名，既可以用ALIAS，也可以托管CF，唯一的问题是没法删除已有的bing与google的记录。

最终计划使用cloudns.ch做表站 ip-ddns后续做里站

CamelliaV の Blog - Public

Java；前端；AI；

http://camelliav.cloudns.ch/

暂时使用vercel的做里站，恰好只允许海外访问

CamelliaV の BLOG | Java；前端；AI；ACGN；

Java；前端；AI；ACGN；

https://camelliav2.vercel.app/

部署

考虑到需要国内直连，只有三种方式：vercel+修改域名解析，netlify，CF绑域名（可选+HF Space），第一种可以排除，对于camelliav.cloudns.ch这样的域名，vercel要求在cloudns.ch这一级加，而vercel又不支持添加如blog.camelliav.cloudns.ch这一级的域名，所以排除。第二种netlify，完全可用，但移动端速度相对不稳定，时好时坏。第三种CF绑域名，稳定可用，最终选择。

netlify测速

项目使用：原项目里的版本设置有一定问题，直接部署HF Space与Vercel都不会成功，需要先做修改nodejs改为20.x版本，canvas改为3.1版本，并且clone一次到本地，把pnpm-lock重新生成一次，再使用。

原项目里的Dockerfile已经是3年前的东西，不能直接使用，可以自行尝试AI修改，以下附自用参考

定制与改进

基本的组件引入与配置：

utterances评论
bing收录（Google导入）
Google收录（域名验证）
clarity（自行修改代码引入）
bing indexNow（public加个txt）
sitemap（改baseUrl），参见blog.config.js相关修改

代码修改：clarity引入，标题与图片darkMode调暗，移动端的table of contents与progress bar

可进一步修改：代码块的行数显示与语言显示，折叠

以下按commit进行归类描述改动与如何解决issue中常见问题

1.部署报错

纯版本问题，clone到本地后按前两个commits修改，然后更新pnpm-lock提交

2.toggle组件不显示

这个很有意思，第一时间先去代码里看了一下

代码逻辑上没有问题，代码里写了toggle使用的自定义组件

转而想应该是依赖库的问题，考虑到项目比较久，隔壁notionNext也没这问题，try fix里先提交一次升级版本，然后并没有作用，但比较有意思的是netlify部署的toggle可以用，HF Space部署的里面的toggle不能用，重新检查一下两边的部署命令，netlify走的是pnpm，HF Space用的是在notionNext上改的Docker镜像，保留了yarn，这是唯一的差别。

转头回到package.json，看到了pnpm下patchedDependencies，左边还有个patches目录单独存放了react-notion-x的依赖，意味着实际上这两个库并不是额外install在node_modules的，而是代码库的一部分，使用修改的版本，并且是交给pnpm的配置，意味着如果不使用pnpm，比如yarn，npm都会因为使用的react-notion-x不匹配导致toggle渲染失败。属于是包管理器里藏代码了（