Development

This site has evolved to the third generation

Completely independently developed, serverless architecture with separate endpoints

After completing the second version of the site with Next, which had issues like Strapi's handling of multilingual slugs and EXIF data storage, a more complex third version was developed over intermittent work spanning a year. The new site architecture involves SvelteKit-based CMS, Supabase for the database with RLS, and Remix for the frontend. Future plans include adding more login options, optimizing code, and improving user interactions.

  1. #web development
  2. #Strapi
  3. #CMS
  4. #database management
  5. #Svelte
  6. #Remix
  7. #Supabase
  8. #Cloudflare

127

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.

When the second version developed using Next was completed in the previous edition, I said I would develop a more complex and suitable third version with a broader technology stack. After a year of intermittent development, with roughly three or four months of continuous work, the third version is finally officially released.

Since I was redeveloping, there was inevitably dissatisfaction with the existing version.

Regarding the CMS of the second version, Strapi, although it supports multilingual content, it didn’t meet my expectations in some details. For instance, I wanted different languages to maintain the same slug yet not allow duplicates within the same language, which Strapi couldn’t achieve.

Moreover, I needed a better solution to store a large number of photography works and store the EXIF data in the database itself. In the second version, I wrote an interface to read the data online, but I preferred the EXIF data to be stored in the database when the image is uploaded.

So, from that point on, I decided to redevelop.

Initially, I planned to develop a backend as the API. By the end of 2023, most of the backend functionalities were completed, including converting images to various sizes and formats and extracting EXIF data.

By the end of 2023, I started to reconsider the architecture I had designed: the server-side, CMS, and frontend—were these three parts too complex? Could it be simplified?

So, I decided to discard the backend developed by Node and let the CMS directly interact with the database. Early in the year, I intermittently completed the CMS, the content management backend written in Svelte. The remaining work was relatively simple, and I used Remix to write the website you see now.

Architecture

The entire website can be divided into four parts: database, CMS, edge functions, and blog site.

The database uses Supabase, fully leveraging RLS and various Postgres plugins. Additionally, user registration, login, and authentication are handled by Supabase Auth.

The CMS is developed using SvelteKit and is deployed on Cloudflare. It is responsible for editing various contents, viewing and modifying data, setting configurations, etc.

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

You are currently browsing a website developed using Remix and deployed on Cloudflare. When making a tech stack choice, I opted for React as I hadn't written it in a long time. However, after testing the latest version of Next, I was dissatisfied with its deployment experience on non-Vercel platforms. So, I chose Remix. In the future, I might share my development experiences with Remix.

Another component involves Workers, used for calling AI interfaces, handling image uploads, and extracting EXIF data.

Features

Separation of Concerns: The database, CMS, and blog are all independent, which will make it easier to refactor any part in the future.

Native Support for Object Storage: Due to the large number of photographs needing storage and CDN acceleration, I decided from the outset that media files would only support S3 storage.

Multi-language: The new version of the blog aims to attract visitors from around the world. In fact, even the previous version received some comments from foreigners. The new version aims to improve on this.

AI Integration: Currently, AI is used to generate slugs based on titles, create image descriptions, summaries, and tags. There might be more applications in the future.

Future Plans

The current architecture and format of this website are close to my satisfaction, and what's left is just some fine-tuning.

- Add more login options, including one-click email login;

- Allow comments from users who are not logged in;

- Notify users about comments;

- Optimize code.

If you have any comments or suggestions about this site, feel free to leave them in the comment section.