个人博客的终极形态？

缘起经历

起初抱着一腔热血、最早我和估计大多数一样的都是从WP、Discuss、Zblog等平台入手折腾属于自己的网站，但是不管选择哪个平台都始终面临一个问题就是硬件支出：服务器、购买主题插件、CDN、图床、存储等等一系列的费用，刚开始觉得挺新鲜挺好玩也没在意，但是随着时间和博文内容的增多，就会发现这些成本没法回避，加上随着时间的推移兴趣也会慢慢的淡去、99%的人最后都是不了了之，草草关站，这种我称之为我的博客 V1.0版本（之前写的博客数据早灰飞烟灭了）

后面出于“逃避”硬性支出的考虑、于是就开始转向静态博客平台，比如搭建在GitHub、CF上面、也有很多静态框架平台：如Hugo、 JekyII、Notionnext、Gridea、Publii、CFblog、Gmeek等等工具，这类我称之为我的博客 V2.0版本，这些工具虽然可以为我们节省了大量的硬性成本投入，但他们也有自个的弊端：

  • 首当其冲的是要有一定的技术基础。
  • 各平台都有一些自带的硬伤、比如不好同步等等
  • 其次是这些工具都严重依赖作者的更新和维护，过个一两年后只要作者不更新了就很多功能越来越落后，导致又得换新平台或框架。
  • 最后是一些像Gridea、Publii这种工具的主题太少了，我转了一大圈没有一个比较满意的排版布局，我个人来说不需要太花里胡哨的样式，极简风是我的最爱，于是在众多工具中我选择了Gmeek。

最终啊最终、我选择了搭建在GitHub上面的Gmeek，个人非喜欢它的样式和简洁，第一眼看到我就发现这才是真简洁，所以毫不犹豫的选了他，我的2054养老定投日记也开始记录在这上面，但是用了一段时间后我发现Gmeek也有很多问题，首当其冲的就是编辑器书写真的一言难尽啊，甚至连一张图片都没法排版、更别说字体的大小、位置设置统统都没有，然后就是导航栏的缺失最终是让我抛弃它的最后一根稻草，随着AI技术的发展、刚开始这些弊端我也自己尝试过利用AI去折腾一下，结果是各种报错，对我零技术基础的小白我来说这简直是灾难。

所以到了2025年4月份我就实在不想折腾GitHub彻底放弃了，还是选择了我最喜欢Notion这种即写即所得的现成编辑器工具，只有在notion码字才感觉找到了适合自己的东西，不想过于折腾太多东西、简简单单、干干净净就好。喜欢notion编写时的清爽和干净、文章、代码、公式显示一应俱全，最关键的我是教育版用户没有空间限制忧虑，真的没有别的顾虑，只要一心一意的写就行，综合对比下来，决定把我的blog搬家到Notion上面，那些博客平台最大的问题还是感觉他们都太想出风头了，心思都在各种华丽的功能和外表上面，反而将最纯粹的书写功能感觉都忽视了，我就只想要纯粹丝滑的书写体验加记录就完事了，其他乱七八糟的功能我都可以甚至不要，所以我实在是太喜欢Notion自带的编辑器书写效果了，无比丝滑。

但是Notion用着用着它的弊端也慢慢蹦出来了，就是只能当作纯粹的笔记本来用，因为如果尝试把他当成博客来用的话，第一自定义域名需要每月10刀直接劝退、第二访问速度再次劝退，于是我在想能不能只要Notion的书写体验、和GitHub载体传播介质这两个最朴实无华的功能呢？

于是我就想把文章在notion里面写完后导出html格式，然后直接上传GitHub应该就行吧，但是导出html后发现notion的目录功能没了，我又不懂技术咋办？？我问了AI，但因为本身不懂技术，虽然功能实现了，但是效果差的太多，于是我想到了notion原生的AI。这个很大的好处就是不严重依赖博客框架更新，现在 Notion 适合写就用 Notion，如果过个两三年假如有新的工具出来就用新的工具来导出HTML就行

最终还是在notion AI的加持下成功找到了解决办法，就是导出html文件后、在html代码的最下面直接添加以下代码就行，我靠，这一刻舒坦啊！对于纯小白来说纯粹是一点点摸索出来的，这感觉简直爽爆了。

最终选择

所以目前我对博客的最终形态就是：

  1. 在Notion上面做最原始的记录，然后导出HTML格式；
  1. 将HTML及相关文件上传到GitHub上面；
  1. 在GitHub根目录制作一份导航首页链接所有的HTML；

