这份博客想做的事情很简单:把工程学习、集成电路和项目思考整理成容易阅读、也容易持续更新的文章。回头看,真正花心思的地方并不只是首页,而是如何让内容结构、阅读体验和发布流程彼此配合。
先把文章当作内容,而不是页面
我选择 Astro 生成静态页面,文章则保存在 Markdown 文件里。每篇文章用标题、摘要、日期、分类、标签、语言和草稿状态描述自己。这样一来,写作仍然可以用熟悉的文本格式完成,网站也能从这些字段生成文章列表、分类页、标签页和 RSS。
这套内容模型看起来很轻,却决定了后续维护是否顺手。字段由 schema 统一检查,少写标题、日期或语言时,构建过程就能尽早发现问题;草稿也能留在仓库里,不会进入公开文章列表。对以写作为中心的个人网站来说,先把内容约定定清楚,比先堆很多页面更有用。
让双语和检索融入日常阅读
网站的导航和常用界面可以在中文与英文之间切换,文章也通过语言字段分别管理。文章列表、分类、标签、文章详情和 RSS 都从同一份内容集合生成,避免同一篇文章在几个地方重复维护。
搜索目前直接在浏览器中匹配已发布文章的标题、摘要、分类和标签。它不需要额外的搜索服务,适合当前规模;如果文章数量明显增加,再考虑更完整的索引或更细的匹配方式。
静态网站也能承载小工具
除了文章,网站还包含一个个人单词卡片页面。页面结构仍然随 Astro 一起静态生成,登录和词条数据则交给 Supabase Auth 与 Postgres 处理,并通过数据库策略限制账号的数据访问。这样把内容展示与需要持久化的用户数据分开,博客主体不必因此变成一套复杂的服务器应用。
这也带来一个实际提醒:外部服务要有清楚的配置状态。背词服务未配置时,页面会显示设置提示,而不是留下一个看似可用、实际无法工作的空白功能。以后如果继续扩展交互页面,我会沿用这个原则,先把依赖和失败状态讲清楚。
视觉细节服务于长文阅读
界面采用浅蓝与暖色渐变、半透明面板和较克制的卡片层次,并提供深色主题。文章页、导航和控件共享同一套颜色变量,减少页面之间的割裂感;响应式布局和清晰的焦点样式则保证键盘与窄屏使用时仍然容易操作。
视觉风格并不是独立于内容的装饰。博客页面停留时间通常比工具页更长,所以正文宽度、字号层级、标题留白和目录位置都直接影响阅读。后续的打磨也应该优先解决这些真实的阅读摩擦,而不是不断增加视觉效果。
发布流程越短,更新越容易坚持
目前发布链路由 GitHub Actions 完成:推送到 main 后,工作流安装依赖、执行 Astro 检查与静态构建,再把 dist/ 上传到腾讯云服务器。服务器通过 Nginx 提供静态文件,不需要在生产机器上安装 Node.js 或拉取 Git 仓库。
这套流程把“写完一篇文章”缩短成一次代码提交,减少手工复制文件的步骤,也让每次发布使用相同的构建过程。它仍依赖仓库中的站点地址、服务器连接和 Supabase 配置,因此这些部署密钥需要在 GitHub 仓库中妥善维护;站点地址配置错误时,生成的 RSS 和页面元信息也可能跟着出错。
这次构建留下的经验
第一,内容 schema 是长期维护的基础设施。分类和语言等字段越早统一,文章越容易被列表、搜索和 RSS 正确使用。第二,静态优先不等于拒绝交互;只要把需要登录和存储的数据交给合适的服务,小型工具仍可以放进同一网站。第三,发布自动化的价值不只在省几分钟,更在于让内容更新变成可重复的流程。
从迭代记录看,Markdown 表格渲染和界面细节都曾需要单独修正。这提醒我:构建完成不代表体验完成。接下来最值得持续做的,是用真实文章检查长文排版、完善链接与内容校验,并在上线前验证搜索、主题切换和背词服务的实际状态。
对个人网站来说,合适的技术方案不是功能最多的方案,而是能让自己长期愿意写、读者能顺利读、每次更新都不费力的方案。这份博客目前已经有了这样的基础,后面的改进也应该从真实使用中长出来。