T
traeai
RSS登录
返回首页
向阳乔木(@vista8)

https://t.co/4KjcIHiShS

8.0Score
https://t.co/4KjcIHiShS
AI 深度提炼
  • 强调自媒体账号风险,建议建立个人站点作为主阵地。
  • 集成AI工具优化写作流程,如摘要生成、标签推荐等。
  • 基于Tiptap封装的编辑器实现接近飞书的写作体验。
#博客系统#AI辅助#Markdown#开源
打开原文

Article

Conversation

![Image 1: Image](https://x.com/vista8/article/2046897449256759446/media/2046894492591243264)

住院期间想通了:写了个开源博客系统

前段时间生病做手术,休息了一个月,现在终于快恢复了。

住院期间躺着想了个问题,自媒体账号要是不小心被封,该怎么办?

想来想去,觉得还是得有个自己的网站或博客,作为学习和分享的主阵地。

① 自媒体账号可能被封,平台流量也可能波动,但自己的站点不会

② 写作系统应该足够轻,打开就能写,而不是被后台流程打断

③ AI 最该服务的是摘要、标签、封面、SEO等重复工作

④ 博客不该只是展示页,还应该是我们的长期知识资产

轻松写作

① Markdown支持:前台、后台都能编辑,所见即所得,接近飞书 / Notion 的写作体验

② AI辅助创作:选中文本就能用AI改写、润色、扩写、翻译,AI 生成摘要、标签、SEO友好的网址

③ 轻松文章配图:支持 GPT-Image-2和 Nanobana 生图、下载、设封面、对齐、裁剪

④ 多媒体支持:支持粘贴上传图片、音频、视频、电子书,插入Youtube视频和 X 帖子

发布简单

① 多种发布状态,满足多种场景,如公开、草稿、密码访问、链接访问

② 配套Chrome插件、Obsidian插件和Skill技能,随时写作发布

省心省事

① 四套首页主题,移动端友好,开箱即用

② 用赛博菩萨Cloudflare部署,不需要自己维护服务器和 CDN

花了两周时间,消耗大量Codex和Claude Code额度,终于搞定:

![Image 2: Image](https://x.com/vista8/article/2046897449256759446/media/2046894872993619968)

项目已开源(持续迭代,不免有些小Bug):

以前试过很多博客系统,Wordpress、Ghost、Hexo、Hugo都用过。

但现在AI Coding工具越来越强,干脆自己开发。

跟AI反复沟通讨论,推荐用Novel作为编辑器,基于Tiptap封装,据说跟飞书底层技术一样。

![Image 3: Image](https://x.com/vista8/article/2046897449256759446/media/2046894926068330496)

后来宝玉推荐了另一个Tiptap封装的BlockNote,比Novel用起来还简单,但那时候已经用Novel开发了一半,就没换。

![Image 4: Image](https://x.com/vista8/article/2046897449256759446/media/2046894966803505152)

最终实现了跟飞书很接近的编辑体验。

支持粘贴上传任意常见格式文件并显示。

![Image 5: Image](https://x.com/vista8/article/2046897449256759446/media/2046895012500447233)

气泡菜单

开发时才知道,选中文本弹出的菜单,有个专有名词叫Bubble Menu。

常用工具都列出来,加粗、加链接、对齐、高亮,不常用的放到更多里面。

![Image 6: Image](https://x.com/vista8/article/2046897449256759446/media/2046895115416006656)

![Image 7: Image](https://x.com/vista8/article/2046897449256759446/media/2046895282781388800)

另外,还实现了类似Notion的Ask AI功能,选中文本随时跟AI对话。

![Image 8: Image](https://x.com/vista8/article/2046897449256759446/media/2046895320383246336)

后台能添加常用的Prompt,绑定不同模型。简单任务用OpenRouter免费模型就够,生成标题这种重要任务,直接上好模型。

![Image 9: Image](https://x.com/vista8/article/2046897449256759446/media/2046895385097216000)

除了基础的分类设置、菜单设置,还加了不少AI相关功能。

![Image 10: Image](https://x.com/vista8/article/2046897449256759446/media/2046895628769501184)

自定义代码

方便添加流量统计和未来可能用到的Adsense广告。

![Image 11: Image](https://x.com/vista8/article/2046897449256759446/media/2046895683459010560)

API Token

用于Obsidian、Skill等外部工具发布文章到博客,毕竟需要Token保证基本的安全性。

![Image 12: Image](https://x.com/vista8/article/2046897449256759446/media/2046895725246816257)

主题管理

可以选择喜欢的颜色组合和字体搭配。

![Image 13: Image](https://x.com/vista8/article/2046897449256759446/media/2046895772696993792)

文章支持四种发布状态,公开访问、草稿自见、加密访问和链接访问。

![Image 14: Image](https://x.com/vista8/article/2046897449256759446/media/2046895818364637185)

公开和草稿状态好理解。

加密和链接访问的场景是这样,一些商业方案和文章,需要密码或者获取URL后才能访问,博客索引和RSS也不会出现。

![Image 15: Image](https://x.com/vista8/article/2046897449256759446/media/2046895910035374080)

可以通过手动或快捷模版创建不同的模型配置,设定温度和Max Token等细节参数。

比如配置OpenRouter、硅基流动这些第三方模型平台,拉取模型列表,不同配置用于不同场景。

![Image 16: Image](https://x.com/vista8/article/2046897449256759446/media/2046895968109637632)

也支持Cloudflare刚上的Worker AI,免费用户也能用,每天1万神经元(这是他们的计量单位),调用50多个开源模型。

![Image 17: Image](https://x.com/vista8/article/2046897449256759446/media/2046896014377070593)

写文章经常需要配图,AI生图必不可少。

生成封面也好,生成段落配图也好,都用得上。

后台可以配置不同的生图模型提供商,预设生图提示词模版。

![Image 18: Image](https://x.com/vista8/article/2046897449256759446/media/2046896061713973248)

![Image 19: Image](https://x.com/vista8/article/2046897449256759446/media/2046896117988954113)

可以从头生成,或者选中文本生图。

![Image 20: Image](https://x.com/vista8/article/2046897449256759446/media/2046896157738278912)

还会记录100条历史记录,随时搜索查找插入。

另外,文章中的图片都可以随时右键处理,下载、设为封面、对齐、裁剪都可以。

![Image 21: Image](https://x.com/vista8/article/2046897449256759446/media/2046896232057262080)

自由裁剪图片,改变大小或缩放。

![Image 22: Image](https://x.com/vista8/article/2046897449256759446/media/2046896284196610048)

支持全文检索、置顶、设置分类、状态管理,删除用的是软删除,还有恢复的机会。

![Image 23: Image](https://x.com/vista8/article/2046897449256759446/media/2046896355927531520)

段落配图

选中一句话,选中写好的生图Prompt,直出配图。

![Image 24: Image](https://x.com/vista8/article/2046897449256759446/media/2046896505446141954)

嵌入 X(原Twitter)帖子

![Image 25: Image](https://x.com/vista8/article/2046897449256759446/media/2046896585309880320)

嵌入Youtube视频

![Image 26: Image](https://x.com/vista8/article/2046897449256759446/media/2046897012164235264)

上传常见文件格式,也支持斜杠指令,可以二次开发让AI帮你拓展更多斜杠指令。

上周录的使用体验展示,现在的版本会更强大。

用了这个博客以后,觉得最爽的事情是,再也没有理由不更新内容了。

写作成本急剧下降。

像飞书一样,打开就能随时编辑修改,随意粘贴各种类型的图片、音视频。

点击发布,别人就能看到你的文章。

这种感觉,真的很好。