带着这种信念，在新版的GPT帮助下，我用了大概三天吧就折腾出来了我的博客，因为只要上传html就行，所以初步命名为HBlog（ html blog），为啥要三天？因为我的GPT账户是免费版，一天只能问有限的东西，整整用了三天的额度才把整个博客代码写完。纯技术小白，所有的功能实现全部都是由AI完成，我只是最开始根据自己的需要画了一张草图而已，其他的所有都交给了AI，最后在GPT-5的协助下，我完成了我博客的第一个版本，这次的博客我称之为我的博客 V3.0.0版本，后续更新只要专注用自己喜欢的笔记软件写好博文内容并导出HTML格式后上传进去就行，然后用链接到主页上就万事大吉了，简单粗暴！

更新 V3.0

  • 添加了后台管理
  • 添加了导航栏管理

这个版本非常简单，从V3.0 到V3.1 更新它的原因是GPT实在是过于小气、免费额度没用几下就没了，于是转身就选择了Gemini，我靠这速度、这响应能力杠杆的，有了之前的关键词输入经验，差不多就10min时间就做好了，而且添加了后台管理功能，因为我懒、我不想在代码里面一个一个添加笔记HTML链接，包含HTML链接上传后的修改、删除等硬性功能，所以就把这些活全扔给了Gemini，包括导航栏管理全部都是直接一次生成的，简单快捷。

更新 V3.1

  • 调整了导航栏样式
  • 新增了首页和后台博文太多需要翻页的功能
  • 新增了博客基础信息管理
  • 后台录入博文新增了检索功能
  • 优化了导航栏管理功能，可以自定义归属关系

我个人感觉这版是最上头的，理科生应该有这种感觉就是码出来一个喜欢的东西，然后不停的去优化添加功能，越优化越兴奋、越添加越上头、新的功能不断地涌出来，功能上线后体验一下、框、脑子里面又蹦出来一个新的念头感觉不错，然后又马上再改再测和上线，沉迷其中无法自拔、这个过程爽的一匹啊。

正确打开方式：20260104更新 V3.2

  • 调整了管理后台按钮、平常是隐身的不影响整体观感，只有当鼠标放上去才会显示
  • 调整了前端和后端的博文显示条数
  • 新增了返回最上方的按钮
  • 新增了TOC目录、返回首页功能
  • 新增本文博客更新史

虽然由 V3.0到 V3.2差不多也就是两三天的时间吧，但我感觉我依旧是真上头了，想着Gemini这么叼，为啥不借他帮我解决一下之前想要Notion原生目录的功能呢？上面我也提到了，最早我是借GPT和notion原生AI下才捣鼓出来了一份代码可以在HTML上面添加目录功能，但实际效果太粗糙了，这个功能弄得我很头疼，最后在Gemini下我才醒悟原来是我打开方式错了，之前我就笨笨的直接在博文HTML上面加功能，这效率多低啊，而且很容易出错。

我就试着问Gemini在notion上面这个目录功能是怎么实现的，为啥在notion里面就有、而我导出HTML后就没了？得到回答是有一个TOC.js文件里面的代码复制处理，对不起、我是真零基础小白，所以很多技术层面的东西我到现在也叫不出一个所以然来。

接着我就想这个代码是在电脑本地还是在notion的服务器上面？因为我想下载放到我的HTML里面去应该就可以了吧，反正思路是这样的，后面想通了这东西肯定在notion的服务器上面，因为分享出去的链接、别人肯定没有notion软件，但是打开的时候一样会有目录显示出来。

到这事情就变得简单了，我就想导出的HTML除了标题文本外其他加载目录的代码肯定都在啊，只是目录代码不在我本地而已，HTML加载不到所以才显示不出来吧，我靠，那我直接让Gemini帮我生成一份类似目录的代码重新插到HTML里面去不就完了，最终到这一步、苍天大地啊，鬼知道我有多兴奋跟开心，我终于得到了我想要的目录功能。

实现目录功能后我就发现不对劲、乖乖、这么多HTML我要是每份都去单独插入代码那不是要老命了？包括以后想要添加新功能的话是不是又要重新插入一次代码？我就在想能不能在HTML里面只要写一份固定的代码来引用别的功能代码（技术佬不要笑、我当时就这么想的 哈哈哈哈），这样导出HTML后只要添加一次代码就行，然后其他的全部都去功能项里面去改就行，至此我博客之前面临的最大问题（动态插件功能）终于攻克了，这一刻我感觉这就是我最理想的博客：

  1. 几乎零成本、如果想要自定义域名的话那就一个买域名的费用，如果不用自己的域名，那就是纯纯零成本，不用买服务器、不用买CDN、不用买博客框架、主题和插件。
  1. 无限容量，如果一个仓库满了就新建一个，如果GitHub账户容量满了那就新建一个小号就行，就纯粹把博文内容HTML链接复制过去就行，博文HTML在哪就行。
  1. 永久保存，理论上讲没有真永久的东西、但放到GitHub上面可以说几乎就是永久保存了。
  1. 完美的编辑书写体验，你觉得Notion好用就用Notion、觉得其他笔记软件好用就用其他的，基本上现在的笔记软件都支持导出HTML格式了，哪个舒服就用哪个，再也不用被束缚了。
  1. 纯静态响应速度极快，所有的页面都是HTML格式，也不用担心博文过多博客卡顿了。
  1. 100%纯自由支配，不用担心功能不够、不用催更新、不用浪费时间去等待和期待。
  1. 零基础上手、享受搭建过程、其他的都扔给AI就行。

