新版博客上线了!项目叫 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 部署这些。
这篇就先到这里。有什么想看的内容,或者用的时候发现了问题,欢迎留言。