开发

本站已进化到第三代

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

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

  1. #网站发布
  2. #新版上线
  3. #技术栈
  4. #Strapi
  5. #前端开发
  6. #架构设计
  7. #Supabase
  8. #SvelteKit
  9. #Remix
  10. #Workers
  11. #多语言支持

1090

A breathtaking view of a snow-covered mountain range under a warm, orange and blue sky, with clouds covering the mountains and a person standing on the snow-covered slope.A breathtaking view of a snow-covered mountain range under a warm, orange and blue sky, with clouds covering the mountains and a person standing on the snow-covered slope.

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

第二版:可可托海没有海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. 优化代码。

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

未登录用户的评论需要等待审核。您填写的邮箱将不会被公开。 登录

李大毛

2024年8月15日周四 08:58

回复 Maple: 很喜欢您博客的设计 尤其是摄影栏目中每张照片都配有故事和位置的设计 我也想做一个类似的 囿于个人水平精力有限 目前想以静态站为主 cloudflare page+一个框架 若博主可以给些推荐指导就在感谢不过了...

现在SSG方案我只推荐Astro。然而你图片太多的话就不适合。所以我这一版也没采用SSG方案。

Maple

2024年8月15日周四 08:51

很喜欢您博客的设计 尤其是摄影栏目中每张照片都配有故事和位置的设计 我也想做一个类似的
囿于个人水平精力有限 目前想以静态站为主 cloudflare page+一个框架 若博主可以给些推荐指导就在感谢不过了

不想显示昵称的人

2024年8月14日周三 15:28

这个无服务器架构我觉得我应该学习下,话说博主你结婚了吗?

Gao Tianchi

2024年8月11日周日 09:03

很喜欢您的博客,整个网站在风格上给人一种非常统一且现代的感觉,每一个细节都精心设计,完美契合了整体的风格。我也在独立设计和开发自己的博客网站,目前还在写需求文档,希望以后有机会提交到积薪网站上!

keyle

2024年8月8日周四 09:39

好活 !

李大毛

2024年8月8日周四 04:52

回复 1900: 我之前也打算体验一下SvelteKit CMS,你的感想如何? 当时打算把博客文章用Submodule引用到本地,放在Obsidian里,...

啥是SvelteKit CMS?

1900

2024年8月8日周四 01:35

我之前也打算体验一下SvelteKit CMS,你的感想如何?

当时打算把博客文章用Submodule引用到本地,放在Obsidian里,