Front-end
The front-end is rendered using mostly SSG (Server Side Generation), which means that every page is a static render. Only the /revalidate route is served with the NextJS backend.
This makes it possible to have a very good referencing because when the Google indexation bot browses the pages of this site, it sees HTML directly rendered by the server.
Chakra-UI is then used as the component library.
It offers dozens of fully customizable components, so you can spend less time building the style of the site, and focus on the content. The library is written in TypeScript which makes writing code very simple thanks to autocompletion.
Back-end
The back-end stack is a bit more complicated than the front-end. That's not a problem, let's dive in!
CMS
Directus is used here to fill all the content of this website, the homepage, all the sections, the blog... It offer a nice looking backoffice to manage all the different entities, with a lot of predefined fields already available.
Deployment
The projet is versionned using Git and hosted on GitHub (currently in a private repo at the time of writing this article).
It uses GitHub actions to build a Docker image and push it to the GitHub Container Registry (GHCR). When the image is pushed, the project is then deployed to a Kubernetes server using Helm, which we will discuss in the next section.
All the actions are triggered when a commit is push to the main branch.
Server
The server on which this website is deployed is hosted at PulseHeberg, it's a VPS with the following specs that are more than enough.
It hosts a Debian distro with K3S installed, to provide a clean Kubernetes installation.
Cert-Manager takes care of generating and refreshing the certificates using Let's Encrypt.
Finally, I have Rancher installed to provide a quick UI for interacting with the containers, beside that, all the deployments are made with Helm.