返回项目分享

个人静态博客(本项目)

Nuxt 4 + Nuxt Content 生成的纯静态博客,支持 Markdown 与网页编辑器两种写作方式,部署到一台装了 Nginx 的服务器。

维护中

为什么自己写

试过几个现成方案之后,留下的诉求只有三条:内容必须是仓库里的 Markdown、页面必须是搜索引擎能直接读到的静态 HTML、部署必须只是一堆文件。

技术构成

  • Nuxt 4:路由、SEO 元信息、组件拆分。构建产物是静态文件,运行时不需要 Node。
  • Nuxt Content 3:content/ 目录直接当数据源,schema 用 TypeScript 定义在 content.config.ts。
  • Tailwind CSS 4:设计令牌写在 CSS 变量里,明暗主题只切一个 class。
  • ECharts 6:首页的分类分布与年度发布统计,数据由内容构建时聚合。
  • Pagefind:纯静态全文索引,支持中文分词。
  • Giscus:评论放在 GitHub Discussions,站点本身不存任何用户数据。

刻意没做的

  • 后台管理界面:任何需要登录的服务端接口都会让「静态部署」这个前提失效。写作入口换成 Pages CMS,它直接改仓库文件。
  • 浏览量统计:没有埋点就没有数字,宁可不显示。
  • 第三方地图服务:旅行地图只用省级边界数据本地渲染,不接高德的 key 与配额。

已经做完的

  • 旅行地图与游记:/travel 一张中国省级地图,去过的省份高亮; 一篇 Markdown 就是一趟旅行,地图高亮、悬停照片轮播、省份面板和游记详情页全部由它派生。

接下来的计划

  1. 把 RSS 订阅补上(需要固定生成的 feed 文件);
  2. 给文章加上「本文代码对应的仓库提交」链接;
  3. 重新梳理标签体系,现在有三类内容共用一套标签,粒度偏粗;
  4. 这个仓库推到 GitHub 之后,把本页的源码地址补回来。