感恩AI、感恩科技、这真是一个好时代、美好的时代，善用工具；

20260106更新 V3.2.1

  • TOC.js、返回首页.js整合到一起了，方便统一调整目录的显示效果，新增一二三级目录阶级显示，效果跟notion目录保持一致；
  • “2054养老账户资金进度图” 中引用的JS全部下载保存到本地；
  • 新增文章代码的拷贝按钮，可以一键复制博文里面的代码了，功能越来越成熟了

在此之前如果偶尔想到一个好的功能或者样式效果，我都是尽量去跟AI解释和文字描述，我的初心还是希望AI能够理解我想要的东西、虽然方向上没错，但过程也是蛮坎坷的，多多少少有点浪费时间了，经过这么多版本的更新迭代，深知给AI如何提供自己想要的东西是多么重要，今天灵感乍现，我就想我的灵感肯定也是看到什么东西引起的，我那直接把我看到的样子先截图给AI、然后问这种效果样式用专业名词应该如何解释不就完了，AI回答给了我专业的描述后，我在重新复制整理后另起单独发给AI来表达这就是我想要的东西，然后、然后生产效果直接有一个质的飞跃提升，果然要学会使用正确的方式打开工具、 哈哈哈哈哈哈，借用这个技巧我成功更新了TOC目录和返回首页按钮的样式，并且新增了文章代码拷贝按钮，哇，这感觉是要飞起一样，赶紧先记录一下这些折腾这些好玩的东西非常有乐趣。

20260111更新V3.2.2

  • 新增了博文置顶功能，支持全站置顶和分类置顶；
  • 新增了我的联系方式、留言功能、展示在博文右下角；
  • 调整了后台管理面板样式，随着功能的增加，原来样式不符合阅读习惯；

突然今天发现Gemini有点“崩溃”的样子，好几次驴唇不对马嘴，经过细问才知道是代码太长导致的，尝试了一上午都不行、改换GPT、豆包都有类似的问题，尤其是GPT现在感觉这玩意就是个傻子，还是个有情绪的傻子，最后的最后还是在Grok使用专家模式下才顺利搞定置顶功能。

现在的AI真是🐂，想要啥功能直接问就行，分分钟搞定。

20260129更新V3.2.3

  • 在GPT的建议下添加了底部的免责申明；
  • 增加公告功能，仅首次访问提醒；

20260228更新V3.2.4

  • 后端管理入口物理隔离、管理页面放本地了，GitHub仅托管前端（功能相当于动态博客需要密码才能进入后台一样）；
  • 文章管理分离；
  • 后台基础管理添加了浏览器标题和图标；
  • 我发现AI还是太吊了，我原来想法是把文章代码部分单独拆出来，因为我担心后面文章更新越来越多，代码也会更多，然后AI输出行数有限，会影响功能的修改，之前就遇到类似问题，然后让AI帮我修改一下，没想到啊没想到，AI还是太叼了，直接帮我重新设计了思路，把文章、后台管理、和样式都单独拆出来了，传统动态博客进入后台必须搞复杂的账号密码、验证码、防火墙，对于我现在的静态博客方案，逻辑是：管理页面直接放本地，更新输出新的文章js后直接上传覆盖就行，GitHub托管代码仅负责展示就行，我靠这思路一下子就打开了，佩服佩服，然后单独的文章行数都比较少，也适合AI快速修改和输出新功能。

20260322更新V3.2.5

  • 调整了博客头像大小
  • 调整了分类置顶的逻辑
  • 修复方案：导航菜单栏添加“透明桥梁”：利用 CSS 伪元素 ::before 在空隙处填补一个透明的感应区，让鼠标移动时始终处于悬浮状态，同时为下拉菜单添加微动画（Micro-interactions）让交互显得更丝滑，不再那么生硬。
  • 优化多级菜单显示：原代码只支持一级下拉，优化了 CSS 选择器，使其支持嵌套的多级菜单（如三级菜单）正常显示。
  • 文章篇数统计提示文本修改为“脚注式统计”
  • 优化并重新上架了评论功能，改用giscus，评论会直接显示在博文下方，更符合博客特点，有了这份评论系统后就可以同步下架了“联系我”功能
  • 网站底部添加了版本号显示

更新V3.2.6

  • 持续维护中