![合并.png](https://pic.mereith.com/img/1d0dd6572d4487e30d2366b6836eae61.%E5%90%88%E5%B9%B6.png)

> 项目主页: [https://vanblog.mereith.com](https://vanblog.mereith.com)<br/>
> 开源地址: [https://github.com/mereithhh/van-blog](https://github.com/mereithhh/van-blog)<br/>
> Demo 站: [https://blog-demo.mereith.com](https://blog-demo.mereith.com)<br/>
> 喜欢的话可以给个 star 哦 🙏



## 前因

我大二那年，第一次接触到了个人博客这个东东。看着别人炫酷的个人网站很羡慕，于是第一次买了一台云服务器，在网上到处搜教程，用 `hexo` 和 `next` 主题部署了我的第一版博客。

那时候抱着巨大的热情，我折腾了背景，折腾了 `live2d`，折腾了鼠标特效，等等。

但用了一阵子觉得有些很不方便。因为 `hexo` 这类的静态网站生成器本身是没有后台的，所以我必须用自己的方式写 `markdown` 文件、敲命令行、发布到网上（那时候还不会搞 CI/CD）。

后面我陆续尝试了其他带后台的博客系统，比如 `typecho` 、`wordpress` ，后者给我的感觉有些臃肿，前者感觉挺依赖主题的，很多也没有满足我的审美，有些特效加多了还挺卡，而且自带的编辑器和图床也没有很好用。

毕业的时候我用 `react` 写了一版带前后台的博客，`SSR` 渲染的博客，但是因为当时没有一个统一的规划，小问题不断，也不支持暗色模式，也没有内置图床，加载速度也并没有很快。

工作后闲暇时间，我又用 `gastby` 重构了一版博客，加载速度快了很多，但本质上 `gastby` 也是个静态页面生成器，而且每次发版都要全量构建。

## 后果

辞职后在家有时间了，我又想折腾一下博客，我的核心要求大概是：

1. 最好是静态页面（`SSG`），方便 `SEO` 和 `CDN`。
2. 要带一个方便的后台。
3. 要内置图床，支持剪切板上传图片，支持不同的图床。
4. 前后台都要支持移动端，都要支持暗色模式且能自动切换。
5. `SSG` 的话希望不要每次发版都全量构建。
6. 不要花里胡哨的特效，首屏加载一定要快。
7. 可以 `docker` 一键部署。
8. 支持访客统计和评论。

于是我调研了一番，发现现有的没有特别符合要求的，于是干脆自己写了一个，具有以下的特点：

- [x] 快到极致的响应速度，Lighthouse 接近满分。
- [x] 独一份的按需全自动 HTTPS，甚至不用填域名。
- [x] 包括完整的前后台和服务端。
- [x] 前台和后台都为响应式设计，完美适配移动端和多尺寸设备。
- [x] 前台和后台都支持黑暗模式，并可自动切换。
- [x] 前台为静态网页（SSG），并支持秒级的增量渲染，每次改动无需重新构建全部页面。
- [x] 静态网页，CDN 友好。
- [x] 基于 React，项目工程化，二次开发友好。
- [x] SEO 和无障碍友好。
- [x] 版本号展示和更新提醒。
- [x] 内置强大的分析功能，可统计访客等数据。并配有精美看板。
- [x] 内嵌评论系统。
- [x] 强大的 markdown 编辑器，支持图表和数学公式，一键插入 more 标记，一键剪切板及本地图片上传，
- [x] TOC、草稿、代码复制、访客数、评论数、分类、标签、搜索、加密、友链、打赏、自定义导航栏。
- [x] 多个布局设置，可自定义页面细节。
- [x] 支持自定义页面。
- [x] 可添加具有指定权限的协作者。
- [x] 高度客制化，可添加自定义 CSS、HTML 和 JS 代码。
- [x] 内置图床，并支持各种 OSS 图床、github 图床（外部图床基于 picgo）等。
- [x] 极致轻量化，没有花里胡哨。页面秒切换、图片懒加载。
- [x] docker 一键部署，支持 ARM 平台。
- [x] 支持 GA、百度分析
- [x] 简单易用的后台，支持数据的导出与导入。
- [x] 完善的 API，完全利用本项目后台和服务端，自己写前端或适配其他页面生成器
- [x] 有较完善的日志记录，后台可直接查看登录日志和 Caddy 日志。

我把它命名为 [VanBlog](https://vanblog.mereith.com)，有兴趣的话可以试一下哦。

> 项目主页:[https://vanblog.mereith.com](https://vanblog.mereith.com)
> 开源地址:[https://github.com/mereithhh/van-blog](https://github.com/mereithhh/van-blog)
> Demo 站: [https://blog-demo.mereith.com](https://blog-demo.mereith.com)

## 一键脚本部署

```bash
curl -L https://vanblog.mereith.com/vanblog.sh -o vanblog.sh && chmod +x vanblog.sh && ./vanblog.sh
```

其他部署方式和详细说明请移步 [项目文档](https://vanblog.mereith.com/guide/docker.html) 

PS: 不然的话每次改一点部署文档，所有平台都要改好麻烦233

## 预览图


![前台-白色.png](https://pic.mereith.com/img/2afb648e4cd43b8479bba29caa0f5679.%E5%89%8D%E5%8F%B0-%E7%99%BD%E8%89%B2.png)


![前台-黑色.png](https://pic.mereith.com/img/2658c90cda2f9a7ef69a9795d05ce6c7.%E5%89%8D%E5%8F%B0-%E9%BB%91%E8%89%B2.png)


![后台-白色.png](https://pic.mereith.com/img/7b343a679cdf9a51d6674b1f5ad45dd7.%E5%90%8E%E5%8F%B0-%E7%99%BD%E8%89%B2.png)


![后台-黑色.png](https://pic.mereith.com/img/cc4b603d6db746c3fb9b1a34beb74cbc.%E5%90%8E%E5%8F%B0-%E9%BB%91%E8%89%B2.png)

![](https://pic.mereith.com/img/7b0e81378a84eba82e4fbfde9cb5bc7d.clipboard-2022-08-27.png)

因为选择艰难症，自己写了一套开源博客系统

我有好几个集群，用 `PVE DataCenter Manager` 管理的时候，发现跳转有 bug。

比如我用 `https://pve.xxxx.com` （不用 8006 端口号），我在前端点 `Open WebUI` 跳转自动给我带上了 8006。

解法是登录到服务器，修改 `/usr/share/javascript/proxmox-datacenter-manager/index.hbs`，在 `head` 标签下面加入这个 `script` 标签。


```html
 <script type="text/javascript">
       (function() {
         // 判断字符串是否为IP地址
         function isIPAddress(host) {
             // IPv4地址正则表达式
             const ipv4Pattern = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
             if (!ipv4Pattern.test(host)) return false;
             
             // 验证每个段是否在0-255范围内
             const parts = host.split('.');
             for (let i = 0; i < parts.length; i++) {
                 const part = parseInt(parts[i], 10);
                 if (part < 0 || part > 255) return false;
             }
             return true;
         }
         
         // 判断是否以.top结尾
         function isTopDomain(host) {
             return host.endsWith('.top');
         }
         
         // 移除8006端口号 - 修复正则表达式
         function removePort8006(url) {
             return url.replace(/:8006(\b|\/|#|\?)/, function(match, p1) {
                 return p1; // 保留分隔符但移除端口
             });
         }
         
         // 处理URL函数
         function processUrl(url) {
             try {
                 const urlObj = new URL(url, window.location.href);
                 const host = urlObj.hostname;
                 
                 console.log("处理URL:", url, "主机名:", host, "端口:", urlObj.port);
                 
                 // 如果是IP地址，不做处理
                 if (isIPAddress(host)) {
                     console.log('IP地址链接，不做处理:', url);
                     return url;
                 }
                 
                 // 如果不是.top域名，且有8006端口，去除端口号
                 if (!isTopDomain(host) && urlObj.port === '8006') {
                     const newUrl = removePort8006(url);
                     console.log('已移除端口号，新URL:', newUrl);
                     return newUrl;
                 }
                 
                 return url;
             } catch (e) {
                 console.error('解析URL时出错:', e);
                 return url;
             }
         }
         
         // 立即覆盖window.open方法
         const originalWindowOpen = window.open;
         window.open = function(url, target) {
             if (url) {
                 console.log("拦截到window.open调用:", url, target);
                 // 移除对target的检查，无论是否有target参数都处理
                 const newUrl = processUrl(url);
                 if (newUrl !== url) {
                     console.log("调用原始window.open，参数已修改:", newUrl, target);
                     return originalWindowOpen.call(this, newUrl, target || "_blank");
                 }
             }
             return originalWindowOpen.apply(this, arguments);
         };
         
         // 初始化其他拦截器
         function initInterceptors() {
             console.log("初始化拦截器...");
             
             // 拦截所有链接点击事件
             document.removeEventListener('click', linkClickHandler, true);
             document.addEventListener('click', linkClickHandler, true);
             
             // 拦截location.assign
             const originalAssign = window.location.assign;
             window.location.assign = function(url) {
                 console.log("拦截到location.assign调用:", url);
                 return originalAssign.call(window.location, processUrl(url));
             };
             
             // 尝试拦截location.href设置
             try {
                 const originalLocationDescriptor = Object.getOwnPropertyDescriptor(Location.prototype, 'href');
                 if (originalLocationDescriptor && originalLocationDescriptor.configurable) {
                     Object.defineProperty(Location.prototype, 'href', {
                         set: function(url) {
                             console.log("拦截到location.href设置:", url);
                             return originalLocationDescriptor.set.call(this, processUrl(url));
                         },
                         get: originalLocationDescriptor.get,
                         configurable: true
                     });
                 }
             } catch (e) {
                 console.error('拦截location.href失败:', e);
             }
             
             console.log("拦截器初始化完成");
         }
         
         // 链接点击处理函数
         function linkClickHandler(event) {
             // 查找事件路径中的链接元素
             let element = event.target;
             while (element && element.tagName !== 'A') {
                 element = element.parentElement;
                 if (!element) break;
             }
             
             // 如果找到链接
             if (element && element.tagName === 'A') {
                 console.log("拦截到链接点击:", element.href, "target:", element.target);
                 
                 const newUrl = processUrl(element.href);
                 if (newUrl !== element.href) {
                     event.preventDefault();
                     console.log("阻止默认操作，使用新URL打开:", newUrl);
                     
                     if (element.target === '_blank') {
                         window.open(newUrl, '_blank');
                     } else {
                         window.location.href = newUrl;
                     }
                 }
             }
         }
         
         // 添加MutationObserver以监视DOM变化
         function setupMutationObserver() {
             console.log("设置MutationObserver...");
             
             const observer = new MutationObserver(function(mutations) {
                 // 当DOM变化时重新初始化拦截器
                 initInterceptors();
             });
             
             observer.observe(document.body, {
                 childList: true,
                 subtree: true
             });
             
             console.log("MutationObserver已设置");
         }
         
         // 初始化函数
         function initialize() {
             console.log("初始化拦截脚本...");
             initInterceptors();
             
             // DOM加载完成后设置MutationObserver
             if (document.body) {
                 setupMutationObserver();
             } else {
                 window.addEventListener('DOMContentLoaded', setupMutationObserver);
             }
             
             // 页面完全加载后再次初始化
             window.addEventListener('load', function() {
                 console.log("页面加载完成，重新初始化拦截器");
                 initInterceptors();
                 
                 // 延迟1秒再次初始化，确保WASM应用加载完成
                 setTimeout(initInterceptors, 1000);
             });
             
             console.log("拦截脚本初始化完成");
         }
         
         // 立即初始化
         initialize();
         
         // 添加到window对象，方便调试
         window.__interceptorFunctions = {
             initialize: initialize,
             processUrl: processUrl,
             isIPAddress: isIPAddress,
             isTopDomain: isTopDomain,
             removePort8006: removePort8006
         };
       })();
     </script>
```

PVE DataCenter Manager 端口号跳转错误修复

k8s + jenkins + gitlab 触发器

> 颇有感触，记录一下。 转载自： [theres-no-such-thing-as-software-productivity](https://www.benrady.com/2012/11/theres-no-such-thing-as-software-productivity.html)

正如马丁·福勒（Martin Fowler）所观察到的那样，程序员的编程生产力无法有效地衡量，因为它不存在。

软件开发并不是一项必然会产生任何东西的活动。

假设你有两个开发人员在同一个项目上工作，并且偶然地，他俩在同一天接受了相同的任务。

甲写了一个1000行的框架，完美地解决了这个问题。代码编写良好，并经过充分测试，每一步都有详细记录。

乙则是当天去了公园，一边喂鸽子一边思考问题，然后漫步回到办公室，删除了100行代码，部署了更改......问题就解决了。

请问谁的生产力更高？

回答是，这不重要。重要的是乙解决了问题，同时降低了团队的长期维护成本。甲也解决了这个问题，但是他通过增加代码，增加了维护成本，因此（在其他条件相同的情况下）他的解决方案较差。

我们能说，乙具有更高的生产力吗？显然，很难找到编程生产力的正确衡量指标。

我认为，优秀的软件开发者所做的就是解决问题。但是，生产力的衡量指标，比如代码、文档、数据等等，都只是解决问题的工具，并不是解决问题本身。

【转载】没有编程生产力这样的东西

书接上文，被攻击后最终我决定举报！

[电信举报地址](https://www.189.cn/suggestions/index.html)

![](https://pic.mereith.com/2024/11/19/202411192024855.png)

没想到效率非常高，很快就给了电话反馈，我也短信告知了 ip。

保险期间，我把七牛云的 CNAME 给取消了，但是奇怪的事情来了。

**过了 3天，我的七牛云还在受攻击，而且基本上只有那一个 ip 在打**

不是，大哥，我 dns 都切走了，你 dns 缓存不刷新的吗？人家都不访问了，怎么只有你访问？？？

到这里我基本可以判断，大概率是 CDN 厂商自己搞得事情，那我就不爽了呀。

> 最后我换成了自建 minio 图床（一主一备），上了 waf （雷池）防火墙🫡，关了我 vps 所有多余的端口，关闭了 icmp 协议