前端工程

个人官网 triorigin

契约先行的个人站:内容源驱动、构建期校验、静态预渲染

时间
2026-09 — 至今
我的角色
独立完成契约设计、前端实现、后端 API 与部署
技术栈
Vue 3、TypeScript、Vite +3
状态
进行中
Vue 3TypeScriptViteTailwind CSSGoDocker

背景

做这个站的起点不是「想有个官网」,而是发现自己的作品散在聊天记录、临时文档和几张截图里,说不清到底做了什么。招聘方要的是可核的结果,不是形容词。

约束有三条:一是不做后台管理系统,静态内容站不需要登录态;二是改内容不改代码,文案与截图必须是数据;三是每个数字都要有出处,写不出来的宁可删掉。

技术方案

内容源是 Markdown 与 JSON,构建期用 zod 校验并编译成类型化数据,字段写错在构建时就失败,而不是上线后显示空白。

页面用 Vue 3 + Vite 预渲染,每个路由产出一个独立 HTML,SEO 与首屏都不依赖 JS。

后端只有两个接口:下载上报与版本检查。Go + SQLite 单文件,容器里跑一个静态二进制,没有 CGO 依赖。

我的角色

产品定义、契约设计、前端实现、后端接口、部署运维全部自己做。

明确没做的:主视觉不是从零设计,沿用了已有的渐变色板;法律条款是模板改写而非律师起草,上线前仍需复核。

成果

  • 10 个路由全部预渲染,curl 可直接抓到正文,不依赖 JS 执行
  • 构建期 10 条内容校验规则,字段不合法直接构建失败
  • 线上真实下载实测 11.7 MB/s,15.3 MB 包体 1.3 秒完成
  • 全部图片走静态资源长期缓存,HTML 走 no-cache,换版不发愁缓存

关键数字 · 每项可溯源

预渲染页面

10 个

来源:npm run build 路由清单

构建期内容校验

10 条规则

来源:M2 契约 §7 C1–C10

内页 gzip 体积

2.4 KB

来源:线上 /about 实测 8701 B → gzip 2417 B

相关截图

点击图片可看大图