How I built this site

At its core, this is a React application.

At first I did not plan to add much to this website, I was only planning to add a few static pages. For this React might be a poor choice. The reason I went for this tech stack anyway is so that work I do on this site can be put into smaller components and re-used for future projects. The more I have been working on this site, the more happy I am about that decision.

Gatsby is a framework based on React.

Gatsby is well known and marketed for its PageSpeed performance. Performance is not the reason I chose this framework. In my opinion Next.js has caught up with Gatsby in this regard, and arguably even surpassed it. Next.js gives greater control over rendering and data fetching. Next.js also generates static pages, with a smaller JavaScript bundle size than Gatsby.

Why I use Gatsby

The true reason I picked Gatsby for this project is how quick it is to set up. I don't need the added complexity that Next.js comes with for a simple portfolio/blog. The many plugins made by the Gatsby team, alongside the community makes this a very fast way of creating smaller websites like this. That is not to say it is not scalable, because it still is

Prismic CMS delivers content

To be honest, my main reason for using Prismic is their price model. For this small website, Prismic is completely free of charge, and there are not many limits. Pulling data from prismic has been a breeze with their first party support for Gatsby. That said, I am not entierly happy with this CMS. It has its purpose, but I would only use it for certain applications, such as this. The way they structured their WYSIWYG, images, and Richtext data in my opinion is not ideal.

Problems I have with Prismic

The WYSIWYG data component that mainly powers this blog template ouputs raw HTML. The structure of this HTML lacks options inside the CMS to control how it is presented. Images are presented as a basic <img> tag with no srcset. Parsing this in the frontend would take too much time, and parsing the string in Node.js can quickly cause issues since I do not have control over the source of the data.

How I 'solved' the problems

I parse the data in Node.js before sending it to the frontend, here I add optimized images.

Cloudflare Pages cloud hosting

Cloudflare has excellent pricing for small to medium sized businesses. Unfortunately the day I wanted to launch this website their services had issues. I got numerous generic errors, I almost abandoned it for another hosting solution. The next day these issues were resolved and hosting was a breeze.