全部文章

这座站点是怎么搭起来的:技术栈、架构与下一步

从 EmDash、Astro 和 WebGL2 到持久化部署,梳理超级个体站目前已经实现的架构,以及接下来怎样用立项清单记录真实进度。

这个站点想解决一件具体的事:让项目从立项、制作到复盘,都有一个能持续更新的公开位置。文章负责解释判断和过程,项目页负责记录当前状态。首页可以有互动,但内容必须来自真实进度。

技术栈为什么这样选

博客以 EmDash 1.4 和 Astro 7 为核心,运行在 Node.js 24 容器中。EmDash 管理文章和项目,提供草稿、修订、搜索与后台编辑;Astro 在请求到来时渲染公开页面,让新发布的内容进入页面,而不必每次都重新构建整站。文章列表、详情和 RSS 都从同一份内容数据读取。

首页的可拖拽虚拟角色使用 React 和 WebGL2。它只负责首屏的交互表达,项目资料和文章仍由 Astro 渲染。手机上使用静态形象;浏览器不支持 WebGL 或用户选择减少动态效果时,导航与正文依然可访问。这样,互动不会成为阅读内容的门槛。

页面的视觉使用冷白、深蓝和少量暖色。首页承载探索感,项目与文章页则保持清晰的阅读顺序。这个选择也反映了站点的分工:视觉吸引人进入,内容负责说明实际做了什么。

线上架构与数据流

访问 webfooo.com 时,请求先到 Caddy,由它处理 HTTPS,再转发给博客容器。博客使用 Astro 的 Node 运行方式;EmDash 的 SQLite 数据库和媒体目录分别挂在持久化卷中。容器更新后,文章、项目和上传文件不会随着镜像替换而消失。

内容流转可以概括为:在 EmDash 建草稿 → 审核并正式发布 → Astro 展示在公开页、搜索和 RSS。未发布的文章不出现在公开页面。项目也采用同一套内容管理方式,但额外保存一份“立项清单”。

社媒流程与博客发布分开。文章发布后,EmDash 的 content:afterPublish 钩子按文章 ID 建立一条任务;重复发布不会创建第二条。小红书稿件可在后台复制,由站长手动发布。X 方向原本准备通过 Postiz 只创建待审核草稿,不自动发帖或排程;目前 Postiz 已暂停,X 开发者应用与账号授权也未配置,因此真实 X 草稿联动尚未启用。

项目进度改成可勾选的立项清单

项目刚建立时,我会根据项目计划生成待办,并写入项目档案。后续完成一项,就在 EmDash 里勾选;公开项目页保留这条任务,用勾选和划线显示完成状态。首页和项目列表读取同一份清单,显示已完成项数。

这比一个笼统的“建设中”更有用:访客能看到具体推进到哪一步,站长也能回看最初承诺了什么。尚未核实的工作不会提前打勾;暂时不做的想法也不会硬塞进完成率。

接下来做什么

第一步是继续验收内容工作流:用站长账号编辑文章和项目,检查媒体上传、预览与发布后的公开结果。当前站点已经有后台和持久化存储,但这些登录后的操作仍需要逐项核对。

第二步是让每个新项目从一份真实的立项计划开始。立项时生成清单,制作中更新勾选状态,完成后留下文章或项目复盘。新项目只在资料和进度确认后公开,不用示例内容填充页面。

第三步是持续改善阅读与交互体验:检查手机上的长文和清单、键盘操作、减少动态效果以及加载成本。首页的 3D 角色会继续作为入口,正文页始终以阅读为主。

如果以后确实需要 X 草稿,再恢复已保留数据和配置的 Postiz,完成开发者应用与账号授权,并验证草稿只进入审核流程。现在没有必要让这套较重的服务长期占用服务器资源。

这篇文章由 Codex 根据截至 2026 年 11 月 2 日的代码与部署状态协作整理。已完成与待办状态以项目立项清单为准,之后会继续更新。

技术参考:EmDash Node.js 部署 · EmDash 发布钩子 · Astro 按需渲染