Vercel Deploy

Usage

  • npm run dev

or

  • npm run build
  • npm run start

How it works

The editor mode allows you to create and edit blog posts as much as you want.

Publishing a post will add an entry in the Post table. You can add a title, slug, a tag and a thumbnail to your post (the date is automatically added).

When you create new images and publish the post, a new git commit will be created to push the images. It allows us to not worry about the image and its size as it won't be stored in the DB or passed in the requests.

Since we are using vercel that creates a new environement each deploy, we can't really add the images to the filesystem. We could upload them to S3 or Cloudinary, but for now it's fine to keep them in the repo (in case we switch providers). The git clone is longer but it's easy to manage.

We replace the base64 source by the path to the public folder (it works since it has been pushed).

On the viewer side, img tags are replaced by the <Image> component.

Why?

Total revamp of the previous iteration that was powered by Gatsby and Netlify.

The Netlify CMS was nice but a bit buggy and it was hard to customize.

Gatsby was painful to maintain and the build times were getting crazy.

Finally, while Markdown is super easy to handle, the capabilites are limited (it was the original idea)


This new version uses NextJS (with app router) and was started from scratch.

Blog content are stored inside a Postgres DB and we query it through Prisma. The editor mode features a self-hosted TinyMCE editor and exports HTML.

You can enable a lot of plugins and create your own.

A custom image handler was added to benefit from next/image.

TODO :

  • Multiple tags
  • Draft
  • Auto resize pictures