The technical stack of this website

Creating your personal site is the perfect time to test new technologies and ways of doing things! In this article I suggest you discover in detail how the site you are on right now works.


NextJS logo

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 logo

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.


The back-end stack is a bit more complicated than the front-end. That's not a problem, let's dive in!


Directus logo

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.

Directus backoffice


GitHub logo

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.


K8S Logo

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.

PulseHeberg plan

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.

Rancher UI