我的博客构建方法及历史

原创声明

著作权归作者 Handy 所有。商业转载请联系作者获得授权,非商业转载请注明出处。

简介

回想自己的博客系统,是从什么时候开始建立的呢?

我翻阅了域名购买记录、服务器购买记录、GitHub 仓库等。

最早在 2019年3月 购买了 dfface.com 的域名,但我怀疑最早的网站不在那个时候,应该还要更早,更早的那一波可能采用了 GitHub Pages。

2022年暑假前夕,当美团的某个面试官问及我的博客,告诉我一个显而易见并且至关重要的事实:内容大于形式

时间线

由于历史实在难以考证,我只能按印象来把使用过的技术栈列出来,以供诸位参考。

时间技术栈备注缺点
2018年之前免费博客站点新浪博客、简书(账号被封)、博客园CSDNBlogger 等。页面不好看、广告多、编辑器不好用、数据不可控
2019年基于 SSR 的博客Hexo、Hugo、Jekyll 、Gatsby、VuePress、GitBook 等。这期间用 Hexo 用了很久,但是 Next 主题用的人太多了毫无个性。Hugo 超级快,也用了较长时间,中途还换了 Diary 主题、Loveit 主题等,主要存在的问题是本地中文搜索太差、网站打开速度慢等。基于 SSR 的博客使用的时间最久,因为成本最低。2023年时还有nav 项目,WebStack 主题,建立 www.yuhan.tech 的导航页面,用 yaml 数据驱动,然而不如 Edge 浏览器收藏夹好用。遂自己还尝试了gatsby-chakra-nav,这是利用 Gatsby + Chakra + Cloudflare Pages 做的一个导航站,实在是 Gatsby 太费时间学习而放弃了。到后来 2025 年左右,有了 Hugoplate 这个超强自定义能力的主题时, 加上使用国内对象存储服务而不是 GitHub Pages 从而提升页面速度,这几乎已经成了我的博客最终解决方案,因为成本极低,数据还自主可控。早期使用时只知道套主题而主题少、速度慢、搜索功能差
2019年6月基于Web 的博客系统WordPress、Typecho、Ghost、Halo 等传统内容管理系统,需要部署在 Web 服务器上。用下来,无外乎主题不合胃口、编辑器太难用、不好进行数据的维护等。完全自主可控的 local first 的体验似乎更好?Typora 编辑器不比网页编辑舒服?主题少有好看的、自定义能力差、维护起来麻烦、成本高
2022年2月Gatsby + StarAPIJamStack 入坑。当时静态网站生成器选择了 Gatsby ,学了一堆前端技术,如 GraphQL 等,但是网站做的很简陋。而后端无头内容管理系统 strapi 在当时是 v3 版本,bug 很多,也很不好用。需要自己从 strapi 取数据然后写前端页面、Headless CMS 不好用、成本太高
2022年12月NextJS + Notion API + VercelNotionNext 项目,将 Notion 数据库转为一个静态博客,在当时算非常理想的搭配。其中评论系统使用 Waline 部署在 leancloud + vercel 上。项目仍在开发中经常有bug、强依赖 Notion、主题单一、自定义能力差
当前Hugo + CloudFlare PagesHugoplate 脚手架非常好用,集成 Tailwind CSS、LocalSearch 支持中文,建站速度极快。再结合 2025 年以来各种 AI 的发展,使得前端页面编程越来越简单,有什么不懂的直接问 DeepSeek 等,不需要自己死学 Hugo 等的官方文档了。当然,成本主要是对象存储的费用,目前阿里云 OSS 已经做不到每月 0 成本了。在 2025 年 10 月迁移到 CloudFlare Pages,免费 5 GB 又没有别的什么限制,对一个博客而言够用。啊啊啊,CloudFlare 大善人就是我的神!!!-

回顾花费在云服务上的事项:

  • 2019年3月 花费 5.99美元 在 namesilo 购买了 dfface.com 域名(1年)
  • 2019年6月 花费 114元 购买了阿里云轻量应用服务器(1年)
  • 2020年2月 花费 32元 在腾讯云购买了 yuhanliu.com 域名(1年)
  • 2020年2月 花费 53元 在腾讯云购买了 wwpjw.net 域名(1年)
  • 2020年7月 花费 94元 购买了云服务器ECS(1年)
  • 2021年1月 花费 8.03美元 在 cloudflare 购买了 yuhanliu.com 域名(1年)
  • 2021年1月 花费 96元 购买了阿里云轻量应用服务器(1年)
  • 2022年1月 花费 96元 购买了阿里云轻量应用服务器(1年)
  • 2022年2月 花费 199元 在阿里云购买了 yuhan.tech 域名(10年)
  • 2022年5月 花费 1元 购买了腾讯云函数SCF资源包(1年)
  • 2023年12月 花费 99元 购买了云服务器ECS(1年)

更新记录

这里主要发布本文撰写以来,当前博客做了怎样的更新,页面历史预览可从 WaybackMachine 查看。

  • 2024-07: 确定 Hugo + Hugoplate + OSS 的博客,并迁移了一部分历史博客
  • 2024-09: 修改关于页面样式
  • 2024-12: 增加听歌栏目
  • 2025-04: v2版博客对齐最新脚手架、增加看书栏目、增加小记栏目、增加 Disqus 评论系统
  • 2025-05: 增加归档页面
  • 2025-08: 增加豆瓣观影记录页面、增加豆瓣阅读记录页面、增加主页工作时间挂件用LocalStorage开关
  • 2025-09: 草稿模式渲染支持、增加主页播放听歌栏目音乐的挂件
  • 2025-10: 英文版支持、LaTeX支持、分类标签页优化、文章详情页增加版权标识与标题锚点、优化看书详情页的目录展示、页面渲染优化(蓝色链接动效、内联代码样式、块代码暗黑模式、有序列表加前缀、引用去掉引号并压缩空间)、暗黑模式开关逻辑优化、Lastmod 支持、迁移到 CloudFlare Pages、谷歌必应 SEO 支持、文章目录支持浮动进度、引入 FlowBite 组件库、增加标签词云、增加返回上一步按钮、memo 预览文本化
  • 2025-11: 增加画廊栏目、改善画廊列表效果
标签 :
相关文章
如何在 React 中轻松路由?使用 React Router!

开始 tsx 复制 已复制! import React from "react"; import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, } from "react-router-dom"; import Root from "./routes/root"; const router = createBrowserRouter([ { path: "/", element: <Root />, }, ]); ReactDOM.createRoot(document.getElementById("root")).render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> ); root 路由比较特殊。

阅读更多
单调栈

陈述 顾名思义,就是单调的栈,可严格可不严格。能够找到下一个更大/小的元素,同时能找到上一个大于等于/小于等于的元素。 通常是一维数组,要寻找任一个元素的右边或者左边第一个比自己大或者小的元素的位置,此时我们就要想到可以用单调栈了1。

阅读更多
四则运算表达式求值:中缀改后缀

简介 在提到栈的应用时,有一个很典型的例子就是表达式求值。 具体应用时体现在: 中缀表达式转后缀表达式:运算符栈 后缀表达式求值:操作数栈 若直接进行中缀表达式求值,需同时操作两个栈,而将中缀表达式转为后缀表达式再求值时,每个步骤只需要专注于一个栈,操作起来更简单。本文就介绍这种方法。

阅读更多