新版博客上线了!项目叫 mukuchi(無口),名字取自「三无」里的「无口」。

这篇先简单聊聊博客现在有什么、用了哪些技术,再记一下后面想做的东西。下面写的是截至 9 月 22 日的版本,具体实现后面再单独开文章讲。

MVP

博客的基本功能已经有了:写文章、按标签和专栏分类、搜索,还有跟着阅读位置走的目录。搜索也能搜正文,忘了某段内容在哪篇文章里,可以试着搜几个关键词。

阅读上做了一些小东西。代码块可以复制,图片能点开缩放,深浅主题可以切换,每篇文章还可以选自己的主题色。手机上也能看,导航会收进菜单里。

文章用 Markdown 写,需要放组件的时候用 MDC。站里现有的 Markdown 教程和 MDC 教程就有一些例子,写文章时也可以拿来查。

写作后台也做了。草稿、图片上传、预览、发布都可以在里面操作。还有一个封面工具,可以调文字、图标和样式,给文章做封面。

另外加了 AI 摘要、文章朗读和双人播客。摘要用来快速看一眼文章讲什么,朗读和播客则是另外两种听文章的方式。这些要配置服务并生成内容后才会显示,所以不一定每篇都有。

架构&技术栈

主要用的是 Nuxt 和 Vue,样式用 UnoCSS,内容交给 Nuxt Content。其余几块放在表里:

技术用来做什么
Nuxt、Vue、TypeScript页面、交互和服务端逻辑
UnoCSS、Reka UI样式和基础组件
Nuxt Content、Markdown、MDC文章内容
Tiptap后台编辑器
SQLite、Cloudflare D1本地和线上数据库
Cloudflare Workers、R2、Workflows运行网站、存文件、处理音频任务
GitHub、GitHub Actions保存源码和文章,构建部署

项目用 pnpm workspace 管理,日常命令走 Vite+,检查和格式化用 ESLint,测试用 Vitest。

文章最终还是放在仓库里的 Markdown 文件,位于 content/posts/。标题、日期、标签这些信息写在文件开头,Nuxt Content 负责读取和索引。直接改文件可以写文章,在后台编辑也可以。

文章详情会在构建时生成 HTML,文章列表、专栏和工具页则用 SSR。更新正文之后,需要重新构建才能在正式站点看到。

后台发布也沿用这条路:把文章和图片提交到 GitHub,再由 Actions 构建并部署到 Cloudflare。点完发布后要等一会儿,后台可以看进度。内容都留在 Git 里,之后想查某篇文章改过什么,也有记录可看。

AI 摘要用的是 Chat Completions 兼容接口,地址和模型可以在后台配置。生成过的摘要会缓存,文章或配置变化后再更新;生成失败就用原来的简介。

朗读和播客接的是豆包,生成任务放在后台异步跑,完成后把音频存到 R2。播客还要先试听审核,再公开到文章里。这部分涉及的东西比较多,后面值得单独写一篇。

Roadmap

后面想做的主要是这几件事,先记在这里,还没有定时间:

  • 多加一些工具。 目前有封面工具,接下来想做 AI 生图,也可以用来给文章配图。具体接什么服务还没定。
  • 重做账号系统。 现在已经有 GitHub 登录,后面想把账号这块重新整理一下,让工具和评论都能用同一套账号。
  • 改成内部评论。 现在用的是 giscus,评论还需要单独授权。我想换成站内自己的评论,和账号系统一起做。已有评论怎么保留,到时候也要一起处理。

接下来写什么

后面准备写几篇技术文章,聊聊这套技术栈、Nuxt Content 的使用、后台编辑和发布,还有 AI 摘要、音频生成、Cloudflare 部署这些。

这篇就先到这里。有什么想看的内容,或者用的时候发现了问题,欢迎留言。