How I built this website

Monday, August 29th 2022, 3:50:00 pm

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.