本站已进化到第三代

纯自主研发,各端分离的无服务器架构

开发

-
新版《可可托海没有海》网站发布,第三版历时三四个月开发完成。新版本取消了Node后端,采用Supabase管理数据库,SvelteKit开发CMS,Remix开发前端。支持多语言、对象存储和AI集成功能。未来计划包括增加登录方式、未登录评论、评论提醒及代码优化。
本站已进化到第三代

第一版: 上线大吉!全新个站《可可托海没有海》正式发布

第二版: 可可托海没有海2.0上线

Continue

在上一版使用Next开发的第二版开发完成的时候我就说过,接下来我要用更多的技术栈开发一个更复杂更符合我需求的第三版。经过一年断断续续的开发,实际连续开发时间大概是三四个月,第三版终于正式面世了。

既然要重新开发,必然是对现有的有不满。

对于第二版的CMS,Strapi虽然支持多语言内容,但在某些细节上不能让我满意,比如我希望不同语言的内容保持同样的slug,但相同语言内不得重复,这一点Strapi就做不到。

另外我也需要一个更好的方式存储大量摄影作品,并且在数据库内就存储图片的EXIF。在第二版里我是写了一个接口来在线读取,但我更希望EXIF信息在图片上传的时候就能存入数据库。

于是从那时起我就决定要重新开发。

最开始的时候,我是打算开发一个后端作为API的。到2023年年底,这个后端的功能大部分已经开发完成。具备了将图片转化为各个尺寸和各个格式,并提取EXIF信息的功能。

到了2023年年底,我开始重新思考当时架构的设计:服务端、CMS、前端,三个端是不是太复杂了,可不可以简化?

于是我决定取消Node开发的后端,由CMS直接操作数据库。从年初开始,断断续续将Svelte写的CMS即内容管理后台写完,剩下的工作就比较简单了,用Remix写了你现在看到的这个网站。

架构

整个网站可以分成四个部分:数据库、CMS、边缘函数和博客网站。

数据库使用了Supabase,充分利用了RLS和Postgres的各类插件。另外用户注册登录以及认证使用了Supabase Auth。

CMS使用SvelteKit开发,部署在Cloudflare上。负责对各类内容的编辑,数据的查看和修改,配置的设置等。

文章编辑页面
文章编辑页面
文章列表页
文章列表页
图片页
图片页

你现在正在浏览的网站使用Remix开发,同样部署在Cloudflare上。在选型的时候,因为太久没写React,就决定在React里选。但在尝试了最新版Next之后,我还是对其在非Vercel平台部署的体验感到不爽。于是选了Remix。将来我应该会写一写Remix的开发经验分享。

还有一部分就是Workers。用于调用AI接口、处理图片的上传和EXIF提取等。

特点

各端分离。数据库、CMS、博客都是独立的,将来重构任何一部分都会比较容易。

原生支持对象存储。因为有大量摄影图需要存储以及CDN加速,所以一开始我就决定媒体文件只支持S3存储。

多语言。新版博客希望能吸引来自全世界的访客。实际上前一版就有一些外国人来评论了。在新版里做的更好一些。

AI集成。目前根据标题生成slug、生成图片描述、生成概述和标签已经由AI完成。后续可能有更多应用。

未来计划

目前这个网站的架构和形态都是接近我满意的状态,剩下的事就是修修补补了。

  1. 增加更多的登录方式,包括邮件一键登录;
  2. 未登录评论;
  3. 用户间评论提醒;
  4. 优化代码。

如果你对本站有任何评价和建议,欢迎在评论区提出。