This website is built with a pure Jamstack approach. If you don't know much about the concept, you can check the official source of the Jamstack website.
I like to draw diagrams :) So here is the basic diagram of the implemented Jamstack approach for this website.
The project is based on NextJS w/ Tailwind and deployed to Vercel via Github Actions. This process was very smooth as Vercel handled the deployment pipeline out of the box. So I didn't need to manage my own server and all the related configuration. Gosh, I love serverless :)
Unlike the general approach of fetching the content from the data layer during the build phase, I also kept the data statically in the codebase similar to the CMSs based on Git repositories.
The advantage of this behavior is, that I have full control of the data and I don't need to keep a separate environment.
The disadvantage is, that I need to push the latest data to the repository in order to update the website. And it's a terrible approach for multi-developer projects. But It is not a big deal since the website would not be updated frequently. And plus, I'm the only one working on it :)
I created a script that builds the data model interfaces and the content from Contentful. It's actually pretty cool. The script creates a structure in the following hierarchy.
cms/entities: The directory where all the model interfaces exist
cms/entities/blog.ts: The blog interface model
cms/cms_data.ts: The normalized data fetched from Contentful
cms/cms_service.ts: The service layer on top of the cms_data that can be used in the pages. It has a method for listing with filtering and pagination options and a method for accessing a certain element.