博客渐冷，代码开源：我的个人站点演进史
前言
我的个人博客已经运行多年，虽然它并不是什么出色的项目，但在我的前端开发生涯中，它承载了我的一些思考，也见证了我的技术热爱。
大学时期，无论探索了什么新技术或遇到什么问题，我都会写文章更新博客。但后来参加工作后，随着生活重心的变化，博客的更新频率逐渐降低。许多踩过的坑虽然被记录在备忘录里，但由于种种原因，始终没能整理后更新。尽管如此，我依然不想让这个博客就此荒废。或许它不再频繁更新，但仍然值得被保留。
开源这个破小项目，希望能为那些想搭建简洁、低成本博客的人提供一些参考。如果能对你有所帮助，那将是我的意外之喜。
历程
最早可以追溯到 2017 年，大学时期第一次尝试搭建网站，取名 zhvy20。当时为了省钱，域名后缀选了 .xin。从备案、部署到百度收录，整个过程都靠自己摸索，虽然折腾，但充满了乐趣。
初代：纯静态 HTML 页面
最初的博客只是一个纯静态网站，当时技术小白的我，用最简单的 HTML + CSS + JavaScript 构建。网站的结构和样式一直是边学边改，学到什么新技术就想往网站里加。但由于完全没有美术细胞，最终变成了各种风格混杂在一起，看起来相当“灾难” 💩。
不过，当我第一次在百度上搜到自己的网站时，还是兴奋了很久，哈哈哈。
转向动态渲染：Flask + MySQL
后来，因为学习方向的变化，网站搁置了几个月。再重新拾起时，我注册了新的 .com 域名，并因为阿里云学生认证可以享受 1 折 ECS 服务器，于是决定结合学到的后端知识，尝试做动态渲染。用了初学的Flask，数据库用了MySQL，然后Jinja2模板渲染。
切换到 Markdown + Express + MongoDB
随着学习的深入，我逐渐明确自己更想学习前端技术，于是决定使用Node.js作为后端服务，并重新改造博客架构。这时，GitHub 账号也从 zhvy20 更名为anandzhang，于是我索性注册了现在的域名，并对博客进行重改。后端 WEB 服务使用 Nodejs 的Express（替代 Flask），数据库使用了MongoDB（替代 MySQL），模板引擎用了art-template（替代 Jinja2，后面替换为pug），又受 GitHub 影响，开始用 Markdown 记录文章。这便是博客的第一版 Markdown + Express + MongoDB + Pug。
最终版本：彻底静态化”躺平“
大学毕业后，学生认证的 1 折服务器到期，当时续费一年要 1k 多，穷光蛋😭。于是我开始寻找替代方案，最终发现个万网的虚拟主机，类似一个 Docker 的 Nginx 容器，带宽比之前大 5M？，3 年费用好像 500 多块，但只能托管静态资源。为了迁移过去，我决定将博客又改为纯静态，不再依赖动态渲染。
最终，我采用了 Markdown 编写文章，并通过脚本生成 静态 HTML 页面，然后用 Nginx 托管。这种方式简单、低成本，也更加适合长期维护。至此，博客直接“终极躺平”。
上面是老图啦，写这篇文章的时候万网虚拟主机已经过期，续费一年的价格又不如直接买 ECS 或轻量级应用服务器啦，才99一年，所以博客又迁移到新的环境了。
项目
📦 blog
├── 📂 controllers # 处理 Web 请求
├── 📂 docker # Docker 相关配置
├── 📂 models # 数据库模型
├── 📂 posts # Markdown 博客文章
├── 📂 public # 静态资源
├── 📂 routes # 路由定义
├── 📂 scripts # 构建脚本
├── 📂 utils # 工具函数
├── 📂 v2 # 当前博客的静态文件（躺平）
├── 📂 views # 视图模板（历史遗留，v1 版本的 Pug 模板）
├── 📄 README.md # 项目介绍和使用说明
├── 📄 copyright.md # 版权相关声明
├── 📄 default-v2.conf # v2 版本的 Nginx 配置文件
├── 📄 default.conf # 旧版 Nginx 配置文件
├── 📄 index.ts # v1 入口文件
├── 📄 package.json # 项目依赖和配置信息
├── 📄 tsconfig.json # TypeScript 配置文件
└── 📄 webpack.config.js # Webpack 配置
/v2是当前博客在用静态文件，根目录是首版项目遗留文件，部分文件已被修改，tag:v1.0.0可查看首版Markdown + Express + MongoDB + Pug 代码。
/v2 终极躺平：
1、Markdown 解析：将 Markdown 转换成 HTML 2、自动生成静态页面：通过脚本批量构建博客 3、极简设计：没有复杂的 UI，仅保留阅读体验
核心实现很简单：使用 YAML Front Matter 在 Markdown 文章顶部添加tag、keywords、description等元数据，取代数据库存储。然后通过scripts/build.ts解析 Markdown，替换/v2/template中的 HTML 模板内容，生成静态页面。顺便拷贝下资源目录、压缩下文件优化加载速度。
编写文章咱直接使用 Typora ，并通过配置typora-root-url: ../来控制图片解析目录，这样就可以直接用正常加入资源文件并预览，最后打包再拷贝资源目录就行。
部署直接用 Nginx 或其他静态资源托管服务来挂载脚本导出的/dist目录就OK。
很多功能也搁置很久没做：文章较多得改为增量构建，仅更新变更部分；添加更多 Markdown 扩展等等。
这个博客就是想极简、低成本、纯静态无后端，只需编写 Markdown 并执行脚本，即可生成一个轻量的个人博客。如果你也想搭建类似的博客，希望这个项目能提供一点参考。
以后的
这些年，自媒体、公众号等已成为获取信息的主要渠道，独立博客的热潮早已退去，许多站点也相继停更。 随着时代变迁，加之工作与生活节奏的变化，留给博客的时间越来越少，但我仍想留下些许足迹，保持对技术的热爱。如果它能为某个偶然路过的人带来一丝启发，那便有点意义。
版权声明：
Anand's Blog文章皆为站长Anand Zhang原创内容，转载请注明出处。
包括商业转载在内，注明下方要求的文章出处信息即可，无需联系站长授权。
请尊重他人劳动成果，用爱发电十分不易，谢谢！
请注明出处：
本文出自：Anand's Blog
本文永久链接：https://anandzhang.com/posts/essay/7