最近有朋友问，这个网站是怎么搭建的？

其实很简单。

整个网站背后，只有一个 GitHub 仓库。没有其他外部依赖，像数据库、缓存什么的，都没有。

全部工作流，用的都是开源和免费的产品，不需要花钱。

这是我在一开始设计的时候就想好的。

以内容为中心，零依赖，持续集成和部署（CI/CD）。

当然，简单背后有不简单。

1. 构想

张小龙在《微信背后的产品观》这本书中提到过一个观点，很认同：

产品是进化出来的，而非规划出来的。

现在这个网站，已经是迭代中的第三个版本。

之前的网站，前端用 jQuery，后端用了很重的 MongoDB，服务器自己托管。所有的内容和代码耦合，保存在一个文件夹中。

坏处很明显。

一者，迁移成本高。当服务器过期，换到一台新的服务器时，不仅要拷贝文件夹，还需要重新部署 MongoDB 服务。不胜其扰。

同时，发布复杂。需要先上传文章到服务器，然后更新数据库。

另外，网站性能很差。尽管实际上需要的只是静态页面，但网页请求时，却需要先访问数据库，然后再将结果动态展示。当时甚至设想过要不要再加一个缓存层…

看似用到的技术点很多，其实都是花拳绣腿。不仅没解决问题，反而带来更多问题。

好在，在犯错中，确实也学习和领悟了一些技术开发的原理。

面向问题，选择务实的方案，多做减法。

于是在新版网站创建之初，吸取之前的教训，设立了两个小目标：

1. 发布简单
2. 部署简单

最好是，发布即部署。

梁朝伟在《一代宗师》中讲：

功夫就是两个字，一横，一竖。

越简单越好。

2. 实施

实施过程中，一共做了三件事。

1. 内容和展示分离
2. 零依赖
3. 持续集成和部署

2.1 内容和展示分离

网站开发中的第一性原理是什么？

对于博客网站，我认为是：内容。

是否能快速访问，是否跨端适配良好，是否美观，都重要，但不是最重要的。

内容，是一切的出发点。

好的博客网站，首先一定是能提供观点鲜明、结构清晰、容易理解的内容。

载体是文章。

我将所有的文章，以 Markdown 的格式保存在文件里。

这一步聚焦于内容，至于怎么呈现，不去关注。

Markdown 是一种结构化内容的轻量级方式，是纯文本。其哲学也是以内容为中心，样式由展示者控制，而非内容提供者。

为了方便保存和迭代，文章都放在 GitHub 仓库中，兼顾变更，发布，以及迁移。

这也是当下产品开发的主流手段，基于分支的 Git 工作流🔗。

2.2 零依赖

博客网站里的页面都是静态的。

在前端，JavaScript 不是必要的。

在后端，除了网页服务器，其他服务，像数据库等，可有可无。

唯一需要的工具，就是静态站点生成（Static Site Generation）。将 Markdown 转换为 HTML。

当下这样的产品很多，像 Hexo，Gatsby，Hugo，VitePress 等。

我选择的是 Astro🔗。

静态站点的托管，前些年选择还很少，要么用 GitHub Pages，要么自己部署。

现在选择很多，而且还都支持 CDN 和 边缘计算。

除了 Vercel 和 Netlify 外，AWS 和 Cloudflare 都有相应的产品。

目前我用的是 Netlify。

GitHub + Astro + Netlify，除了这三个必不可少的工具，就没有任何其他外部依赖了。

2.3 持续集成和部署

剩下的就是把这几个工具串联。

真实的工作流是：

1. 本地提交新的文章或改动
2. 推送到 GitHub 远程分支
3. Netlify 监听分支变动，触发 Astro 生成静态站点
4. Netlify 将新的生成结果部署

从文章写完，到用户在网页端访问，中间所有的流程，都是自动化的。

非常方便。

3. 不足之处

目前网站在样式上还有优化空间。

我不是很擅长设计和 CSS。

当初开发的时候，这一块就是最令人头疼的。

有可能的话，后面会用 shadcn/ui🔗 重写。

得益于最开始的顶层设计，样式的变更很容易。

分支各自管理，内容和样式独立，工作流中的其他环节之间没有依赖。

就像是只需要更换机器中的其中一个零件，不用把整个机器都换了。

4. 总结

如果对网站架构比较熟悉的话，可以看出，这一套网站开发思路，其实就是借鉴 JAMstack🔗。

这说明了顶层设计的重要性。

程序员的工作，远不止写代码这么简单。

要从写代码出发，先架构小的组件，然后架构小的系统，进而架构复杂系统，架构整个产品，甚至架构商业。

（完）

参考

1. Markdown - Wikipedia🔗
2. Static site generator (SSG) - MDN Web Docs Glossary🔗
3. Astro🔗
4. Netlify: Scale & Ship Faster with a Composable Web Architecture🔗
5. JAMstack - Wikipedia🔗